如何将 shadertoy 代码实现到 three.js - 阐明细节

Question

所以这里是前一个问题： How to implement a ShaderToy shader in three.js

尝试将上述 link 中的步骤实施到此代码中，但未成功： three.js/blob/master/examples/webgl_shader.html

所以我替换了原始的顶点着色器和原始的片段着色器，所以我得到了这个代码：

<script id="vertexShader" type="x-shader/x-vertex">
    varying vec2 vUv; 
    void main()
    {

     vUv = uv;

        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;    
    }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">


    uniform float iGlobalTime;
    uniform sampler2D iChannel0;
    uniform sampler2D iChannel1;

    varying vec2 vUv; 

    void main(void)
    {
        vec2 p = -1.0 + 2.0 *vUv;
        vec2 q = p - vec2(0.5, 0.5);

        q.x += sin(iGlobalTime* 0.6) * 0.2;
        q.y += cos(iGlobalTime* 0.4) * 0.3;

        float len = length(q);

        float a = atan(q.y, q.x) + iGlobalTime * 0.3;
        float b = atan(q.y, q.x) + iGlobalTime * 0.3;
        float r1 = 0.3 / len + iGlobalTime * 0.5;
        float r2 = 0.2 / len + iGlobalTime * 0.5;

        float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
        vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
        vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
        vec3 col = vec3(mix(tex1, tex2, m));
        gl_FragColor = vec4(col * len * 1.5, 1.0);
    }
</script>

这很清楚，但是如何以及在何处实施 tuniform：

var tuniform = {


        iGlobalTime:    { type: 'f', value: 0.1 },
        iChannel0:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/tex07.jpg') },
        iChannel1:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/infi.jpg' ) },


    };

和 iGlobalTime 部分？

tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;

所以我的问题是：如何修改此代码（或任何 thrre.js 代码）： three.js/blob/master/examples/webgl_shader.html

要显示一个工作的 shadertoy 示例，其中也包括 iGlobalTime？

==================== EITED部分从这里开始===================== ====

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - shader [Monjori]</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                color: #ffffff;
                font-family:Monospace;
                font-size:13px;
                text-align:center;
                font-weight: bold;

                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
            }

            a {

                color: #ffffff;
            }

            #oldie a { color:#da0 }
        </style>
    </head>
    <body>

        <div id="container"></div>
        <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - shader demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank">Monjori by Mic</a></div>

        <script src="../build/three.min.js"></script>

        <script src="js/Detector.js"></script>
        <script src="js/libs/stats.min.js"></script>

        <script id="vertexShader" type="x-shader/x-vertex">
            varying vec2 vUv; 
            void main()
            {
            vUv = uv;
                vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
                gl_Position = projectionMatrix * mvPosition;    
            }
        </script>

        <script id="fragmentShader" type="x-shader/x-fragment">


            uniform float iGlobalTime;
            uniform sampler2D iChannel0;
            uniform sampler2D iChannel1;

            varying vec2 vUv; 

            void main(void)
            {
                vec2 p = -1.0 + 2.0 *vUv;
                vec2 q = p - vec2(0.5, 0.5);

                q.x += sin(iGlobalTime* 0.6) * 0.2;
                q.y += cos(iGlobalTime* 0.4) * 0.3;

                float len = length(q);

                float a = atan(q.y, q.x) + iGlobalTime * 0.3;
                float b = atan(q.y, q.x) + iGlobalTime * 0.3;
                float r1 = 0.3 / len + iGlobalTime * 0.5;
                float r2 = 0.2 / len + iGlobalTime * 0.5;

                float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
                vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
                vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
                vec3 col = vec3(mix(tex1, tex2, m));
                gl_FragColor = vec4(col * len * 1.5, 1.0);
            }
        </script>

        <script>

            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

            var container, stats;

            var camera, scene, renderer;

            var uniforms;

            init();
            animate();

            function init() {

                container = document.getElementById( 'container' );

                camera = new THREE.Camera();
                camera.position.z = 1;

                scene = new THREE.Scene();

                var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

                uniforms = {
                    time: { type: "f", value: 1.0 },
                    resolution: { type: "v2", value: new THREE.Vector2() }
                };

                var material = new THREE.ShaderMaterial( {

                    uniforms: uniforms,
                    vertexShader: document.getElementById( 'vertexShader' ).textContent,
                    fragmentShader: document.getElementById( 'fragmentShader' ).textContent

                } );

                var mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                container.appendChild( renderer.domElement );

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild( stats.domElement );

                onWindowResize();

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize( event ) {
                renderer.setSize( window.innerWidth, window.innerHeight );

                uniforms.resolution.value.x = renderer.domElement.width;
                uniforms.resolution.value.y = renderer.domElement.height;
            }
            //

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {

                var tuniform = {

                        iGlobalTime:    { type: 'f', value: 0.1 },
                        iChannel0:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg') },
                        iChannel1:  { type: 't', value: THREE.ImageUtils.loadTexture( 'textures/brick_bump.jpg' ) },

                    };
                    tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
                    tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;


                    delta=clock.getDelta();
                    tuniform.iGlobalTime.value += delta;

                    uniforms.time.value += 0.05;

                    renderer.render( scene, camera );

            }

        </script>

    </body>
</html>

Answer 1

要将任何着色器从 shadertoy 转换为 three.js 着色器，您只需拥有正确的 variables/uniforms。 Shadertoy 提供 three.js 着色器默认不提供的制服。例如，Shadertoy 具有 iResolution 制服，您在 three.js 着色器中不会拥有它，因为 Shadertoy 用于在平面 canvas 而不是 3d 对象上进行渲染。 iGlobalTime 也是这些制服之一，默认情况下不在 three.js 着色器中。

在您发布的代码中，您已经正确定义了 iGlobalTime 制服，您只需在代码首次运行时创建一个 THREE.Clock 一次，然后您需要在渲染函数中更新制服。

uniforms.iGlobalTime.value = clock.getElapsedTime();

我已经实现了这个matrix style shader which uses iGlobalTime in three.js here

如何将 shadertoy 代码实现到 three.js - 阐明细节

How to implemen shadertoy code into three.js - clarifying the details

three.js

glsl

webgl

fragment-shader

vertex-buffer