OutLine渲染调研

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 掉, 这样我们就绘制了一个只有边缘的几何!