WebGl Image Texture CORS

by Leo

HTML

<script src="//webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
<canvas id="canvas"></canvas>

<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;

varying vec2 v_texCoord;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

   // pass the texCoord to the fragment shader
   // The GPU will interpolate this value between points.
   v_texCoord = a_texCoord;
}
</script>

<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

// our textures
uniform sampler2D u_image0;
uniform sampler2D u_image1;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
   vec4 color0 = texture2D(u_image0, v_texCoord);
   vec4 color1 = texture2D(u_image1, v_texCoord);
   gl_FragColor = color0 * color1;
}
</script>

JavaScript

function loadImage(url, callback) {
  var image = new Image();
  image.src = url;
  image.onload = callback;
  //image.crossOrigin = "anonymous";
  return image;
}

function loadImages(urls, callback) {
  var images = [];
  var imagesToLoad = urls.length;

  // Called each time an image finished
  // loading.
  var onImageLoad = function() {
    --imagesToLoad;
    // If all the images are loaded call the callback.
    if (imagesToLoad === 0) {
      //images.forEach((image)=>{
      //     image.crossOrigin = "anonymous";
      //})
      callback(images);
    }
  };

  for (var ii = 0; ii < imagesToLoad; ++ii) {
    var image = loadImage(urls[ii], onImageLoad);
    images.push(image);
  }
}

function main() {
  loadImages([
   // "https://raw.githubusercontent.com/greggman/webgl-fundamentals/master/webgl/resources/leaves.jpg",
   // "https://raw.githubusercontent.com/greggman/webgl-fundamentals/master/webgl/resources/star.jpg",
   "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i14!2i2620!3i6333!4i256!2m3!1e0!2sm!3i452161210!3m9!2sen-GB!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&amp;key=AIzaSyAwxGAyoz6Bv5m1OGdojjB94JJl06MrkLk&amp;token=14341",
   "https://maps.googleapis.com/maps/vt?pb=!1m5!1m4!1i14!2i2620!3i6333!4i256!2m3!1e0!2sm!3i452161210!3m9!2sen-GB!3sUS!5e18!12m1!1e68!12m3!1e37!2m1!1ssmartmaps!4e0&amp;key=AIzaSyAwxGAyoz6Bv5m1OGdojjB94JJl06MrkLk&amp;token=14341"
  ], render);
}

function render(images) {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById("canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
  gl.useProgram(program);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texcoordLocation = gl.getAttribLocation(program, "a_texCoord");

  // Create a buffer to put three...