问题描述
是否可以在我的 3d 模型上使用three.js 显示黑色轮廓?
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!
这篇关于三.js 大纲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！