Obtain the ThreeJS coordinates for shadow pixel positions in a 3D environment

Question

Obtain the ThreeJS coordinates for shadow pixel positions in a 3D environment

In my ThreeJS project, I have created a scene where a gold object casts a curved shadow on a spherical surface. The shadow is achieved by rendering only the backside of the sphere and using a point light at the center of the eye model. I am looking to extract the 3D coordinates (x,y,z) of each pixel in this shadow for further analysis. Below is a simplified version of the code that generates the shadow:

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap//THREE.PCFSoftShadowMap;

const light = new THREE.PointLight( 0xffffff, 20, 0 );
light.position.set( 0, 0, 0 );
light.castShadow = true;
light.shadow.mapSize.width = 512;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 500;
scene.add( light );

const sphereGeometry = new THREE.SphereGeometry( 25, 32, 32 );
const sphereMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } );
sphereMaterial.side=THREE.BackSide;

const sphere = new THREE.Mesh( sphereGeometry, sphereMaterial );
sphere.castShadow = false;
sphere.receiveShadow = true;
scene.add( sphere );

I have tried to locate this information in the model's matrix property, but without clear documentation, I am unsure about the exact location of the shadow data. Any assistance in this matter would be greatly appreciated!

--- Extra not important info ---

Furthermore, the extracted shadow coordinates will enable me to perform raycasting back into the eye and generate a different type of shadow using an azimuthal equidistant projection. This advanced technique is crucial for achieving the desired effect on the right side of the eye model. Your help in obtaining the 3D shadow pixel coordinates will greatly enhance my project!

javascript three.js shadow

Answer 1

Answer №1

In the realm of GPU shaders at rendertime, extracting the shadow into a new geometry using JavaScript proves challenging due to limited access to shadowMap positions. Nevertheless, there exists a workaround.

Imagine your point light resides at (0, 0, 0) at the sphere's center. By iterating through the vertices of the gold object and projecting these positions onto the sphere, a potential solution emerges:

// Defining sphere radius
const radius = 25;

const vec3 = new THREE.Vector3();

// Retrieving the vertex position array
const vertices = goldObject.geometry.getAttribute("position").array;

// Loop to iterate through all vertex positions
for (let i3 = 0; i3 < vertices.length; i3 += 3) {
    // Assigning vertex to vec3
    vec3.set(
        vertices[i3 + 0], // x
        vertices[i3 + 1], // y
        vertices[i3 + 2]  // z
    );

    // Normalizing vector magnitudes
    vec3.normalize();

    // Scaling vector magnitude to match sphere radius
    vec3.multiplyScalar(sphereRadius);

    // Generating spherical projection for each vertex
    console.log(vec3);
}

Assuming the light source aligns perfectly with the sphere's center, normalizing and multiplying the position of each gold object vertex by the sphere's radius proves effective. This iterative process creates the vec3 array for constructing a custom THREE.BufferGeometry positioned against the sphere.

It is worth noting that any translations or rotations applied to the gold object will impact vertex positions, necessitating the reversal of these transformations during the vertex iteration process.

Answer 2

In the realm of GPU shaders at rendertime, extracting the shadow into a new geometry using JavaScript proves challenging due to limited access to shadowMap positions. Nevertheless, there exists a workaround.

Imagine your point light resides at (0, 0, 0) at the sphere's center. By iterating through the vertices of the gold object and projecting these positions onto the sphere, a potential solution emerges:

// Defining sphere radius
const radius = 25;

const vec3 = new THREE.Vector3();

// Retrieving the vertex position array
const vertices = goldObject.geometry.getAttribute("position").array;

// Loop to iterate through all vertex positions
for (let i3 = 0; i3 < vertices.length; i3 += 3) {
    // Assigning vertex to vec3
    vec3.set(
        vertices[i3 + 0], // x
        vertices[i3 + 1], // y
        vertices[i3 + 2]  // z
    );

    // Normalizing vector magnitudes
    vec3.normalize();

    // Scaling vector magnitude to match sphere radius
    vec3.multiplyScalar(sphereRadius);

    // Generating spherical projection for each vertex
    console.log(vec3);
}

Assuming the light source aligns perfectly with the sphere's center, normalizing and multiplying the position of each gold object vertex by the sphere's radius proves effective. This iterative process creates the vec3 array for constructing a custom THREE.BufferGeometry positioned against the sphere.

It is worth noting that any translations or rotations applied to the gold object will impact vertex positions, necessitating the reversal of these transformations during the vertex iteration process.

Obtain the ThreeJS coordinates for shadow pixel positions in a 3D environment

Answer №1

Similar questions

The issue causing "ReferenceError: fetch is not defined" is causing the test to fail

Replicate the process of transferring table rows to the clipboard, but exclusively copying the contents

A guide on getting the `Message` return from `CommandInteraction.reply()` in the discord API

Locating numerous occurrences of a specific string within an array and rearranging them

A guide on retrieving and resetting the value of a radio button within a table

Unlocking the secrets to obtaining a socket.io client

What is the proper way to implement the scrollToIndex feature in a FlatList component in React Native

Tips for creating a jasmine test scenario for a function executed within the ngOnInit lifecycle hook

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

Error in Safari Browser: Unexpected token ':' found in AngularJS syntax

Access SCSS variable values in Angular HTML or TypeScript files

What does the buffer.copy() method do in Node.js?

Creating a dynamic onclick function that depends on a variable passed from a while loop in PHP

Tips on importing anime js after it has been successfully installed through npm

The size of the cursor varies depending on the line it's placed on

Utilizing the fetch() method in Vuex to obtain a restful API

Is the top bar feature malfunctioning in version 4.3.2 of Foundation?

Tips for updating a React component with Mobx when there are changes in RTCPeerConnection

What is the reason behind generating auth.js:65 Uncaught (in promise) TypeError: Unable to access property 'data' of undefined?

The sorting function in Vue data table is not functioning as intended