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

问题描述

我正在基于 Shadytoy by lennyjpg 制作本地着色器沙箱这两个SO Q& A(一个，).我正在将Shadertoy转换为将Three.js用作使用Three.js的较大项目的沙箱.但是，虽然没有显示错误，但没有看到预期的结果.仅显示相机助手.我在这里做错了什么? (请参见下面的可运行代码段.)在此先感谢！

I'm making a local shader sandbox based on a Shadertoy by lennyjpg with the help of these two SO Q&A's (one, two). I'm converting the Shadertoy to use Three.js as a sandbox for a larger project that uses Three.js. However, while there are no errors displaying, I'm not seeing the expected result. Only the camera helper displays. What am I doing wrong here? (See the runnable snippet below.) Thanks 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 );
// 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>

推荐答案

您应该在没有精美着色器的情况下进行尝试.将您的片段着色器更改为公正

You should try it without the fancy shader. Change your fragment shader to just

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

您将看到您根本没有绘制PlaneGeometry.那是问题1.

You'll see you're not drawing the PlaneGeometry at all. That's problem number 1.

将THREE.OrthographicCamera更改为THREE.Camera，并将THREE.PlaneGeometry尺寸设置为2, 2，您会看到红色

Changing the THREE.OrthographicCamera to just THREE.Camera and just making the THREE.PlaneGeometry size 2, 2 and you'll see red

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

Now, putting the fragment shader you had back doesn't work but a simple fragment shader like this

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

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

是.我不会调试片段着色器，因为我不知道它应该做什么，而是像这个答案应该可以帮助您找出答案

Does. I'm not going to debug your fragment shader because I have no idea what it's supposed to be doing but take it one step at a time like this answer should help you figure it out

这篇关于将Shadertoy转换为我自己的本地Three.js沙箱的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！