Click here to access the jsFiddle adaptation of this problem.
In my quest to develop a cutting-edge 3D web application, I aim to allow users to choose an image file from their device:
<input id="userImage" type="file"/>
Once a file is selected, the image becomes a key parameter in a THREE.ShaderMaterial object. A glsl shader is then applied to the image and the outcome is displayed within a browser container:
$("#userImage").change(function(){
var texture = THREE.ImageUtils.loadTexture( $("#userImage").val() );
texture.image.crossOrigin = "anonymous";
shader.uniforms.input.value = texture;
shader.uniforms.input.needsUpdate = true;
});
Sadly, an error arises during this process:
Cross-origin image load denied by Cross-Origin Resource Sharing policy.
I am aware of the challenges related to fetching cross-origin resources in WebGL. However, the official WebGL specification offers a potential solution:
The following ECMAScript example demonstrates how to issue a CORS request for an image coming from another domain. The image is fetched from the server without any credentials, i.e., cookies.
var gl = ...;
var image = new Image();
// The onload handler should be set to a function which uploads the HTMLImageElement
// using texImage2D or texSubImage2D.
image.onload = ...;
image.crossOrigin = "anonymous";
image.src = "http://other-domain.com/image.jpg";
Although I have set the crossOrigin value for the image as specified, the error persists. What distinguishes my approach from the documented example? Can local resources be utilized in WebGL similar to external server-hosted resources? Alternatively, are there alternative solutions I should explore to achieve my objective?