three.js學習5_渲染器

隨遇丿而安發表於2020-10-07
JS

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

相關文章