Question

我在这两个SO Q＆amp; A（Shadertoy by lennyjpg，one）的帮助下，基于two创建了一个本地着色器沙箱。我正在将Shadertoy转换为使用Three.js作为沙箱，用于使用Three.js的大型项目。但是，虽然没有显示错误，但我没有看到预期的结果。仅显示摄像头助手。我在这做错了什么？（请参阅下面的runnable片段。）先谢谢！

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那样一步一步应该帮助你解决它

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

1 个答案: