Javascript Three.js概述

有没有可能在我的3d模型上用three.js显示黑色轮廓

---

我将有图形，看起来像边境2。（卡通阴影+黑色轮廓）

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

---

对于轮廓，我认为最常用的建议方法是两次渲染。第一步以黑色渲染模型，比例稍大。第二个过程是正常的规模和香椿着色器。这样，您将看到较大的黑色模型作为轮廓。这并不完美，但我认为没有简单的出路。搜索“three.js hidden line rendering”可能会更成功，因为虽然外观不同，但使用的方法有些相似。

我肯定我来晚了。让我们希望这能解决一些人以后的问题

这里的交易，你不需要渲染一切两次，开销实际上是不可观的，所有你需要做的是复制网格和设置复制网格的材料方面的“背面”。没有双传球。相反，您将渲染两个网格，其中大部分轮廓的几何体由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);

有关背面剔除的更多详细信息，请查看：

如果您希望向对象添加轮廓，而不添加卡通着色器，从而失去“真实感”，则上述方法效果良好

卡通着色本身支持边缘检测。他们在边境地区开发了“cel”着色器以实现此效果。

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

有关cel的更多信息：

---

干杯

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

我为我的CG课程创建了一个轮廓Cel着色器。不幸的是，它需要3次渲染过程。我目前正试图找出如何删除一个通行证

我的想法是： 1） 将法线深度图像渲染为纹理

在“顶点着色器”（vertex shader）中，执行通常执行的操作，即定位到屏幕空间和法线到屏幕空间

在“片段着色器”（fragment shader）中，计算像素的深度，然后使用深度作为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着色将场景渲染到纹理上。我更改了场景覆盖材质

---

3） 制作四边形并在四边形上渲染两种纹理，然后让orto相机查看。Cel着色纹理只是渲染在四边形上，但法线深度着色在四边形上，您使用一些边缘检测，然后使用它您知道像素何时需要为黑色（边缘）。

谢谢，但是每帧上的两个渲染将fps除以2？如果第一次渲染（对于黑色模型）仅渲染黑色角色，则可能会更少。第二次渲染的景物将隐藏黑色模型，不是吗？是的，我认为所有这些都是合理的考虑。在第一次渲染时，您不需要任何着色、灯光、阴影或其他东西，因此它肯定更便宜，但不是免费的。而风景需要以某种方式处理，也许在第一次通过时也会渲染它们。我没有做过，所以我的经验有限。是否有可能对本文件中涉及轮廓的部分进行任何说明？谢谢，我试过复杂形状，第二个轮廓网格与主轮廓网格冲突，有时会显示在原始轮廓的整个面上。@Blubberguy22-是的，这只适用于简单的凸面形状。您需要进行后期处理才能使其更准确。由于缩放，它还会为更大的对象绘制更大的轮廓，所以请记住这一点。