Outlining in Three.js

Question

Outlining in Three.js

Can I achieve a black outline effect on my 3D models using three.js?

I'm looking to create graphics similar to Borderlands 2, with toon shading and distinct black outlines.

Answer 1

Answer №1

It seems like I arrived late. Hopefully, this information will be helpful for someone in the future.

Here's a tip: you don't have to render everything twice. By duplicating the mesh and setting the duplicate mesh's material side to "backside", you can avoid the overhead of double rendering. This way, you'll only be rendering two meshes with most of the outline's geometry culled by WebGL's "backface culling".

Here's an example to illustrate this concept:

var scene = new THREE.Scene();

//Create main object
var mesh_geo = new THREE.BoxGeometry(1, 1, 1);
var mesh_mat = new THREE.MeshBasicMaterial({color : 0xff0000});
var mesh = new THREE.Mesh(mesh_geo, mesh_mat);
scene.add(mesh);

//Create outline object
var outline_geo = new THREE.BoxGeometry(1, 1, 1);
//Adjust the material's side property
var outline_mat = new THREE.MeshBasicMaterial({color : 0x00ff00, side: THREE.BackSide});
var outline = new THREE.Mesh(outline_geo, outline_mat);
//Scale the object to create an outline
outline.scale.multiplyScalar(1.5);
scene.add(outline);

If you want more information on backface culling, you can visit: http://en.wikipedia.org/wiki/Back-face_culling

This approach is effective for adding outlines to objects without resorting to toon shading and sacrificing realism.

Toon shading itself supports edge detection. The 'cel' shader in Borderlands was developed for this purpose.

In cel shading, developers can choose between object duplication (usually at a low pipeline level) or using image processing filters for edge detection. This decision involves a performance tradeoff between the two techniques.

For more information on cel shading, you can visit: http://en.wikipedia.org/wiki/Cel_shading

Answer 2

It seems like I arrived late. Hopefully, this information will be helpful for someone in the future.

Here's a tip: you don't have to render everything twice. By duplicating the mesh and setting the duplicate mesh's material side to "backside", you can avoid the overhead of double rendering. This way, you'll only be rendering two meshes with most of the outline's geometry culled by WebGL's "backface culling".

Here's an example to illustrate this concept:

var scene = new THREE.Scene();

//Create main object
var mesh_geo = new THREE.BoxGeometry(1, 1, 1);
var mesh_mat = new THREE.MeshBasicMaterial({color : 0xff0000});
var mesh = new THREE.Mesh(mesh_geo, mesh_mat);
scene.add(mesh);

//Create outline object
var outline_geo = new THREE.BoxGeometry(1, 1, 1);
//Adjust the material's side property
var outline_mat = new THREE.MeshBasicMaterial({color : 0x00ff00, side: THREE.BackSide});
var outline = new THREE.Mesh(outline_geo, outline_mat);
//Scale the object to create an outline
outline.scale.multiplyScalar(1.5);
scene.add(outline);

If you want more information on backface culling, you can visit: http://en.wikipedia.org/wiki/Back-face_culling

This approach is effective for adding outlines to objects without resorting to toon shading and sacrificing realism.

Toon shading itself supports edge detection. The 'cel' shader in Borderlands was developed for this purpose.

In cel shading, developers can choose between object duplication (usually at a low pipeline level) or using image processing filters for edge detection. This decision involves a performance tradeoff between the two techniques.

For more information on cel shading, you can visit: http://en.wikipedia.org/wiki/Cel_shading

Answer 3

Answer №2

Yes, achieving toon shading in three.js is possible, but it's not a straightforward process. You can find shaders for toon shading in /examples/js/ShaderToon.js.

One common method for creating outlines in three.js is to render in two passes. The first pass renders the models in black at a slightly larger size, while the second pass uses the toon shaders at normal scale. This creates a larger black outline around the models. While not perfect, this method is commonly used for creating outlines in three.js. Another approach you can try is searching for "three.js hidden line rendering" as it uses a similar method to achieve a different look.

