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 也是比较简单的, 因为官网有示例.
  • 第二种:首先应用帧缓冲获取纹理, 而后应用着色器去解决纹理, 在着色器中对于上下左右 2 像素进行比拟, 将不在边缘处的全副 discard 掉, 这样咱们就绘制了一个只有边缘的几何!