Three.js概述 [英] Three.js outlines

问题描述

使用three.js在我的3d模型中是否有黑色轮廓?

Is it possible to have an black outline on my 3d models with three.js?

我将拥有类似于无主之地2的图形(卡通阴影+黑色轮廓)

I would have graphics which looks like Borderlands 2. (toon shading + black outlines)

推荐答案

我确定我来晚了.我们希望这能在以后解决某人的问题.

I'm sure I came in late. Let's hope this would solve someone's question later.

这是交易，您不需要两次渲染一切，实际上开销并不大，您所需要做的就是复制网格并将复制网格的材质侧设置为背面"".没有两次通过.您将改为渲染两个网格，而大多数轮廓的几何形状将由WebGL的背面剔除"来剔除.

Here's the deal, you don't need to render everything twice, the overhead actually is not substantial, all you need to do is duplicate the mesh and set the duplicate mesh's material side to "backside". No double passes. You will be rendering two meshes instead, with most of the outline's geometry culled by WebGL's "backface culling".

这是一个例子:

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);
//Notice the second parameter of the material
var outline_mat = new THREE.MeshBasicMaterial({color : 0x00ff00, side: THREE.BackSide});
var outline = new THREE.Mesh(outline_geo, outline_mat);
//Scale the object up to have an outline (as discussed in previous answer)
outline.scale.multiplyScalar(1.5);
scene.add(outline);

有关背面剔除的更多详细信息，请查看: http://en.wikipedia.org/wiki/Back-face_culling

For more details on backface culling, check out: http://en.wikipedia.org/wiki/Back-face_culling

如果您想向对象添加轮廓而不添加卡通着色器，从而失去真实感"，则上述方法效果很好.

The above approach works well if you want to add an outline to objects, without adding a toon shader, and thus losing "realism".

香椿阴影本身支持边缘检测.他们已经在Borderlands中开发了"cel"着色器以实现此效果.

Toon shading by itself supports edge detection. They've developed the 'cel' shader in Borderlands to achieve this effect.

在cel着色中，开发人员可以使用对象复制方法(在[低]流水线级别完成)，也可以使用图像处理滤镜进行边缘检测.这是在两种技术之间进行性能折衷比较的地方.

In cel shading devs can either use the object duplication method (done at the [low] pipeline level), or can use image processing filters for edge detection. This is the point at which performance tradeoff is compared between the two techniques.

有关cel的更多信息: http://en.wikipedia.org/wiki/Cel_shading

干杯！

More info on cel: http://en.wikipedia.org/wiki/Cel_shading

Cheers!

这篇关于Three.js概述的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！