Exercises from the Shader Scriptures

Question

Exercises from the Shader Scriptures

This winter break, I have dedicated my time to delving into the world of shaders. I am currently faced with a challenging exercise:

y = sin(x);

Explore the exercises below and observe the results:

Introduce time (u_time) into the equation before calculating sin. Visualize the movement along x.

Any tips on how to execute this?

javascript three.js glsl shader

Answer 1

Answer №1

To create a sine gradient effect, you'll require 2 uniform variables in your vertex shader: the resolution of the viewport (u_resolution) and the time (u_time) in seconds:

uniform vec2 u_resolution;
uniform float u_time;

The x value can be obtained by the x coordinate of the fragment. Map the x coordinate to the range [0, 2*PI]:

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

Next, calculate the value of y. Utilize the sin function which represents the Sine value:

float y = sin(x + u_time);

Assign the color channels of the fragment based on the value of y. Ensure that y is mapped from the range [-1, 1] to [0, 1]:

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

The end result will be a visually appealing sine gradient that moves from right to left:

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>

Answer 2

To create a sine gradient effect, you'll require 2 uniform variables in your vertex shader: the resolution of the viewport (u_resolution) and the time (u_time) in seconds:

uniform vec2 u_resolution;
uniform float u_time;

The x value can be obtained by the x coordinate of the fragment. Map the x coordinate to the range [0, 2*PI]:

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

Next, calculate the value of y. Utilize the sin function which represents the Sine value:

float y = sin(x + u_time);

Assign the color channels of the fragment based on the value of y. Ensure that y is mapped from the range [-1, 1] to [0, 1]:

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

The end result will be a visually appealing sine gradient that moves from right to left:

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>

Answer 3

Answer №2

This is my view on how it could be achieved:

y = sin(u_time + x);

Observing the sinusoidal wave oscillating horizontally along the x-axis.

Elaboration: u_time represents the duration in seconds since the shader launch. By incorporating this variable, we can add it to the x value prior to performing the sine calculation, resulting in the appearance of the wave advancing along the x-axis.

To set it up, you can modify the text just beneath the graph.https://i.sstatic.net/iId3G.png

Answer 4

This is my view on how it could be achieved:

y = sin(u_time + x);

Observing the sinusoidal wave oscillating horizontally along the x-axis.

Elaboration: u_time represents the duration in seconds since the shader launch. By incorporating this variable, we can add it to the x value prior to performing the sine calculation, resulting in the appearance of the wave advancing along the x-axis.

To set it up, you can modify the text just beneath the graph.https://i.sstatic.net/iId3G.png

Exercises from the Shader Scriptures

Answer №1

Answer №2

Similar questions

tips on setting the time format in dimple.js

The image will remain hidden until it is fully loaded and ready to be displayed

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I am interested in utilizing $axios in conjunction with Vuex constants for my project

How can we wrap the Vuex store within a Vue plugin's install function?

How can you retrieve the X.509 Certificate from a P12 file using Node JS?

Troubleshooting automatic login problem in VB 2013 settings

Using a jQuery UI dialog for multiple checkbox selection. The post array cannot be saved for a multi-select until the dialog is opened

Choosing multiple items using ng-checked and ng-model in AngularJS

DANGEROUS EVALUATION: Tips for Safe Replacement

React Data Filtering Techniques

How to eliminate ampersands from a string using jQuery or JavaScript

Ways to enable an Angular 5 web application to launch in multiple tabs within a single browser

Problems arising from Jquery append functionality

Locate all posts associated with the specified User ID

Currently experimenting with jQuery in conjunction with the reddit API to generate individual divs for every post

Contrasting results when logging an element in Chrome versus IE

Instruct Smarty to display the block exactly as it is

How can components be utilized with v-edit-dialog?

Is there a glitch in the console when sorting an array of dates?