Guide on incorporating a displacement map into a vertex shader in ThreeJS

Question

Guide on incorporating a displacement map into a vertex shader in ThreeJS

I am a beginner in ThreeJS and I am attempting to create a asteroids-like scene with textures made of particles, similar to what is showcased on this website . However, my attempt to apply a displacement map to a points material was unsuccessful. How can I troubleshoot this issue?

const dispTexture = new THREE.TextureLoader().load('NormalMap.jpg');

const sphere = new THREE.Points(
  new THREE.SphereGeometry(3, 32, 32),
  new THREE.PointsMaterial({
    size: 0.07,
    color: 0xFF325F,
    displacementMap: dispTexture,
    displacementScale : 0.2,
  })
);

scene.add(sphere);

javascript three.js webgl

Answer 1

Answer №1

Utilizing noise as mentioned in the comments, an asteroid consisting of 30K points was created. A simple lighting effect was added: points with more light appear bigger and brighter.

In case you need it, here's the link to the codepen: https://codepen.io/prisoner849/pen/mdBzjBy

This might prove helpful for someone:

body{
  overflow: hidden;
  margin: 0;
}

<script>
simplexNoise = `
//  Simplex 3D Noise 
//  by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}

float snoise(vec3 v){ 
  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
...
...
... (the script continues)

Answer 2

Utilizing noise as mentioned in the comments, an asteroid consisting of 30K points was created. A simple lighting effect was added: points with more light appear bigger and brighter.

In case you need it, here's the link to the codepen: https://codepen.io/prisoner849/pen/mdBzjBy

This might prove helpful for someone:

body{
  overflow: hidden;
  margin: 0;
}

<script>
simplexNoise = `
//  Simplex 3D Noise 
//  by Ian McEwan, Ashima Arts
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}

float snoise(vec3 v){ 
  const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
...
...
... (the script continues)

Guide on incorporating a displacement map into a vertex shader in ThreeJS

Answer №1

Similar questions

Optimal timing for fulfilling promises in AJAX requests

Creating Randomized Arrays in Javascript

JSON geometry imported is not following the movement of the bones

What is the best way to halt a specific function in jQuery?

RxJS - Only emit if another source does not emit within a specified time frame

Creating a dynamic and interactive menu using three.js

Unraveling the Mysteries of AngularJS in a Tutorial Snippet

How to Utilize findIndex to Validate the Presence of Elements in an Array of Objects using TypeScript

What is the reason behind being limited to sending only 5 requests if I fail to heed the data event?

Delay loading all images on the page except for the first one until the page is completely loaded

What is the best way to merge multiple window.onscroll events together?

Calculating the time difference in seconds between two dates using JavaScript

Retrieve a file from a server using Angular's $http.get method

Is there a way to implement this code to filter every column in the grid?

Revealing the Webhook URL to Users

Is there a specific location to view the output when adding a console.log in vue.config.js?

Determining the Clicked Button in ReactJS

When using VueJS to load an SVG file based on a variable within a for loop and utilizing v-html, the result returned is "[

Exploring ways to display featured posts within specific category sections

Does the Object3D.clone() method in three.js produce a complete duplicate of the geometry?