In Three JS, shader x, y, z coordinates are based on the orientation of the object rather than the scene itself

Animating the x,y,z coordinates of vertices in a sphere-like manner with horizontal rings around the center using attributes on a THREE.Points() object has been quite intriguing. Initially, with a MeshStandardMaterial(), tilting the Points object along the z-axis by setting points.rotation.z = 0.2 worked perfectly :

https://i.sstatic.net/SEubx.jpg

However, upon switching to ShaderMaterial() and transferring the animation logic into a shader, I noticed that the z-tilt disappeared. Despite confirming through an axis helper that the Points object was indeed still tilted, it seemed like the shader animation was now affecting the vertices based on the x, y, z coordinates of the scene rather than the tilted Points object.

https://i.sstatic.net/QEVOF.jpg

The image clearly shows that the sphere and outer ring of particles are no longer tilted at the same angle as indicated by the axis helpers.

I'm wondering if there's a simple solution to rectify this issue or if I need to adjust the shader animation to accommodate an overall rotation?

Thank you.

Below is the requested shader script, but after experimenting with similar shader animations from various tutorials, it seems like they all exhibit the same behavior. Hence, I suspect this might be an inherent problem or expected functionality with shaders:

#define PI 3.1415926535897932384626433832795
uniform float uSize;
attribute float aScale;
attribute vec4 aParticle;
uniform float uTime;
varying vec3 vColor;
void main()
{
/**
 * Position
 */
    vec4 modelPosition = modelMatrix * vec4(position, 1.0);


/**
* Particle
*/


    float moveT = aParticle.g;

    float moveS = aParticle.r + uTime * aParticle.b;


    float fullRotate = step(360.0, moveS);
    moveS = moveS - (fullRotate * 360.0);


    float radMoveS = moveS * (PI / 180.0);
    float radMoveT = moveT * (PI / 180.0);

    modelPosition.x = aParticle.a * cos(radMoveS) * sin(radMoveT); //x
    modelPosition.y = aParticle.a * cos(radMoveT); //y
    modelPosition.z = aParticle.a * sin(radMoveS) * sin(radMoveT); //z


    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectedPosition = projectionMatrix * viewPosition;
    gl_Position = projectedPosition;


/**
 * Size
 */
    gl_PointSize = uSize * aScale;
    //Attenuation
    gl_PointSize *= ( 1.0 / - viewPosition.z );

/**
* Color
*/
    vColor = color;
}

Answer №1

When working in your vertex shader, it is important to properly apply the modelMatrix to the position using multiplication:

vec4 modelPosition = modelMatrix * vec4(position, 1.0);

Take note that any changes made to the xyz components will overwrite the results of this matrix multiplication:

modelPosition.x = aParticle.a * cos(radMoveS) * sin(radMoveT);

This indicates that you are not effectively utilizing both the a. position and b. modelMatrix. Make sure to apply the matrix multiplication after assigning the local vertex positions.

vec4 newPosition = vec4(
    aParticle.a * cos(radMoveS) * sin(radMoveT), // x
    aParticle.a * cos(radMoveT), // y
    aParticle.a * sin(radMoveS) * sin(radMoveT), // z
    1.0 // w
);
Vec4 modelPosition = modelMatrix * newPosition;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

CSS not reflecting changes after the href of the <link> tag has been updated

Hey there, I'm a beginner in the world of programming and currently facing an issue that I need help with. My goal is to dynamically update the CSS of my webpage by using JQuery to change the 'href' value in the link tag. In order to test t ...

Transferring data from JavaScript to PHP for geolocation feature

Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...

An error popped up out of the blue while attempting to execute Webpack

Looking to deploy my React website on IIS but encountering an error when running npm run build:prod. The error message states: index.js Line 1: Unexpected reserved word. You may need an appropriate loader to handle this file type. Below is the snippet fro ...

The jQuery element selection feature is not functioning

Within my HTML file, there lies a table with an empty tbody that is dynamically filled by jQuery once the document is fully loaded. The content of the table body is generated using a PHP script, where jQuery fetches the data via a simple GET request. Belo ...

