three.js學習5_渲染器

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的一些屬性方法, 后續再寫各大元素整合的博文.

構造函數的使用

參數	含義	默認值
canvas	一個供渲染器繪制其輸出的canvas它和下面的domElement屬性對應。 如果沒有傳這個參數，會創建一個新canvas	無
context	可用於將渲染器附加到已有的渲染環境(RenderingContext)中	null
precision	着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果設備支持，默認為"highp" . 點擊here 查看"應該避免的事"	highp
alpha	canvas是否包含alpha (透明度)	false
premultipliedAlpha	renderer是否假設顏色有 premultiplied alpha	true
antialias	是否執行抗鋸齒(效果更好, 開銷更大)	false
stencil	繪圖緩存是否有一個至少8位的模板緩存(stencil buffer))	true
preserveDrawingBuffer	是否保留緩直到手動清除或被覆蓋	false
powerPreference	提示用戶代理怎樣的配置更適用於當前WebGL環境。 可能是"high-performance", "low-power" 或 "default"	default
failIfMajorPerformanceCaveat	檢測到低性能時渲染器創建是否失敗。	false
depth	繪圖緩存是否有一個至少6位的深度緩存(depth buffer)	true
logarithmicDepthBuffer	是否使用對數深度緩存。如果要在單個場景中處理巨大的比例差異，就有必要使用	false

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

屬性

屬性名: 類型	含義	默認值
autoClear : Boolean	定義渲染器是否在渲染每一幀之前自動清除其輸出
autoClearColor : Boolean	如果autoClear為true, 定義renderer是否清除顏色緩存	true
autoClearDepth : Boolean	如果autoClear是true, 定義renderer是否清除深度緩存	true
autoClearStencil : Boolean	如果autoClear是true, 定義renderer是否清除模板緩存	true
debug.checkShaderErrors : Boolean	如果checkShaderErrors為true，定義是否檢查材質着色器程序 編譯和鏈接過程中的錯誤。 禁用此檢查生產以獲得性能增益可能很有用。 強烈建議在開發期間保持啟用這些檢查。 如果着色器沒有編譯和鏈接 - 它將無法工作，並且相關材料將不會呈現	true
capabilities : Object	一個包含當前渲染環境(RenderingContext)的功能細節的對象。
clippingPlanes : Array	用戶自定義的剪裁平面，在世界空間中被指定為THREE.Plane對象。 這些平面全局使用。空間中與該平面點積為負的點將被切掉	[]
domElement : DOMElement	一個canvas，渲染器在其上繪制輸出。渲染器的構造函數會自動創建(如果沒有傳入canvas參數);你需要做的僅僅是像下面這樣將它加頁面里去:
extensions : Object	extensions.get方法的包裝, 用於檢查是否支持各種WebGL擴展
gammaFactor : Float		2
outputEncoding : number	定義渲染器的輸出編碼。如果渲染目標已經被設置使用。setrendertarget然后渲染目標。紋理。編碼將被使用	THREE. LinearEncoding
info : Object	一個對象，包含有關圖形板內存和渲染過程的一系列統計信息。這些信息可用於調試或僅僅滿足下好奇心
localClippingEnabled : Boolean	定義渲染器是否考慮對象級剪切平面	false
maxMorphTargets : Integer	一個着色器中允許的最大MorphTargets數,切記標准材質只允許8個MorphTargets。	8
maxMorphNormals : Integer	色器中允許的最大MorphNormal數。 切記標准材質只允許4個MorphNormal。	4
physicallyCorrectLights : Boolean	是否使用物理上正確的光照模式	false
properties : Object	渲染器內部使用，以跟蹤各種子對象屬性。
renderLists : WebGLRenderLists	在內部用於處理場景渲染對象的排序
shadowMap : WebGLShadowMap	如果使用，它包含陰影貼圖的引用。
shadowMap.enabled : Boolean	如果設置開啟，允許在場景中使用陰影貼圖	false
shadowMap.autoUpdate : Boolean	啟用場景中的陰影自動更新	true
shadowMap.needsUpdate : Boolean	當被設為true, 場景中的陰影貼圖會在下次render調用時刷新(如果你已經禁用了陰影貼圖的自動更新(shadowMap.autoUpdate = false), 那么想要在下一次渲染時更新陰影的話就需要將此值設為true)	false
shadowMap.type : Integer	定義陰影貼圖類型 (未過濾, 關閉部分過濾, 關閉部分雙線性過濾)
sortObjects : Boolean	定義渲染器是否應對對象進行排序	true
state : Object	包含設置WebGLRenderer.context狀態的各種屬性的函數
toneMapping : Constant		NoToneMapping
toneMappingExposure : Number	色調映射的曝光級別	1
xr : WebXRManager	提供對渲染器的WebXR相關接口的訪問。

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 );