Generate a mesh representing an airplane, with vertices specifying various hues

Question

Generate a mesh representing an airplane, with vertices specifying various hues

After creating approximately 2500 meshes, I implemented an algorithm to determine the color of each mesh. The algorithm calculates a value based on the distance of each mesh to a "red-start" point, which then determines the final color.

However, the current outcome is not satisfactory - there is lagging and the corners appear rough. I am looking for a new approach to achieve the same color outcome using THREE.Shape and FragmentShader. Can you provide guidance on how to achieve this?

Final Objective:

Utilize a single mesh (THREE.Shape) to define the area that needs to be colored for performance optimization.
Ability to input multiple points where red is the maximum color intensity, transitioning to green as you move away from each point.
Allow for movement of these points.
Sections of the mesh between two or more points should display a color based on their distance from each point.

EDIT:

Here is the progress I have made in this jsfiddle.

http://jsfiddle.net/zDh4y/9/

SOLUTION:

http://jsfiddle.net/zDh4y/13/

javascript colors three.js webgl shapes

Answer 1

Answer №1

Success! Mission accomplished!

Improved efficiency and speed achieved!

The key flaw in my approach was using 'millimeter' instead of 'm' for distance units.

dist = dist / (T * T * T);

Take a look at the working solution here:

http://example.com/code-solution

Answer 2

Success! Mission accomplished!

Improved efficiency and speed achieved!

The key flaw in my approach was using 'millimeter' instead of 'm' for distance units.

dist = dist / (T * T * T);

Take a look at the working solution here:

http://example.com/code-solution

Answer 3

Answer №2

Update: The design has been enhanced and now utilizes WebGL technology. Check it out on (Credit to the talented gman)

This technique seamlessly blends the point color with the base color of the quad, adjusting the blending based on the distance between the point and the fragment.

uniform vec2 pointA;
uniform vec2 pointB;
uniform vec2 pointC;
uniform vec4 pointColor;
uniform vec4 baseColor;
varying vec2 texCoord;

float  customBlend(float value){
   return pow(value, 1.2) * 5;
}

vec4 incorporatePoint(vec4  base, vec2 pointTexCoord, vec4 pointColor){
   return mix(pointColor, base, customBlend(distance(pointTexCoord, texCoord)));
}

void main(void)
{ 
    vec4 cumulative = incorporatePoint(baseColor, pointA, pointColor);
    cumulative = incorporatePoint(cumulative, pointB, pointColor);
    cumulative = incorporatePoint(cumulative, pointC, pointColor);     
    gl_FragColor = cumulative;
}

This method is versatile and efficient, suitable for various geometries.

Download the Rendermonkey file containing this shader to experiment with it without worrying about OpenGL\WebGL intricacies.

Answer 4

Update: The design has been enhanced and now utilizes WebGL technology. Check it out on (Credit to the talented gman)

This technique seamlessly blends the point color with the base color of the quad, adjusting the blending based on the distance between the point and the fragment.

uniform vec2 pointA;
uniform vec2 pointB;
uniform vec2 pointC;
uniform vec4 pointColor;
uniform vec4 baseColor;
varying vec2 texCoord;

float  customBlend(float value){
   return pow(value, 1.2) * 5;
}

vec4 incorporatePoint(vec4  base, vec2 pointTexCoord, vec4 pointColor){
   return mix(pointColor, base, customBlend(distance(pointTexCoord, texCoord)));
}

void main(void)
{ 
    vec4 cumulative = incorporatePoint(baseColor, pointA, pointColor);
    cumulative = incorporatePoint(cumulative, pointB, pointColor);
    cumulative = incorporatePoint(cumulative, pointC, pointColor);     
    gl_FragColor = cumulative;
}

This method is versatile and efficient, suitable for various geometries.

Download the Rendermonkey file containing this shader to experiment with it without worrying about OpenGL\WebGL intricacies.

Generate a mesh representing an airplane, with vertices specifying various hues

Answer №1

Answer №2

Similar questions

Error in JavaScript Slideshow

Retrieve the content of a particular text input field that is accompanied by a checkbox, and then display this information within an

Incorporating the JQuery plugin Lightbox_me into a Ruby on Rails application

Tips for overcoming a challenge with a promise of $q

What is the best way to substitute </br> and <br/> with in a text?

Rendering a Pop-up for a Single Array Item Retrieved from an API in ReactJS

implement a dropdown feature for a vertical menu with the help of Jquery

Is it feasible to convert a Google Drive spreadsheet into JSON format without needing the consent screen?

JavaScript: Share module contents internally through exporting

Issue with Angular $compile directive failing to update DOM element

Activate video in Slick Slider with the click of a button

Updating Kendo by modifying the Angular model

Learning to implement $first in an Angular ng-repeat to dynamically add a new table row

Invoking a shared controller function in AngularJS from a separate controller

"An error occurred when processing the JSON data, despite the JSON

Is it true that URL parameters can be found in two distinct locations within this.props in react-router?

Using the textbox input to trigger an alert message

Vuetify's scrolling list feature allows for smooth navigation through a list

Utilizing ES6 JavaScript for Creating Static Methods and Angular 2 Services

Having trouble accessing the information stored in the Firebase Database?