關(guān)于threejs
threejs是webgl的封裝庫(kù)，提供了方便用戶調(diào)用調(diào)用的接口和函數(shù)脆贵，涉及幾何模型生產(chǎn)医清，用戶交互操作，渲染特效卖氨，數(shù)學(xué)庫(kù)及渲染優(yōu)化等会烙，與webgl相比负懦，threejs更易懂易學(xué)。
threejs數(shù)據(jù)流向
雖然threejs非常好的幫助我們封裝了各種接口和函數(shù)柏腻，但是當(dāng)我們想去學(xué)習(xí)threejs實(shí)現(xiàn)方式纸厉，簡(jiǎn)化實(shí)現(xiàn)過程，或者修改調(diào)整特效的時(shí)候五嫂，我們就需要了解threejs渲染步驟和數(shù)據(jù)流向問題颗品，這篇文章就是做下簡(jiǎn)單數(shù)據(jù)流向介紹。
- renderBufferDirect{
- 創(chuàng)建program對(duì)象
var program = setProgram( camera, fog, material, object ); {var materialProperties = properties.get( material );
這里有個(gè)技巧沃缘，就是properties內(nèi)部是個(gè)weakMap躯枢，而key就是material，由于properties是全局對(duì)象槐臀，所以不論在那個(gè)方法中,只要確定material锄蹂，就能獲取到對(duì)應(yīng)的 materialProperties-
創(chuàng)建threejs WebglProgram；
initMaterial( material, fog, object );{- 創(chuàng)建瀏覽器內(nèi)部 WebglProgram
if ( programChange )....//根據(jù)材質(zhì)名稱生成初級(jí)片元著色器字符串,主要是main函數(shù)核心區(qū)域著色器代碼
program = programCache.acquireProgram( material, materialProperties.shader, parameters, programCacheKey );//根據(jù)上下文整理好的著色代碼整合并創(chuàng)建webgl內(nèi)部交互的program
}
- 創(chuàng)建瀏覽器內(nèi)部 WebglProgram
-
對(duì)uniform變量傳值
p_uniforms.setValue( _gl, 'projectionMatrix', camera.projectionMatrix )
WebGLUniforms.upload- uniform 數(shù)值變量傳值
- 紋理變量值通過WebGLState傳入到gpu中
p_uniforms.setValue( _gl, 'modelViewMatrix', object.modelViewMatrix );
p_uniforms.setValue( _gl, 'normalMatrix', object.normalMatrix );
p_uniforms.setValue( _gl, 'modelMatrix', object.matrixWorld );
}
- 創(chuàng)建buffer
setupVertexAttributes
- 創(chuàng)建program對(duì)象
}
