Intricate form of a character's silhouette

Question

Intricate form of a character's silhouette

Imagine I have a unique character that users can select, and when it's selected, I want to display an outline around it.

The character is represented as an object3D with multiple meshes. I attempted cloning the character and applying a backside material for the outline, but this approach was ineffective because each cube in the shape rendered its backside separately, resulting in an incorrect outline display.

Is it necessary to create a new mesh specifically for the outline, or is there a simpler solution available?

javascript three.js outline

Answer 1

Answer №1

What @spassvolgel mentioned is absolutely spot on;

I believe the necessary steps involve: 1. Initially rendering the background 2. Subsequently, creating a character model with a plain color on a separate transparent layer, slightly larger than the original 3. Adding the character with its regular material or texture on another transparent layer 4. Lastly, placing the character layer over the outline layer and then combining them within the background

You can achieve this by generating multiple scenes and merging them through sequential render passes:

renderer.autoClear = false;
. . . 

renderer.render(scene, camera); // rendering the complete scene
renderer.clearDepth();
renderer.render(scene2, camera); // displaying only the selected item in a larger size and flat color
renderer.render(scene3, camera); // showing the selected item again

Version three.js.r.129

Answer 2

What @spassvolgel mentioned is absolutely spot on;

I believe the necessary steps involve: 1. Initially rendering the background 2. Subsequently, creating a character model with a plain color on a separate transparent layer, slightly larger than the original 3. Adding the character with its regular material or texture on another transparent layer 4. Lastly, placing the character layer over the outline layer and then combining them within the background

You can achieve this by generating multiple scenes and merging them through sequential render passes:

renderer.autoClear = false;
. . . 

renderer.render(scene, camera); // rendering the complete scene
renderer.clearDepth();
renderer.render(scene2, camera); // displaying only the selected item in a larger size and flat color
renderer.render(scene3, camera); // showing the selected item again

Version three.js.r.129

Answer 3

Answer №2

To address geometries of varying complexities, a versatile solution involves applying a fragment shader using the ShaderMaterial class in three.js. If you are unfamiliar with shaders, you can find an introduction here.

An illuminating example showcasing the use of shaders to accentuate geometries can be explored here. The vertex shader computes the normal for a vertex and a parameter representing the intensity of a glow effect:

uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

These parameters are then transmitted to the fragment shader where they manipulate color values of pixels surrounding the geometry:

uniform vec3 glowColor;
varying float intensity;
void main() 
{
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}

Answer 4

To address geometries of varying complexities, a versatile solution involves applying a fragment shader using the ShaderMaterial class in three.js. If you are unfamiliar with shaders, you can find an introduction here.

An illuminating example showcasing the use of shaders to accentuate geometries can be explored here. The vertex shader computes the normal for a vertex and a parameter representing the intensity of a glow effect:

uniform vec3 viewVector;
uniform float c;
uniform float p;
varying float intensity;
void main() 
{
    vec3 vNormal = normalize( normalMatrix * normal );
    vec3 vNormel = normalize( normalMatrix * viewVector );
    intensity = pow( c - dot(vNormal, vNormel), p );

    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

These parameters are then transmitted to the fragment shader where they manipulate color values of pixels surrounding the geometry:

uniform vec3 glowColor;
varying float intensity;
void main() 
{
    vec3 glow = glowColor * intensity;
    gl_FragColor = vec4( glow, 1.0 );
}

Answer 5

Answer №3

While browsing through gamedev.stackexchange.com/, I stumbled upon an interesting discussion about using a stencil buffer. Implementing this in THREE.js is a bit of a mystery to me, though.

Check out the thread here for more insights.

Answer 6

While browsing through gamedev.stackexchange.com/, I stumbled upon an interesting discussion about using a stencil buffer. Implementing this in THREE.js is a bit of a mystery to me, though.

Check out the thread here for more insights.

Answer 7

Answer №4

For optimal results, consider rendering your outlined object(s) onto a texture that matches the size of your destination framebuffer. Subsequently, render a quad of the same size using that texture and apply effects such as blurring or image transformations in the fragment shader. An illustrative example can be found here, utilizing raw WebGL. Alternatively, you could create a custom ShaderMaterial with relative ease.

Answer 8

For optimal results, consider rendering your outlined object(s) onto a texture that matches the size of your destination framebuffer. Subsequently, render a quad of the same size using that texture and apply effects such as blurring or image transformations in the fragment shader. An illustrative example can be found here, utilizing raw WebGL. Alternatively, you could create a custom ShaderMaterial with relative ease.

Answer 9

Answer №5

I'm still searching for the solution, but I wanted to showcase what happens when I generate multiple meshes and place another mesh behind each of them using

side: THREE.BackSide

http://jsfiddle.net/GwS9c/8/

As you can see, the effect is not as intended. I am aiming for a distinct outline behind ALL three meshes without any overlap. While my knowledge in programming shaders is limited, many online sources suggest cloning the meshes as a possible solution.

Answer 10

I'm still searching for the solution, but I wanted to showcase what happens when I generate multiple meshes and place another mesh behind each of them using

side: THREE.BackSide

http://jsfiddle.net/GwS9c/8/

As you can see, the effect is not as intended. I am aiming for a distinct outline behind ALL three meshes without any overlap. While my knowledge in programming shaders is limited, many online sources suggest cloning the meshes as a possible solution.

Intricate form of a character's silhouette

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What exactly is the function of the NextPage feature in Next.js?

Different Ways to Retrieve JSON Data from AWS S3 Bucket Using Node.js

What are some ways to modify attributes in a jQuery datatable?

React frontend communicating without backend server

Utilizing AJAX and PHP POST to dynamically refresh innerHTML content with MySQL data updates

Utilizing JavaScript to Retrieve Selected Parameter in SSRS Report

What about creating desktop applications with JavaScript?

Issue with res.redirect not functioning as expected

Sending data from a Node.js backend to a React.js frontend using res.send

Fade In/Out Scroll Effect

Calculating the Boundary Box Post Vertex Relocation Using Shader

Adjust columns sizes on ExtJS 6 dashboards in real-time

Creating a click-away listener feature in your Next js application

Step-by-step guide on running two JavaScript codes sequentially to ensure accurate results

Exploring the implementation of the meta robots tag within Joomla 2.5's global settings

What steps should I take to ensure my sanity studio updates are reflected in my nextjs app?

Swap two pairs of elements in an array in a random order

Divide a string into various text boxes

From ThreeJS to Unity: Converting Matrix Transformations

Constructing hierarchical objects in JavaScript