cross-origin image cannot be loaded in WebGL applications

CORS = Cross Origin Resource Sharing. It's a way for the webpage to ask the image server for permission to use the image.​ The cross origin is the security protection that is built in Google Chrome not allowing users to have access to local files (in this case your image/texture). Even in Safari, you will get "the operation is insecure" error. You have couple of options. The easiest way is to have your webgl application runs from a web server such as IIS or Apache. The other option is to open your webgl applications using Internet Explorer or Microsoft Edge browsers if you are using Windows. If you are running your webgl application from Mac using "FireFox" browser, add crossorigin="anonymous" to your image tag in HTML where your texture is getting loaded. But this won't work if you are using "Windows" operating system or any other browsers even in Mac! It only works with MAC+Firefox. So either change your image tag to this img id="texImage" src="wicker_256.jpg" crossorigin="anonymous" or simple add this var image = document.getElementById("texImage"); image.crossOrigin = ""; More on this, read: https://webglfundamentals.org/webgl/lessons/webgl-cors-permission.html