Challenges with UV wrapping in THREE.js ShaderMaterial when using SphereBufferGeometry

Question

Challenges with UV wrapping in THREE.js ShaderMaterial when using SphereBufferGeometry

Currently, I am attempting to envelop a SphereBufferGeometry with a ShaderMaterial that incorporates noise to mimic the surface of Jupiter. However, the wrapping on the sphere geometry is turning out peculiarly. Instead of wrapping around the 'planet' in a normal texture manner, all the animated texture seems to be concentrated in a narrow band around one specific line of latitude. Images illustrating this issue have been provided below.

The shader works flawlessly on a plane, but my assumption that it would wrap like a standard texture was likely naive. Since I am relatively new to Shader programming, I find myself at a bit of an impasse.

Here is the plane with correct wrapping

This image shows the incorrect wrapping

I suspect that moving the noise equations to the fragmentShader might offer a solution, but my current knowledge is insufficient as my attempts resulted in failure. I also tried transforming the plane targets into a sphere; however, ShaderMaterial does not inherently support morphTargets and despite numerous efforts using

#include <morphtarget_pars_vertex>

within onBeforeCompile, I couldn't get it to function correctly. Additionally, using THREE's wrapping equations on the uniform texture yielded similar outcomes.

Below is all of my code, where the shaderMaterial implementation can be found in addPlanet():

[Code example here]

javascript three.js fragment-shader vertex-shader uv-mapping

Answer 1

Answer №1

The issue might be arising from the magnitude of the uv displacement you are using. This is essentially how your shader functions:

vWave = pos.z;
float wave = vWave * 0.25;
vec3 texture = texture2D(uTexture, vUv + wave);

Considering that your SphereGeometry has a radius of 25, you are displacing your UVs by 25 * 0.25 based on their z-axis depth. This results in UVs ranging approximately between [-6.25, 6.25].

You might want to recalibrate this value to a smaller scale (remember that UVs typically range from

[0, 1]</code), so a displacement of 6 will go beyond this range. Alternatively, you can maintain a large UV displacement and enable texture repetition with:</p>
<pre class="lang-js"><code>texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

For more information on wrapping, refer to the Texture documentation page

Answer 2

The issue might be arising from the magnitude of the uv displacement you are using. This is essentially how your shader functions:

vWave = pos.z;
float wave = vWave * 0.25;
vec3 texture = texture2D(uTexture, vUv + wave);

Considering that your SphereGeometry has a radius of 25, you are displacing your UVs by 25 * 0.25 based on their z-axis depth. This results in UVs ranging approximately between [-6.25, 6.25].

You might want to recalibrate this value to a smaller scale (remember that UVs typically range from

[0, 1]</code), so a displacement of 6 will go beyond this range. Alternatively, you can maintain a large UV displacement and enable texture repetition with:</p>
<pre class="lang-js"><code>texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;

For more information on wrapping, refer to the Texture documentation page

Challenges with UV wrapping in THREE.js ShaderMaterial when using SphereBufferGeometry

Answer №1

Similar questions

Having difficulty understanding and parsing JSON using JQuery

Tips for safely storing JWT tokens in a react/next.js app:

having trouble installing vue on macOS using npm

"Combining jQuery and JavaScript to handle form submissions in un

Jquery button click event is malfunctioning after the inclusion of jquery keyboard plugin

Hiding a div using swipe gestures in Angular

Troubleshooting issues with Javascript ES6 module functionality

Navigating through props provided within a setup function in Vuejs using the Composition API

What is the best way to refresh a navigation bar after making an API request, such as when using Google Sign-In?

How can one easily remove the parent directory from a path when working with Node.js?

JavaScript API for Tableau

The equivalent of ESM for resolving modules using the `createRequire` function with a specified

Once the PostgreSQL container is stopped with docker-compose down, the previously used port becomes unavailable for use again

While troubleshooting the app, I encountered an error that says: "The property 'answers' cannot be read as it is undefined."

Dividing a string using regex to deal with numerical issues

Getting a string from JSON using Javascript

Add a class to alternate elements when mapping over data in React

"Beginner's guide to utilizing JQuery and AJAX with PHP

classes_1.Individual is not a callable

Guide to sending AJAX requests to SQL databases and updating the content on the webpage