Psrdnoise Demos and Tutorials

https://stegu.github.io/psrdnoise/
Admin
psrdnoise Demos and Tutorials provides a collection of animated WebGL demos and comprehensive...
Tokens:7,274
Snippets:85
Trust Score:9.7
Update:4 months ago
Show doc for...
Tokens:
Raw
### Dynamic Text Placeholder

Source: https://stegu.github.io/psrdnoise/2d-tutorial/2d-psrdnoise-tutorial-07.html

This code snippet serves as a placeholder for dynamically generated text within the tutorial. It indicates that the content in this pane will be updated programmatically.

```plaintext
	// Text in this pane will be dynamically replaced.	
	
```

--------------------------------

### Placeholder for Dynamic Text

Source: https://stegu.github.io/psrdnoise/2d-tutorial/2d-psrdnoise-tutorial-03.html

This code block is a placeholder and its content is dynamically replaced. It does not contain executable code for demonstration purposes.

```c++
	// Text in this pane will be dynamically replaced.
	

```

--------------------------------

### Basic 3D PSRDnoise Fragment Shader

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-01.html

A simple GLSL fragment shader that uses psrdnoise to generate a color based on time and texture coordinates. It requires the 'time' uniform and 'st' varying from the Three.js ShaderMaterial.

```glsl
uniform float time;
varying vec2 st;
void main(){
    vec2 v = 12.0*st;
    vec2 p = vec2(0.0,0.0);
    float alpha = 2.0*time;
    vec2 g;
    float n = 0.5 + 0.5*psrdnoise(v, p, alpha, g);
    vec3 noisecolor = vec3(n);
    gl_FragColor = vec4(noisecolor, 1.0);
}
```

--------------------------------

### Placeholder for Dynamic Text

Source: https://stegu.github.io/psrdnoise/2d-tutorial/2d-psrdnoise-tutorial-06.html

This code block is a placeholder and indicates that the text within this pane will be dynamically replaced. It's often used in tutorials to show where interactive or generated content will appear.

```c++
	// Text in this pane will be dynamically replaced.	
	

```

--------------------------------

### Vertex Shader for Displacement Mapping

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-07.html

This vertex shader implements displacement mapping by moving vertices along their normals based on PSRDnoise. It also perturbs the normal for lighting calculations. Requires 'time', 'projectionMatrix', 'modelViewMatrix' uniforms, and 'position' attribute. 'uvw' and 'N' are passed to the fragment shader.

```glsl
// Vertex shader
uniform float time;
varying vec3 uvw;
varying vec3 N;
// "position", "normal" and the matrices below
// are supplied by the Three.js shader framework
void main()
{
    vec3 p = vec3(0.0);
    const float displaceamount = 0.1;
    vec3 v = position;
    
    // Displace surface
    vec3 g;
    float d = psrdnoise(2.0*v, p, 4.0*time, g);
    g *= 2.0; // Inner derivative of noise coords
    
    uvw = position; // Object space (before transforms)
    v += displaceamount * d * normal;
    
    // Perturb normal
    vec3 N_ = g - dot(g, normal) * normal;
    N = normal - displaceamount * N_;
    N = normalize(N);
    
    gl_Position = projectionMatrix 
            * modelViewMatrix * vec4(v, 1.0);
}
```

--------------------------------

### Fragment Shader for Bump Mapping

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-07.html

This fragment shader calculates bump mapping using PSRDnoise to perturb the normal. It applies ambient and Phong lighting to the textured surface. Ensure 'time', 'modelViewMatrix' uniforms, and 'uvw', 'N' varyings are provided.

```glsl
// Fragment shader
uniform float time;
uniform mat4 modelViewMatrix;
varying vec3 uvw;
varying vec3 N;
void main()
{
    const float bumpamount = 0.02;
    vec3 v = 8.0*vec3(uvw);
    vec3 p = vec3(0.0);
    vec3 g;
    float bump;
    bump = psrdnoise(v, p, 0.0, g);
    g *= 8.0; // Inner derivative of v wrt uvw
    
    vec3 pattern = vec3(0.5+0.5*bump);
    pattern.rb = 1.0-pattern.rb; 
    
    // Perturb normal
    vec3 N_ = g - dot(g, N) * N;
    vec3 bumpedN = N - bumpamount * N_;
    bumpedN = normalize(mat3(modelViewMatrix) * bumpedN);
    
    // Lighting
    vec3 L = normalize(vec3(1.0,1.0,1.0));
    vec3 specularcolor = vec3(1.0); // white
    float lightA = 0.2;  // Ambient lighting
    float phongD = max(0.0, dot(L, bumpedN));
    float lightD = mix(phongD, 1.0, lightA);
    float lightS = -normalize(reflect(L, bumpedN)).z;
    lightS = max(0.0, lightS);
    lightS = pow(lightS, 16.0);
    
    vec3 color = lightD * pattern
            + lightS * specularcolor;
    gl_FragColor = vec4(color, 1.0);
}
```

--------------------------------

### GLSL Fragment Shader for 3D Noise Animation

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-03.html

This GLSL fragment shader uses psrdnoise with a time-varying alpha parameter to animate a 3D texture on a sphere. It maps local object coordinates to texture coordinates and outputs a grayscale color based on the noise value.

```glsl
uniform float time;
varying vec3 uvw;

void main() {
    vec3 v = 4.0*vec3(uvw);
    vec3 p = vec3(0.0);
    vec3 g;
    float alpha = 2.0*time;

    float n = 0.5 + 0.5*psrdnoise(v, p, alpha, g);
    vec3 mixcolor = vec3(n);

    gl_FragColor = vec4(mixcolor, 1.0);
}
```

--------------------------------

### Placeholder Code Snippet

