着色器练习册

Question

我正在度过这个寒假，试图学习一些关于着色器的知识，我坚持做这对夫妇的练习：

y = sin(x);

尝试以下练习并注意会发生什么：

• 在计算 sin 之前将时间 (u_time) 添加到 x。将这个动作内化 x.

如何实现？

Answer 1

我相信会是这样的：

y = sin(u_time + x);

您应该看到正弦波沿 x 轴移动。

说明： u_time 是自着色器启动以来的时间，以秒为单位。使用这个变量，我们可以在计算 sin 之前将它加到 x 值上，这将给出波浪沿 x 轴移动的效果。

要实现它，您可以更改图表下方的文本。

Answer 2

您需要 2 个统一变量，视口的分辨率 (u_resolution) 和时间 (u_time)，以秒为单位：

uniform vec2 u_resolution;
uniform float u_time;

x可以通过片段的x坐标得到。将 x 坐标映射到 [0, 2*PI] 范围内：

vec2 st = gl_FragCoord.xy/u_resolution.xy;
float x = st.x * 2.0 * 3.141529;

计算y。 sin 是 Sine 函数：

float y = sin(x + u_time);

通过y设置片段的颜色通道。 y 必须从 [-1, 1] 范围映射到 [0, 1]：

gl_FragColor = vec4(vec3(y*0.5+0.5), 1.0);

结果是一个正弦梯度，从右向左移动：

var container, camera, scene, renderer, 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 = {
        u_time: { type: "f", value: 1.0 },
        u_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 );
    (window.onresize = function() {
        renderer.setSize( window.innerWidth, window.innerHeight );
        uniforms.u_resolution.value.x = renderer.domElement.width;
        uniforms.u_resolution.value.y = renderer.domElement.height;
    })();
}

function animate(delta_ms) {
    requestAnimationFrame( animate );
    uniforms.u_time.value = delta_ms / 1000.0;
    renderer.render( scene, camera );
}

<script id="vertexShader" type="x-shader/x-vertex">
void main() {
    gl_Position = vec4( position, 1.0 );
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec2 u_resolution;
uniform float u_time;

void main() {
    vec2 st = gl_FragCoord.xy/u_resolution.xy;

    float x = st.x * 2.0 * 3.141529;
    float y = sin(x + u_time);

    gl_FragColor = vec4(vec3(y*0.5+0.5), 1.0);
}
</script>

<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>