着色器练习书

Question

我在这个寒假里度过，试图学习一些有关着色器的知识，但我坚持进行以下几次练习：

y = sin(x);

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

• [在计算正弦之前将时间（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是sin功能：

Sine

通过float y = sin(x + u_time); 设置片段的颜色通道。 y必须从[-1，1]范围映射到[0，1]：

y

结果是正弦渐变，从右向左移动：

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 );
    onWindowResize();
    window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize( event ) {
    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 );
}