Three.js大纲

Question

是否可以使用three.js在我的3d模型上显示黑色轮廓？

我会有图形看起来像边界2。(卡通阴影+黑色轮廓)

Answer 1

我肯定我来晚了。让我们希望这将在以后解决某人的问题。

事情是这样的，你不需要渲染两次，开销实际上并不大，你需要做的就是复制网格，并将复制网格的材质侧设置为“背面”。不能两次传球。你将渲染两个网格，轮廓的大部分几何体被WebGL的“背面剔除”剔除。

下面是一个例子：

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

如果要将轮廓添加到对象，而不添加卡通着色器，从而失去“真实感”，则上述方法效果很好。

卡通着色本身支持边缘检测。他们已经在Borderland开发了'cel‘着色器来实现这种效果。

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

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

干杯!

Answer 2

是的，这是可能的，但不是一种简单的开箱即用的方式。对于卡通着色，甚至有着色器包含在/examples/js/ShaderToon.js中

对于轮廓，我认为最常用的方法是分两次渲染。First pass以黑色渲染模型，并且比例稍大。第二个过程是法线缩放和卡通着色器。这样，您将看到较大的黑色模型作为轮廓。这并不完美，但我不认为有一条简单的出路。你在搜索"three.js隐藏线渲染“时可能会更成功，因为虽然外观不同，但也使用了类似的方法来实现。

Answer 3

这是一个老问题，但这是我所做的。

我为我的CG课程创建了一个有轮廓的细胞着色器。不幸的是，它需要3次渲染。我目前正在尝试找出如何删除一个通道。

这里的想法是: 1)渲染NormalDepth图像到纹理。

在顶点着色器中，你做你通常做的，定位到屏幕空间和法线到屏幕空间。

在片段着色器中，您可以计算像素的深度，然后使用深度作为alpha值创建正常颜色。

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)使用cel-shading将场景渲染到纹理上。我更改了场景覆盖材质。

3)制作四边形并在四边形上渲染两个纹理，并使用orto相机查看它。Cel-shaded纹理只在四边形上渲染，但正常深度着色时，您使用一些边缘检测，然后您知道像素何时需要是黑色(边缘)。