Source: https://stegu.github.io/psrdnoise/2d-tutorial/2d-psrdnoise-tutorial-19.html

This is a placeholder code block. It indicates where dynamic content would typically be inserted or displayed.

```plaintext
	// Text in this pane will be dynamically replaced.
	
```

--------------------------------

### GLSL Bump Mapping Shader with PSRDnoise

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-06.html

This GLSL fragment shader calculates bump mapping using the analytical gradient from psrdnoise. It perturbs the surface normal based on the noise gradient and applies a simplified lighting model. Ensure 'psrdnoise' function is available in your shader environment.

```glsl
uniform float time;
uniform mat4 modelViewMatrix;
varying vec3 uvw;
varying vec3 N;
void main()
{
    // A reasonable amplitude for features 1/8 unit wide
    const float bumpamount = 0.02;
    vec3 v = 8.0*vec3(uvw);
    vec3 p = vec3(0.0);
    vec3 g;
    float bump;
    bump = psrdnoise(v, p, 0.0, g);
    g *= 8.0; // Scale with inner derivative (v is 8.0*uvw)
    vec3 pattern = vec3(0.5+0.5*bump);
    pattern.rb = 1.0-pattern.rb; // spruce it up

    // Perturb normal (Yes, this is all we need to do)
    vec3 N_ = g - dot(g, N) * N; // N_ orthogonal to N
    vec3 bumpedN = N - bumpamount * N_;
    bumpedN = normalize(mat3(modelViewMatrix) * bumpedN);

    // Roll our own lighting model ("For clarity". Meh.)
    vec3 lightDirection = normalize(vec3(1.0,1.0,1.0));
    vec3 specularcolor = vec3(1.0); // white
    float lightA = 0.2;  // Ambient light
    float phongD = max(0.0, dot(lightDirection, bumpedN));
    float lightD = mix(phongD, 1.0, lightA);
    float lightS = max(0.0, -normalize( 
        reflect(lightDirection, bumpedN)).z);
    lightS = pow(lightS, 16.0);
    vec3 color = lightD * pattern + lightS * specularcolor;
    gl_FragColor = vec4(color, 1.0);
}
```

--------------------------------

### Fragment Shader for Fire Effect

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-05.html

This GLSL fragment shader generates a fire-like pattern using animated psrdnoise. It combines multiple octaves of noise with gradient length for a 'wormy' look and applies a color blend from black to yellow.

```glsl
uniform float time;
varying vec3 uvw;
void main(){
    vec3 v = 4.0*vec3(uvw);
    vec3 p = vec3(0.0);
    vec3 g, g1;
    float alpha = 0.25*time; 
    float n = psrdnoise(v, p, alpha, g);
    
    float s = 4.0; // Skip scale 2.0
    float w = 0.5;
    for(float i=0.0; i<4.0; i++) {
        n += w * psrdnoise(s*v + w*0.05*g, p, s*alpha, g1);
        g += 2.0*w*g1;
        w *= 0.5;
        s *= 2.0;
    }
    float m = 0.1 + 0.1*n + 0.1*length(g); 
    vec3 orange = vec3(1.0,0.5,0.0);
    vec3 mixcolor = 2.0 * m * orange; // clamps to yellow
    gl_FragColor = vec4(mixcolor, 1.0);
}
```

--------------------------------

### 3D Puffy Smoke Shader

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-04.html

This GLSL fragment shader implements a puffy smoke effect using 3D psrdnoise. It iteratively samples the noise function with increasing frequency and decreasing amplitude, accumulating gradient sums to create turbulence. The final color is derived from the accumulated noise value.

```glsl
uniform float time;
varying vec3 uvw;
void main(){
    vec3 v = 4.0*vec3(uvw);
    vec3 p = vec3(0.0);
    vec3 g;
    vec3 gsum = vec3(0.0);
    float alpha = 2.0*time;
    float w = 1.0;
    float s = 1.0;
    float n = 0.0;
    for(float i=0.0; i<5.0; i++) {
        n += w * psrdnoise(s*v + 0.13*gsum, p, s*alpha, g);
        gsum += w*g;
        w *= 0.5;
        s *= 2.0;
    }
    vec3 mixcolor = vec3(0.5 + 0.4*n);
    gl_FragColor = vec4(mixcolor, 1.0);
}
```

--------------------------------

### Fragment Shader for 3D Noise Texture

Source: https://stegu.github.io/psrdnoise/3d-tutorial

This fragment shader calculates a 3D noise color based on time and texture coordinates. It uses the psrdnoise function to generate the noise. Ensure Three.js is set up to provide the 'time' uniform and 'st' varying.

```glsl
uniform float time;
varying vec2 st;
void main(){
    vec2 v = 12.0*st;
    vec2 p = vec2(0.0,0.0);
    float alpha = 2.0*time;
    vec2 g;
    float n = 0.5 + 0.5*psrdnoise(v, p, alpha, g);
    vec3 noisecolor = vec3(n);
    
    gl_FragColor = vec4(noisecolor, 1.0);
}
```

--------------------------------

### Fragment Shader for Seamless 3D Texture

Source: https://stegu.github.io/psrdnoise/3d-tutorial/3d-psrdnoise-tutorial-02.html

This fragment shader adjusts texture coordinates to make the texture twice as wide and applies periodicity to the 2D noise to remove seams. It uses PSRDnoise to generate the texture color.

```glsl
uniform float time;
varying vec2 st;
void main(){
    vec2 v = st*vec2(24.0, 12.0);
    vec2 p = vec2(24.0,24.0);
    float alpha = 2.0*time;
    vec2 g;
    float n = 0.5 + 0.5*psrdnoise(v, p, alpha, g);
    vec3 mixcolor = vec3(n);
     
    gl_FragColor = vec4(mixcolor, 1.0);
}
```
Tokens:
Raw