Instructions for adding and deleting input text boxes on an ASP.NET master page

*I am currently facing an issue with adding and removing input textboxes for a CV form using ASP.NET in a master page. Whenever I click on the icon, it doesn't seem to work as intended. The idea is to have a textbox and an icon "+" to add more textbox ...

Creating interconnected circles with lines utilizing canvas

I am currently utilizing the canvas tag to generate circles on a world map image. My objective is to link these multiple circles with lines using the Canvas tag. Although I have successfully drawn the circles, I am facing difficulty in drawing the connecti ...

Inquiry into AngularJS data binding

Just dipping my toes into the world of Angular today. Found a tutorial at Angular JS in 30 mins This little project involves setting up basic databinding in Angular. The code features an input box that updates with whatever is typed next to it. As someone ...

Is it Possible to Insert Function from a For... in Loop?

Question: How is a function being attached to a variable's memory space without being explicitly assigned? Situation: I have developed a script to eliminate duplicate objects by comparing the values of object keys. However, after initializing the che ...

Using Java script to parse and interpret a JSON file

I have a JSON file that follows this structure. Being new to JavaScript, I am looking for guidance on how to extract each key and its associated value. Can someone help me understand where to begin? AuthServer.Web": { "stuff": { "evenmore st ...

Javascript chart

Hello everyone, I am diving into the world of fetch API. Currently, I am faced with a challenge where I need to generate the following list items: <li>Zimmerman, Paul</li> <li>Yimmerman, Raul</li> <li>Limmerman, Caul</li> ...

Exploring the Power of Elasticsearch with Datatables

I'm attempting to utilize functions from an Elasticsearch instance in conjunction with datatables to exhibit results. Currently, I am only able to display 10 results, regardless of the query used. Even though there are 141,000 results in Elasticsearc ...

Sending data to the server using the $.post method with an

I am having some trouble creating a post using a customized model: public class CallbackPriorityItemModel { public int userID { get; set; } public int order { get; set; } public string name { get; set; } } Unfortunately, I can't seem to ...

jQuery: A variety of ways to close a div tag

I am encountering some difficulties trying to make this work properly, any assistance would be highly appreciated. The goal is to have the div close when the user clicks the X button, as well as when they click outside of the wrapper container. Unfortuna ...

Using Switch Case and If Statements in Javascript and Jquery

Can you help me troubleshoot this code? It's designed to detect clicks and keypress events within the #ts_container div for buttons and anchors. The goal is to use an If statement in each case to determine if it's a click or keypress, then update ...

Using references to pass variables in JavaScript - passing variables to an external test in Mocha

When dealing with primitive datatypes in JavaScript, passing by reference doesn't work. One common workaround is to wrap them in an object. However, what happens if a variable starts as null and then gets reassigned as an Object before being passed to ...

Trigger the fire controller code upon the change of the textbox date in ASP.NET MVC

I am looking for a way to trigger controller code when a user clicks out of a date textbox without using HTML helpers, only plain HTML. I am new to MVC and have previously worked with web forms. The controller code that needs to be executed is as follows: ...

Refresh the view when the URL is modified

Utilizing angularjs alongside ui-router (using the helper stateHelperProvider) to organize views and controllers on the page. Encountering an issue where the views are not updating as expected. The relevant code snippet config.js app.config(function($h ...

The v-for loop seems to be malfunctioning in my Nuxt 3 project

I have a script with mock data stored in a variable named whatsHappeningItems, and I am trying to pass this data as a reference to a card component using v-for="whatsHappening in whatsHappeningItems". However, when I do this, I encounter the following erro ...

initiating a submission upon the occurrence of an onchange event on an input field of type "file"

I have encountered an issue while trying to submit a form using the onchange event of an input element with type file. The problem is that it submits an empty form even when a file has been chosen. Here is the code snippet: var form = document.createElem ...

JavaScript: Creating keys for objects dynamically

const vehicles = [ { 'id': 'truck', 'defaultCategory': 'vehicle' } ] const result = [] Object.keys(vehicles).map((vehicle) => { result.push({ foo: vehicles[vehicle].defaultCategory }) }) c ...