关于一次数据渲染 WebGLRenderer renderBufferDirect

关于threejs

threejs是webgl的封装库，提供了方便用户调用调用的接口和函数，涉及几何模型生产，用户交互操作，渲染特效，数学库及渲染优化等，与webgl相比，threejs更易懂易学。

threejs数据流向

虽然threejs非常好的帮助我们封装了各种接口和函数，但是当我们想去学习threejs实现方式，简化实现过程，或者修改调整特效的时候，我们就需要了解threejs渲染步骤和数据流向问题，这篇文章就是做下简单数据流向介绍。

1. renderBufferDirect{
   1. 创建program对象
      var program = setProgram( camera, fog, material, object ); {

      • var materialProperties = properties.get( material );
        这里有个技巧，就是properties内部是个weakMap，而key就是material，由于properties是全局对象，所以不论在那个方法中,只要确定material，就能获取到对应的 materialProperties

      • 创建threejs WebglProgram；
        initMaterial( material, fog, object );{

        • 创建浏览器内部 WebglProgram
          if ( programChange )....//根据材质名称生成初级片元着色器字符串,主要是main函数核心区域着色器代码
          program = programCache.acquireProgram( material, materialProperties.shader, parameters, programCacheKey );//根据上下文整理好的着色代码整合并创建webgl内部交互的program
          }

      • 对uniform变量传值
        p_uniforms.setValue( _gl, 'projectionMatrix', camera.projectionMatrix )
        WebGLUniforms.upload

        • uniform 数值变量传值
        • 纹理变量值通过WebGLState传入到gpu中

      • p_uniforms.setValue( _gl, 'modelViewMatrix', object.modelViewMatrix );

      • p_uniforms.setValue( _gl, 'normalMatrix', object.normalMatrix );

      • p_uniforms.setValue( _gl, 'modelMatrix', object.matrixWorld );
        }

   2. 创建buffer
      setupVertexAttributes

}