Question

我的3D模型上有三个.js可能有黑色轮廓吗？我的图形看起来像边界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

如果您想在不添加香椿着色器的情况下向对象添加轮廓，从而失去“真实感”，则上述方法效果很好。

香椿阴影本身支持边缘检测。他们在Borderlands开发了'cel'着色器来实现这种效果。

在cel着色开发中，可以使用对象复制方法（在[低]管道级别完成），也可以使用图像处理过滤器进行边缘检测。这是两种技术之间性能权衡的比较。

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

干杯！

Answer 2

是的，这是可能的，但不是一个简单的开箱即用的方式。对于香椿阴影，/ example / js /ShaderToon.js中包含偶数着色器

对于轮廓我认为最常建议的方法是两次渲染。第一遍渲染模型为黑色，略大一些。第二遍是正常比例和使用香椿着色器。通过这种方式，您可以看到较大的黑色模型作为轮廓。它并不完美，但我认为没有一个简单的方法。你可能在搜索“three.js隐藏线渲染”方面取得更大的成功，因为虽然使用了不同的外观，但有些类似的方法可以用来实现它。

Answer 3

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

我为我的CG课程创建了一个Outlined Cel-shader。不幸的是，它需要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纹理只是在四边形上渲染，但是使用一些边缘检测时，normaldepth阴影，然后你知道像素需要是黑色（边缘）。

Three.js概述

3 个答案: