Maximizing the performance of shader color calls

Question

Maximizing the performance of shader color calls

Exploring shaders with Three.js is a new challenge for me, and I'm struggling to modify some crucial code without just adjusting the RGBA values. One limitation I face is being unable to enclose it within an .html() method. My goal is to apply 10 different shader colors.

varying vec3 vNormal;
void main() {
  float intensity = pow(0.4 - dot(vNormal, vec3(0.0, 0.0, 1.0)), 4.0);
  gl_FragColor = vec4(0, 0, 255, 1.0) * intensity; }
  //gl_FragColor = vec4(0, 0, 255, 1.0) represents the RGBA value
}

Currently, I'm stuck not being able to make any changes to that line of code besides leaving it as is for it to function properly. The only option I have is duplicating the ID in its script tag, adjusting the RGBA values, and assigning it to different <script> elements. However, repeating this process ten times is not ideal for efficiency.

You can access the complete necessary code through this fiddle. How would you go about altering the code so you can easily reference a shader color?

javascript three.js

Answer 1

Answer №1

If you want to add a uniform for the color, check out this link to see an example of how it can be done with Three.js shaders.
Essentially, the HTML/shaders code looks like this:

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

<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 diffuse;
void main() {
  gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0);
}
</script>

To create the shader in JavaScript:

var uniforms = {
  diffuse: { type: "c", value: new THREE.Color(0xeeeeee) }
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
});

You can change the color by modifying `uniforms.diffuse.value`. My example doesn't include vNormal and intensity, but you should get the concept.
The shaders could also be defined as JavaScript variables or Strings instead of directly in HTML.

Take a look at this version of your fiddle for reference.

For more experiments with Three.js shaders and ShaderMaterial, visit THIS page of mine.

Answer 2

If you want to add a uniform for the color, check out this link to see an example of how it can be done with Three.js shaders.
Essentially, the HTML/shaders code looks like this:

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

<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 diffuse;
void main() {
  gl_FragColor = vec4(diffuse.x, diffuse.y, diffuse.z, 1.0);
}
</script>

To create the shader in JavaScript:

var uniforms = {
  diffuse: { type: "c", value: new THREE.Color(0xeeeeee) }
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  vertexShader: vertexShader,
  fragmentShader: fragmentShader,
});

You can change the color by modifying `uniforms.diffuse.value`. My example doesn't include vNormal and intensity, but you should get the concept.
The shaders could also be defined as JavaScript variables or Strings instead of directly in HTML.

Take a look at this version of your fiddle for reference.

For more experiments with Three.js shaders and ShaderMaterial, visit THIS page of mine.

Maximizing the performance of shader color calls

Answer №1

Similar questions

How to Use Jquery to Delete a Specific String

I am interested in extracting specific data from the JSON response

Angular's Components and Directives: A Comprehensive Guide

Hovering triggers the appearance of Particle JS

What is the best way to link the :style attribute with object syntax and incorporate multiple background images?

"Concealing Querystrings in Node.js and AJAX: A Step-by-Step

Discover the step-by-step guide to creating a dynamic and adaptable gallery layout using

Encountering an unexpected error: receiving a void element tag as input in React

Retrieve the downloaded status of a blob within a specific function

Error message in Node.js: Unable to establish connection to 127.0.0.1 on port 21 due to E

Promise not being properly returned by io.emit

Reduce the file size of CSS and JS files for Magento

Creating a dynamically changing AppBar component in material-ui-next React that responds to scroll events

The property 'clone' is undefined and cannot be read

Issue with the System.Web.HttpRequestValidationException

Is it possible to send requests to multiple APIs using a TypeScript event handler?

What causes parseInt to transform a value into infinity?

Please refrain from displaying the POST response in Express

Tips for creating boxes with clearly defined edges on shared sides using three.js

The script is not functioning properly due to an error stating "(Uncaught ReferenceError: $ajaxUtils is not defined)"