I seem to be having trouble with my texture not being displayed properly in three.js r71. The plane is just showing up black and I can't figure out what's wrong with my ShaderMaterial. I could really use another set of eyes to help me identify the issue.
Any assistance would be greatly appreciated!
Below is the HTML code snippet:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script src="three.min.js"></script>
<script src="testshdr.js"></script>
</head>
<body>
<!-- Shaders -->
<script id="vertexShader"
type="x-shader/x-vertex" >
varying vec2 vUv;
void main(){
vUv = uv;
gl_Position = projectionMatrix *
modelViewMatrix *
vec4(position, 1.0);
}
</script>
<script name="no_effect"
id="fragmentShader_0"
type="x-shader/x-fragment" >
varying vec2 vUv;
uniform sampler2D editImg;
void main(){
vec4 myTexture = texture2D(editImg, vUv);
gl_FragColor = vec4 (myTexture.r,
myTexture.g,
myTexture.b,
1.0);
}
</script>
<script type="text/javascript">
var tst = new TestShdr();
</script>
</body>
</html>And here's the JavaScript code snippet:
var TestShdr = function () {
'use strict';
var
SCENE,
RENDERER,
CAMERA,
GEO,
MAT,
OBJ,
TEX,
UNIFS,
VS,
FS;
SCENE = new THREE.Scene();
RENDERER = new THREE.WebGLRenderer();
RENDERER.setSize(256, 256);
CAMERA = new THREE.PerspectiveCamera(56, 1, 0.1, 1000);
SCENE.add(CAMERA);
CAMERA.position.z = 5;
TEX = THREE.ImageUtils.loadTexture('1107.jpg');
UNIFS = {
editImg: { type: 't', value: TEX}
};
VS = $('#vertexShader').html();
FS = $('#fragmentShader_0').html();
GEO = new THREE.PlaneBufferGeometry(1, 1, 1, 1);
MAT = new THREE.ShaderMaterial({uniforms: UNIFS,
vertexShader: VS,
fragmentShader: FS
});
OBJ = new THREE.Mesh(GEO, MAT);
SCENE.add(OBJ);
document.body.appendChild(RENDERER.domElement);
RENDERER.render(SCENE, CAMERA);
};