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