I haven't encountered any issues when loading shaders created by others into THREE.js, but I've hit a roadblock when trying to create and run my own shader. The shader works perfectly on the platform where I designed it (), but it doesn't function as expected when I attempt to implement it. I'm uncertain whether the problem lies within the javascript, three.js, or GLSL code, so any assistance would be immensely helpful.
Here's the snippet of my js code:
function newCube(colour=0xffffff,height=1,width=height,depth=height){
const geometry = new THREE.CubeGeometry(height,depth,width);
const material = new THREE.MeshBasicMaterial( {color: colour} );
return(new THREE.Mesh( geometry, material ));
}
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60,window.innerWidth / window.innerHeight,1,10000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xaaaaaa, 1);
document.body.appendChild(renderer.domElement);
const cube = newCube(0x220033,1);
var material= new THREE.RawShaderMaterial({
"id": 5472,
"name": "Fragmented",
"fragmentShader": "precision highp float;\nprecision highp int;\n\nuniform mat4 modelMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\nuniform float time;\nuniform vec3 color;\nuniform vec3 lightPosition;\nvarying vec3 vPosition;\nvarying vec3 vNormal;\nvarying vec3 vColor;\nvarying vec2 vUv;\nvarying vec2 vUv2;\n\nvoid main() {\n vec3 worldPosition = ( modelMatrix * vec4( vPosition, 1.0 )).xyz;\n vec3 worldNormal = normalize( vec3( modelMatrix * vec4( vNormal, 0.0 ) ) );\n vec3 lightVector = normalize( lightPosition - worldPosition );\n float brightness = dot( worldNormal, lightVector );\n gl_FragColor = vec4( color * brightness, 1.0 );\n}",
"vertexShader": "precision highp float;\nprecision highp int;\nuniform mat4 modelMatrix;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform mat4 viewMatrix;\nuniform mat3 normalMatrix;\nuniform vec3 cameraPosition;\nuniform float time;\nuniform vec3 color;\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\nattribute vec2 uv2;\nvarying vec3 vPosition;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec2 vUv2;\nvoid main() {\n vNormal = normal;\n vUv = uv;\n vUv2 = uv2;\n vPosition = position;\n gl_Position= projectionMatrix * modelViewMatrix * vec4( position+sin(position*time)/10., 1. );\n}",
"uniforms": {
"time": {
"name": "time",
"displayName": null,
"type": "f",
"glslType": "float",
"useGridHelper": false,
"useRange": false,
"range": null,
"isRandom": false,
"randomRange": null,
"useToggle": false,
"toggle": null,
"description": "",
"value":0
},
"color": {
"name": "color",
"displayName": null,
"type": "c",
"glslType": "vec3",
"useGridHelper": false,
"useRange": false,
"range": null,
"isRandom": false,
"randomRange": null,
"useToggle": false,
"toggle": null,
"description": "Example light color"
},
"lightPosition": {
"name": "lightPosition",
"displayName": null,
"type": "v3",
"glslType": "vec3",
"useGridHelper": false,
"useRange": false,
"range": null,
"isRandom": false,
"randomRange": null,
"useToggle": false,
"toggle": null,
"description": ""
}
}
});
scene.add(cube);
cube.material=material;
camera.position.z = 3;
function render() {
cube.material.uniforms.time.value+=0.1;
renderer.render(scene, camera);
cube.mesh.rotation.x += 0.05;
cube.mesh.rotation.y -= 0.05;
requestAnimationFrame(render);
}
render();