Answer 4

Yes, achieving toon shading in three.js is possible, but it's not a straightforward process. You can find shaders for toon shading in /examples/js/ShaderToon.js.

One common method for creating outlines in three.js is to render in two passes. The first pass renders the models in black at a slightly larger size, while the second pass uses the toon shaders at normal scale. This creates a larger black outline around the models. While not perfect, this method is commonly used for creating outlines in three.js. Another approach you can try is searching for "three.js hidden line rendering" as it uses a similar method to achieve a different look.

Answer 5

Answer №3

Although this question is from a while ago, I'll share what I did in response.

For my CG course, I developed an Outlined Cel-shader. Currently, it requires 3 rendering passes, but I am working on streamlining it to eliminate one pass.

Here's my approach: 1) Generate a NormalDepth image and save it to a texture.

In the vertex shader, convert the position to screen space and the normal to screen space.

In the fragment shader, calculate the depth of the pixel and generate the normal color using the depth as the alpha value.

float ndcDepth = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) / (gl_DepthRange.far - gl_DepthRange.near);
float clipDepth = ndcDepth / gl_FragCoord.w;

2) Render the scene onto a texture with cel-shading. I modified the scene override material for this step.

3) Create a quad and render both textures onto it. Use an orthographic camera to view the quad. The cel-shaded texture is directly rendered on the quad, while the normaldepth shaded texture undergoes edge detection to determine when a pixel should be black (indicating an edge).

Answer 6

Although this question is from a while ago, I'll share what I did in response.

For my CG course, I developed an Outlined Cel-shader. Currently, it requires 3 rendering passes, but I am working on streamlining it to eliminate one pass.

Here's my approach: 1) Generate a NormalDepth image and save it to a texture.

In the vertex shader, convert the position to screen space and the normal to screen space.

In the fragment shader, calculate the depth of the pixel and generate the normal color using the depth as the alpha value.

float ndcDepth = (2.0 * gl_FragCoord.z - gl_DepthRange.near - gl_DepthRange.far) / (gl_DepthRange.far - gl_DepthRange.near);
float clipDepth = ndcDepth / gl_FragCoord.w;

2) Render the scene onto a texture with cel-shading. I modified the scene override material for this step.

3) Create a quad and render both textures onto it. Use an orthographic camera to view the quad. The cel-shaded texture is directly rendered on the quad, while the normaldepth shaded texture undergoes edge detection to determine when a pixel should be black (indicating an edge).

Outlining in Three.js

Answer №1

Answer №2

Answer №3

Similar questions

What is the significance of having nodejs installed in order to run typescript?

Navigating through the elements of the DOM

Unable to interact with buttons located in the title bar of the Electron application

I am encountering a "TypeError: topics.forEach is not a function" error when attempting to retrieve metadata for topics using my kafkajs client in Node.js/express.js. Can anyone help me understand why

When executed through nodeJS using the `require('./main.ts')` command, TypeScript Express encountered an issue with exporting and displayed undefined

hyperlink to choose a specific option from a drop-down menu

"Create dynamic tables with AngularJS using ng-repeat for column-specific rendering

Experience the power of ReactJS as you utilize the componentDidMount lifecycle method to fetch data

Attempting to generate printed documents with multiple components spread across individual pages using react-to-print

Attempting to incorporate icons into a Material UI table design

Launching an embedded webpage in a separate tab within the main browser window

Utilize a while loop in JavaScript to trigger a message when a variable dips below zero

Regular expression for textarea validation

How to Develop a Custom getText() Function for a Selenium Element?

Locate a JQuery element within another JQuery element

Creating a triangle number pattern in JavaScript with a loop

Is there a way to retrieve the central anchor point position (x, y) of the user's selection in relation to the document or window?

Add a CSS class to a different element when hovering

How to use hooks in NETXJS to pass data from a page to a component

Looping through an array and appending distinct elements to a fresh array