Using ThreeJS/WebGL to Send Functions to Shaders

Question

Using ThreeJS/WebGL to Send Functions to Shaders

I have created a custom noise function that accepts a 3D coordinate (x, y, z) and returns a noise value between 0 and 1. I am interested in incorporating this function into my vertex shader to animate vertex positions. Can I access this external function from within the vertex shader, or do I need to rewrite it directly in the shader code?

Appreciate any guidance on this matter.

javascript three.js webgl

Answer 1

Answer №1

To incorporate your function into the vertex shader itself, you can embed it as a string within the shader code. If you wish to reuse the same function across multiple shaders, consider utilizing string substitution, search and replace, or templates.

Here's an example:

const noiseSnippet = `
   vec3 noise(float v) {
      ...
   }
`;

const someVertexShaderSource = `
   ${noiseSnippet}

   varying vec2 vUv;

   void main() {
       vUv = uv;
       vec3 p = position + noise(position.x);
       vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
       gl_Position = projectionMatrix * mvPosition;
   }
`;

See below for a working demonstration:

// Function snippet from: https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
const noiseSnippet = `
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}
`;

const vs = `
  ${noiseSnippet}

  uniform float time;

  void main() {
    float n = noise(vec3(position) + time) * 2. - 1.;
    vec3 p = position + vec3(0, n * .1, 0);
    vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
    gl_Position = projectionMatrix * mvPosition;
  }
`;
const fs = `
  precision mediump float; 
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`;

const camera = new THREE.PerspectiveCamera(40, 1, 1, 3000);
camera.position.z = 4;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const uniforms = {
  time: { value: 0, },
};
const material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vs,
  fragmentShader: fs,
  wireframe: true,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);


function resizeCanvasToMatchDisplaySize(canvas) {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function render(time) {
  time *= 0.001;  // convert to seconds
  uniforms.time.value = time * 4.;
  
  resizeCanvasToMatchDisplaySize(renderer.domElement);
  
  mesh.rotation.y = time;
  
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

Answer 2

To incorporate your function into the vertex shader itself, you can embed it as a string within the shader code. If you wish to reuse the same function across multiple shaders, consider utilizing string substitution, search and replace, or templates.

Here's an example:

const noiseSnippet = `
   vec3 noise(float v) {
      ...
   }
`;

const someVertexShaderSource = `
   ${noiseSnippet}

   varying vec2 vUv;

   void main() {
       vUv = uv;
       vec3 p = position + noise(position.x);
       vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
       gl_Position = projectionMatrix * mvPosition;
   }
`;

See below for a working demonstration:

// Function snippet from: https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
const noiseSnippet = `
float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;}
vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);}

float noise(vec3 p){
    vec3 a = floor(p);
    vec3 d = p - a;
    d = d * d * (3.0 - 2.0 * d);

    vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0);
    vec4 k1 = perm(b.xyxy);
    vec4 k2 = perm(k1.xyxy + b.zzww);

    vec4 c = k2 + a.zzzz;
    vec4 k3 = perm(c);
    vec4 k4 = perm(c + 1.0);

    vec4 o1 = fract(k3 * (1.0 / 41.0));
    vec4 o2 = fract(k4 * (1.0 / 41.0));

    vec4 o3 = o2 * d.z + o1 * (1.0 - d.z);
    vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x);

    return o4.y * d.y + o4.x * (1.0 - d.y);
}
`;

const vs = `
  ${noiseSnippet}

  uniform float time;

  void main() {
    float n = noise(vec3(position) + time) * 2. - 1.;
    vec3 p = position + vec3(0, n * .1, 0);
    vec4 mvPosition = modelViewMatrix * vec4(p, 1.0);
    gl_Position = projectionMatrix * mvPosition;
  }
`;
const fs = `
  precision mediump float; 
  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`;

const camera = new THREE.PerspectiveCamera(40, 1, 1, 3000);
camera.position.z = 4;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(1, 1, 1);
const uniforms = {
  time: { value: 0, },
};
const material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vs,
  fragmentShader: fs,
  wireframe: true,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);


function resizeCanvasToMatchDisplaySize(canvas) {
  const width = canvas.clientWidth;
  const height = canvas.clientHeight;
  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height, false);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

function render(time) {
  time *= 0.001;  // convert to seconds
  uniforms.time.value = time * 4.;
  
  resizeCanvasToMatchDisplaySize(renderer.domElement);
  
  mesh.rotation.y = time;
  
  renderer.render(scene, camera);
  
  requestAnimationFrame(render);
}
requestAnimationFrame(render);

body { margin: 0; }
canvas { width: 100vw; height: 100vh; display: block; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script>

Answer 3

Answer №2

To include a function in a shader, it must be directly written within the vertex shader source code. It is not possible to bring in a function from another shader by passing it as a parameter or any other method of importation.

Answer 4

To include a function in a shader, it must be directly written within the vertex shader source code. It is not possible to bring in a function from another shader by passing it as a parameter or any other method of importation.

Using ThreeJS/WebGL to Send Functions to Shaders

Answer №1

Answer №2

Similar questions

Tips to swap selections in a Select2 dropdown box

Can you explain the distinction between these two Redux reducer scenarios?

Interactive jQuery tabbed interface with drop-down selectors, inconsistent display of drop-down options when switching between tabs

Can you use ng-show within ng-if in Angular?

What could be causing certain javascript functions to not work properly?

When utilizing an 'imported' asynchronous function, make sure to clean up the useEffect

Malfunctioning string error in Django view caused by boolean inconsistencies

What is the process for setting up a new router?

ReactJs - Reactstrap | Issue with Jumbotron displaying background color

Utilize a Google Chrome extension to interact with the DOM of the active tab

What is the best approach for retrieving a User from my Angular front-end service?

What is the best way to handle an ajax call while working with the main Vue instance?

JS backbone require global models in js

How can user input be converted into a JavaScript variable?

What is the best way to evaluate a sequence of actions and their outcomes?

Exploring the potentials of AngularJs Datatables Promise and the ignited power of Ignited

What is the best way to save a large quantity of objects to a server using ajax and php?

Error in React Bootstrap: ReferenceError - 'openModal' is not defined

Using Rails to Pass Front-End JavaScript Data from an External API to the Controller

Imposing the situation