javascript - 将 Shadertoy 转换为我自己的本地 Three.js 沙箱

Question

我正在基于 Shadertoy by lennyjpg 制作本地着色器沙箱在这两个 SO 问答( one ， two )的帮助下。我正在将 Shadertoy 转换为使用 Three.js 作为使用 Three.js 的大型项目的沙箱。但是，虽然没有显示错误，但我没有看到预期的结果。仅显示相机助手。我在这里做错了什么？ (请参阅下面的可运行代码片段。)提前致谢!

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 );
// renderer.autoClear = false;

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);
        // vec2 uv = gl_FragCoord.xy / uResolution.y;
        // vec2 ak = abs(gl_FragCoord.xy / uResolution.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>

Answer 1

你应该尝试不使用花哨的着色器。将片段着色器更改为

void main() {
   gl_FragColor = vec4(1,0,0,1);
}

您会发现您根本没有绘制 PlaneGeometry。这是问题 1。

更改THREE.OrthographicCamera到只是THREE.Camera只是制作 THREE.PlaneGeometry尺寸2, 2你会看到红色

现在，放回原来的片段着色器不起作用，但是像这样的简单片段着色器

    uniform float uTime;
    uniform vec2 uResolution;
    varying vec2 vUv;

    void main() {
        vec2 uv = gl_FragCoord.xy / uResolution;
        gl_FragColor = vec4(uv, 0, 1);
    }

是的。我不会调试你的片段着色器，因为我不知道它应该做什么，但一次迈出一步，比如 this answer应该可以帮助你弄清楚