OutLine渲染调研

来源：恒创科技编辑：恒创科技编辑部

2024-01-26 15:16:59

OutLine查阅的资料

http://geoffprewett.com/blog/...

博客语言: openGL 包含一个顶点着色器和片元着色器的代码

http://jsfiddle.net/Eskel/g59...

CoffeScript 编写的 threejs 实时小网页, 用到了 composer

https://github.com/jeromeetie...

outline 实现, 不过用到了 threex ( threejs 的游戏扩展包 )

https://learnopengl-cn.github...

OpenGl 中文网站关于模板测试的相关原理

https://github.com/stemkoski/...

缩放网格实现 outline, 对比模板测试思路大抵是相同的

webgl 使用模板测试

function render() {
  gl.enable(gl.STENCIL_TEST);
  gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);

  renderer.clear();

  gl.stencilFunc(gl.ALWAYS, 1, 0xff);
  gl.stencilMask(0xff);
  renderer.render(scene, camera);

  gl.stencilFunc(gl.NOTEQUAL, 1, 0xff);
  gl.stencilMask(0x00);

  scene.overrideMaterial = outlineMaterial;
  renderer.render(scene, camera);
  scene.overrideMaterial = null;
  gl.stencilMask(0xff);
  gl.disable(gl.STENCIL_TEST);
}

卡通渲染 Cel shading

参考 https://zh.wikipedia.org/zh-cn/%E5%8D%A1%E9%80%9A%E6%B8%B2%E6%9F%93

方案第一种: 通过 composer 后期处理, 但是这其实是对整个场景进行处理, 如果需要的是对单个材质呢? 而且存在锯齿问题, 即使添加各种抗锯齿 PASS 依然明显. 有点是使用 composer 也是比较简单的, 因为官方有示例.第二种: copy一个物体然后稍微缩放, 使用模板测试取放大后的一部分. 缺点是缩放无法完美适应物体, 长的越长短的越短.第三种也是最合适的: 首先使用帧缓冲获取纹理, 然后使用着色器去处理纹理, 在着色器中对于上下左右 2 像素进行比较, 将不在边缘处的全部 discard 掉, 这样我们就绘制了一个只有边缘的几何!

本文地址：https://www.henghost.com/jishu/19466/