0

When i run the example code below im getting a black screen in Google chrome and im getting the error :

Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded. at handleLoadedTexture

But when i run the code on a webserver im not getting any errors.

function handleLoadedTexture(texture) {
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
    gl.generateMipmap(gl.TEXTURE_2D);

    gl.bindTexture(gl.TEXTURE_2D, null);
}


var moonTexture;

function initTexture() {
    moonTexture = gl.createTexture();
    moonTexture.image = new Image();
    moonTexture.image.onload = function () {
        handleLoadedTexture(moonTexture)
    }

    moonTexture.image.src = "moon.gif";
}

Am i missing something or could you tell me why im getting this error?

Thanks in advance

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
Sietse
  • 240
  • 1
  • 14
  • 4
    Are you running it in Chrome using a file:// url? You need to run a local server. [Here's an easy one](https://greggman.github.io/servez) and [here's more](https://stackoverflow.com/questions/12905426/what-is-a-faster-alternative-to-pythons-http-server-or-simplehttpserver). The reason is if a webpage could read other files (like images) it could upload files to a remote server so Chrome bans file:// pages from reading other files (like images) – gman Dec 11 '18 at 16:05
  • As @gman stated, this is a CORS error, not a WebGL-related one. – keaukraine Dec 12 '18 at 08:52

0 Answers0