THREE.WebGLRenderer

WebGL Render 用WebGL渲染出你精心製作的場景

介紹

在之前的介紹中, 已經介紹過場景, 相機, 光源, 有了這些後, 就可以形成一個可觀的三維展示效果, 但是, 若想讓它展示在網頁上, 就需要渲染器渲染到網頁上

那WebGL又是啥, 這裡借用百度的一段解釋

WebGL（全寫Web Graphics Library）是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript繫結，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能建立複雜的導航和資料視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染外掛的麻煩，可被用於建立具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等

在本文中, 主要描述WebGLRenderer的一些屬性方法, 後續再寫各大元素整合的博文.

建構函式的使用

其中, 大部分是平時用不上的, 很多我也還沒具體使用過, 經常使用的有alpha和antialias, alpha可以讓3維圖透明, antialias可以讓3維圖變得更加清晰, 同時會讓渲染器的壓力加大.

屬性

capabilities : Object

一個包含當前渲染環境(RenderingContext)的功能細節的物件。
- floatFragmentTextures: 環境是否支援OES_texture_float擴充套件。 根據WebGLStats, 截至2016年2月，超過95％的支援WebGL的裝置支援此功能
- floatVertexTextures: 如果floatFragmentTextures和vertexTextures都是true， 則此值為true
- getMaxAnisotropy(): 返回最大可用各向異性。
- getMaxPrecision(): 返回頂點著色器和片元著色器的最大可用精度。
- isWebGL2: true if the context in use is a WebGL2RenderingContext object.
- logarithmicDepthBuffer: 如果logarithmicDepthBuffer在構造器中被設為true且 環境支援EXT_frag_depth擴充套件，則此值為true 根據WebGLStats, 截至2016年2月， 約66%的支援WebGL的裝置支援此功能
- maxAttributes: gl.MAX_VERTEX_ATTRIBS的值
- maxCubemapSize: gl.MAX_CUBE_MAP_TEXTURE_SIZE 的值，著色器可使用的立方體貼圖紋理的最大寬度高度
- maxFragmentUniforms: gl.MAX_FRAGMENT_UNIFORM_VECTORS的值，片元著色器可使用的全域性變數(uniforms)數量
- maxTextureSize: gl.MAX_TEXTURE_SIZE的值，著色器可使用紋理的最大寬度高度
- maxTextures: *gl.MAX_TEXTURE_IMAGE_UNITS的值，著色器可使用的紋理數量
- maxVaryings: gl.MAX_VARYING_VECTORS的值，著色器可使用向量的數量
- maxVertexTextures: gl.MAX_VERTEX_TEXTURE_IMAGE_UNITS的值，頂點著色器可使用的紋理數量。
- maxVertexUniforms: gl.MAX_VERTEX_UNIFORM_VECTORS的值，頂點著色器可使用的全域性變數(uniforms)數量
- precision: 渲染器當前使用的著色器的精度
- vertexTextures: 如果 .maxVertexTextures : Integer大於0，此值為true (即可以使用頂點紋理)

info : Object

一個物件，包含有關圖形板記憶體和渲染過程的一系列統計資訊。這些資訊可用於除錯或僅僅滿足下好奇心。改物件包含以下欄位:

• memory:
  • geometries
  • textures
• render:
  • calls
  • triangles
  • points
  • lines
  • frame
• programs

預設情況下，每次呼叫渲染時這些資料都會重置。 但當時用一個或多個映象時，最好使用自定義模式重置它們：renderer.info.autoReset = false; renderer.info.reset();

常見程式碼

     renderer = new THREE.WebGLRenderer({
      antialias: true,
    });
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );