# 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](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices) 檢視"應該避免的事" | 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](https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext))的功能細節的物件。 \- floatFragmentTextures: 環境是否支援[OES_texture_float](https://developer.mozilla.org/en-US/docs/Web/API/OES_texture_float)擴充套件。 根據[WebGLStats](https://webglstats.com/), 截至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](https://developer.mozilla.org/en-US/docs/Web/API/EXT_frag_depth)擴充套件，則此值為**true** 根據[WebGLStats](https://webglstats.com/), 截至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();` ## 常見程式碼 ```js renderer = new THREE.WebGLRenderer({ antialias: true, }); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );