Question

我创建了以下示例，使用Three.js练习一些GLSL编码。我提到了一些示例代码，所以不太确定某些GLSL代码在这里如何工作。

我在下面的两个代码中添加了注释（★），这些代码我不知道发生了什么。

简而言之，我不明白这个白色圆圈是如何产生的，其大小如何变化。

我是GLSL的新手，我觉得这可能是一个数学问题，但是如果有人可以帮助我准确地了解下面这些GLSL代码的内容，我将不胜感激。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/104/three.min.js"></script>
    <title>shader01</title>
    <style>
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>

    <div id="container"></div>

    <script id="fragmentShader" type="x-shader/x-fragment">

        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2  mouse;  
        uniform float time;    
        uniform vec2  resolution; 

        void main(void){

        vec2 st = gl_FragCoord.xy/resolution; 
        
        //★What exactly is this calculation for? Why is it using a length method?   
        float f = 0.1/ length(st - mouse); 

        vec3 colorA = vec3(0.14,0.14,0.90); 
        vec3 colorB = vec3(1.00,0.80,0.20);
        float pct = abs(sin(time));

        //★colorA is 'vec3' while f is 'float', so what kind of calculation is made here? 
        //How does using a mix method make it possible for the size of the white circle to change like this?
        vec3 tmp = mix((colorA) + f, colorB, pct);

        gl_FragColor = vec4(tmp, 1.0);

        }

    </script>

    <script>
        var container;
        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() },
                mouse: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial({
                uniforms: uniforms,
                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);

            onWindowResize();
            window.addEventListener('resize', onWindowResize, false);


        }

        function onWindowResize(e) {
            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();
        }

        document.onmousemove = function (e) {
            uniforms.mouse.value.x = e.pageX / window.innerWidth;
            uniforms.mouse.value.y = 1 - (e.pageY / window.innerHeight);

        }


        function render() {
            uniforms.time.value += 0.01;
            renderer.render(scene, camera);
        }

    </script>

</body>

</html>

这些GLSL代码到底是如何工作的？

0 个答案: