search

sketchpunk / FunWithWebGL2

Fun with WebGL 2.0 Youtube Tutorial Series
666 stars 141 forks source link

crossOrigin problem #15

Closed soniapello closed 4 years ago

soniapello commented 4 years ago

Hi I had a white screen for lesson 13 in the console I get Uncaught DOMException: Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded. at WebGL2RenderingContext.GLInstance.gl.fLoadTexture for line 147 this.texImage2D(this.TEXTURE_2D, 0, this.RGBA, this.RGBA, this.UNSIGNED_BYTE, img); so I modify fLoadTexture to add

gl.fLoadTexture = function(name,img,doYFlip,crossOrigin,url){
        if (crossOrigin) {
            img.crossOrigin = '';
          }
          img.src = url;

but I get a black cube without texture Is there any solution to handle this crossOrigin problem ?

sketchpunk commented 4 years ago

are you running the samples through a webserver? There are specific things that the sandbox security will not allow to run off the harddrive directly, loading textures is one of them. In future videos I switch to using ES6 Modules and that also requires a webserver to stop those security issues.

In the git repo I write a small webserver in go that people can use. You can run the executable I supplied, or recompile the go file to make a new executable. If you don't trust running excutables, there is a chrome plugin that you can get that'll run a small webserver on your pc that will also do the work.

Chrome Extension https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en

The app I made /shared/go_webserver https://github.com/sketchpunk/FunWithWebGL2/tree/master/shared/go_webserver