The color of each vertex reflects its elevation

Question

The color of each vertex reflects its elevation

I am currently developing an innovative audio analyzer, which can be found at this link:

The analyzer is built using the technology of Three.js.

Here is a snippet of the code:

// Here goes your JavaScript code
// It's quite lengthy, but it involves setting up the scene qualities, handling audio data, creating 3D objects, and much more!

However, I would like to enhance the visual appeal by changing the color of vertices based on their Z-axis height.

I envision assigning colors from an array to vertices based on their positions. Something like this:

//Pseudo-code :
var colors = [0x000000, 0x888888, 0xFFFFFF]
for i = 0 to vertices.length :
  if (vertices[i].position.z <= 66) then vertices[i].color = colors[0]
  if (vertices[i].position.z > 66 && vertices[i].position.z < 133) then vertices[i].color = colors[1]
  if (vertices[i].position.z >= 133) then vertices[i].color = colors[2]

Could you assist me in implementing this feature?

PS: The HTML code provided includes placeholders for shaders that could potentially enhance the material appearance.

javascript html css three.js vertex

Answer 1

Answer №1

I successfully managed to get those shaders up and running:

// Vertex shader
varying vec3 col;

void main() {
    col = position;
    vec4 offset = vec4(col.x, col.y, col.z, 1.0);
    gl_Position = projectionMatrix * modelViewMatrix * offset;
}
// Fragment shader
varying vec3 col;
lowp float g;

void main(void) {
    g = float(col.z > 5.0);
    gl_FragColor = vec4(0.6*g, 0.5*(1.0-g) + 0.6*g, 0.6*g, 1.0);
}

The color output is a mix of green and gray, although the transition isn't very smooth:

Answer 2

I successfully managed to get those shaders up and running:

// Vertex shader
varying vec3 col;

void main() {
    col = position;
    vec4 offset = vec4(col.x, col.y, col.z, 1.0);
    gl_Position = projectionMatrix * modelViewMatrix * offset;
}
// Fragment shader
varying vec3 col;
lowp float g;

void main(void) {
    g = float(col.z > 5.0);
    gl_FragColor = vec4(0.6*g, 0.5*(1.0-g) + 0.6*g, 0.6*g, 1.0);
}

The color output is a mix of green and gray, although the transition isn't very smooth:

The color of each vertex reflects its elevation

Answer №1

Similar questions

Utilizing Bootstrap to create a row of four columns

The function elem.colResizable does not exist

Display or conceal a field depending on the user's input

Dividing JSON File Entries Among Several Files

Tips for avoiding template errors when retrieving data using Nuxt's fetch() method

Retrieving the latest file uploaded in a data table

Utilize Bootstrap v4.6 to control the visibility of navigation pills based on specific times of the day using JavaScript

Issue with the styling of the fourth level menu option persists

There is an irritating 5px gap between the divs in the Avada WordPress theme. While using margin-top: -5px helps to reduce this spacing, padding-top: -5

Challenges experienced during the process of uploading a website to the server

What purpose does this JavaScript function serve by executing a for loop with no clear purpose?

Learning how to implement positional audio in Three.js using Tone.js

Utilizing the $divide feature in MongoDB aggregation

JavaScript: Efficient ways to extract necessary elements from an array

Regular expression used to split a unary operator

The dynamic duo: Selenium and HTML!

The default setting for the checkbox is that it is pre-selected

Where do JQuery and framesets vanish to?

How can recursion be implemented when the items are interdependent?

Leveraging PrismJS within an Angular application