I am currently working on a local shader sandbox project inspired by a Shadertoy created by lennyjpg. I have been referencing two Stack Overflow questions and answers (one, two) for help. The goal is to convert the Shadertoy code to use Three.js for a larger project that already utilizes Three.js. However, despite no apparent errors, I am not getting the expected output. Only the camera helper seems to be displayed. Can anyone identify what mistake I might be making? (Please refer to the runnable snippet provided below.) Appreciate any assistance in advance!
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
var container;
var clock;
var camera, scene, renderer, mesh;
var cameraOrtho;
var frustumSize = 600;
init();
animate();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
clock = new THREE.Clock();
scene = new THREE.Scene();
cameraOrtho = new THREE.OrthographicCamera(0.5 * frustumSize * aspect / - 2, 0.5 * frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 150, 1000);
cameraOrthoHelper = new THREE.CameraHelper(cameraOrtho);
scene.add(cameraOrthoHelper);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
var material = new THREE.ShaderMaterial({
uniforms: {
uTime: { value: 0.1 },
uResolution: { value: new THREE.Vector2(SCREEN_WIDTH, SCREEN_HEIGHT, 1, 1) }
},
vertexShader: document.getElementById('vertshader').textContent,
fragmentShader: document.getElementById('fragshader').textContent
});
mesh = new THREE.Mesh(new THREE.PlaneGeometry(SCREEN_WIDTH, SCREEN_HEIGHT), material);
mesh.position.set(0, 0, 100);
scene.add(mesh);
}
function animate() {
requestAnimationFrame(animate);
update();
render();
}
function update() {
mesh.material.uniforms.uTime.value += clock.getDelta();
}
function render() {
renderer.render(scene, cameraOrtho);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.js"></script>
<script type="x-shader/x-vertex" id="vertshader">
uniform float uTime;
uniform vec2 uResolution;
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragshader">
uniform float uTime;
uniform vec2 uResolution;
varying vec2 vUv;
float f = 0.15, r = 0.4, h=0.5;
void main() {
vec2 uvCustom = -1.0 + 2.0 *vUv;
vec2 ak = abs(gl_FragCoord.xy / uvCustom.xy-0.5);
float g = 1.0/1.618033988749;
float t = uTime * 0.7 + fract(sin(uvCustom.x+1.0))*2.0;
float e = 1.0 + sin(uvCustom.x*3.0)*2.6;
float k = cos(t - e) + 2.0;
vec4 tmp = vec4( abs( sin(t + cos(0.5 * t + (uvCustom.x+t*0.001) * k) ) ));
float m = sin(uTime*0.37);
if (m > .0) {
if(uvCustom.y > h){
tmp = vec4( abs( cos(t + sin(0.5 * t + (uvCustom.x+t*0.001) * k) ) ));
}
}
gl_FragColor = tmp * smoothstep(ak.x,ak.x+f,r) * smoothstep(ak.y,ak.y+f,r);
if (m < .0) {
if (uvCustom.x>1.0) gl_FragColor = 1.0 - gl_FragColor ;
}
}
</script>