Posted 2021-04-21 Refactor

寮曞瓙馃棧

鏈€杩戯紝蹇界劧鎯宠捣鏇惧湪 WebGL 鍩虹绯诲垪 鏂囩珷涓珛涓?flag锛氣€滃悗缁繕鎵撶畻鍑?銆奣hreeJS 婧愮爜鍓栨瀽銆?/span> 绯诲垪鈥濓紙鐗规剰缈诲嚭鍘熻瘽馃寶锛夛紝椤圭洰蹇欎簡涓€闃靛悗锛屼究鍐冲畾寮€濮嬪啓姝ょ郴鍒楋紝鏇存柊鍛ㄦ湡涓嶅浐瀹氾紝姣曠珶椤圭洰鎺掓湡鈥滃ぉ鏅撳緱鈥濄€傛绯诲垪涓庡叾璇存槸鍒嗕韩锛屽€掍笉濡傝鏄叡鍚屽涔犵舰浜嗐€備綔涓烘渶鍑哄悕鐨?WebGL 鐨勫紑婧愬簱锛?span class="mq-10">ThreeJS 宸插彈鍒颁簡骞挎硾璁ゅ彲鍜屽ソ璇勶紝鍚屾椂鍏惰嚜韬篃鍦ㄤ笉鏂洿鏂帮紝璁╁紑鍙戣€呯敤鐨勮垝蹇冩斁蹇冦€?/p>

璇村洖鑷繁锛屾湰鍒濆叆鍥惧舰瀛︿笘鐣岋紝浠呭嚟涓汉鍏磋叮鎾炵殑榧婚潚鑴歌偪锛屼絾涔熶箰鍦ㄥ叾涓€傝嚜璁や负鎶€鏈湰涓嶈鏈夎窛绂绘劅锛屼互鏈夎叮涓旈€氫織鏄撴噦鐨勬柟寮忎紶鎾妧鏈篃鏄竴浠惰叮浜嬨€備换鍑叾鍚圭殑澶╄姳涔卞潬锛屼綍绛夐珮澶т笂锛屼絾鍏舵湰璐ㄦ槸鏈嶅姟浜庢垜浠殑锛屽綊鏍圭粨搴曡繕鏄鎴戜滑鎺ュ彈鎵嶅彲銆傛晠涔嬪墠鐨勬枃绔犱篃灏介噺淇濇寔鐫€鍩虹銆佹湁瓒ｃ€佹槗鎳傜殑椋庢牸锛堝伓灏斾細寮€寮€杞︷煔楋級锛屾湭鏉ヤ害浼氬皾璇曟洿澶氬厓鐨勬枃绔犻鏍笺€備絾鍏跺畻鏃ㄩ兘鏄负浜嗚鍚勪綅鏇村鏄撴帴鍙椼€?/p>

浠ヤ笂浠呬釜浜鸿鐐癸紝濡備笌鍚勪綅瑙傚康鏈夌浉鎮栦箣澶勶紝鍙浉浜掍氦娴侊紝浠ュ郊涔嬮暱琛ュ繁涔嬬煭銆?/p>

涓嬮潰姝ｅ紡寮€濮?ThreeJS 婧愮爜鍓栨瀽 绯诲垪馃コ

鍓嶈█馃搾

褰撳涔犱竴绉嶆柊鎶€鏈椂锛屽ぇ閮ㄥ垎鎯呭喌閮戒細棣栭€夊叾瀹樻柟鏂囨。锛岃€屾枃妗ｄ腑鑳芥渶蹇鎴戜滑涓婃墜鐨勭珷鑺備究鏄?Getting Started銆?span class="mq-21">ThreeJS 涔熶笉渚嬪锛屾垜浠繘鍏ュ埌鍏跺搴旂殑 Getting Started 椤甸潰鍚庯紝渚胯兘鐪嬪埌 Creating the scene 鐨勪唬鐮佷粎鏈変笅闈㈠瀵ュ嚑琛岋細

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

鍐嶆粴鍔ㄨ嚦鏈€涓嬫柟锛屽悇浣嶄細鐪嬪埌瀹屾暣鐨?Demo锛?/p>

// ...
var animate = function () {
  requestAnimationFrame( animate );

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );
};

animate();

闃呰瀹岀畝鍗曠殑鍗佸嚑琛屼唬鐮佷箣鍚庯紝鍚勪綅鍙兘浼氬彂鐜拌繖涓?Demo 涓湪涓€鐩磋皟鐢?animate() 鏂规硶锛岃€屾鏂规硶涓垜浠慨鏀逛簡绔嬫柟浣撶殑鏃嬭浆瑙掑害锛屽苟鎵ц浜嗚繖涓€琛屼唬鐮侊細renderer.render( scene, camera )銆傚亣濡備綘娌℃湁鎺ヨЕ杩囧浘褰㈠鎴?WebGL锛屼粎鍑涔変細缈昏瘧鎴愶細鈥滄覆鏌撳櫒娓叉煋鍦烘櫙鍜屾憚鍍忔満鈥濄€傛病閿欙紝杩欎竴琛岀殑浣滅敤姝ｆ槸濡傛锛?/p>

鈥滄垜鐪嬩綘楠ㄩ鎯婂锛岀悊瑙ｅ姏闈炲嚒锛屼竴瀹氭槸涓鍥惧舰瀛︾殑澶╂墠鈥濓紙杩欎篃浣撶幇浜嗗懡鍚嶈鑼冨悎鐞嗘槸澶氫箞閲嶈锛夝煒?/p>

鍋囧鎴戜滑灏嗕笂闈㈤偅鍙ヨ瘽鎷嗚В涓€涓嬶細鈥滄覆鏌撳櫒 - 娓叉煋 - 鍦烘櫙鍜屾憚鍍忔満鈥濓紝杩欏彞璇濇绗﹀悎浜嗘垜浠殑 鈥滀富 - 璋?- 瀹锯€濈殑缁撴瀯銆傞偅涔堝氨鍙涓昏锛堝嵆娓叉煋鍣級鏄釜寰堥噸瑕佺殑瀛樺湪锛佹墍浠ユ绯诲垪鐨勭涓€绡囨枃绔犳垜浠氨浠庢覆鏌撳櫒 鈥斺€?Renderer 璇磋捣銆?/p>

Renderer鈿欙笍

灏?ThreeJS 鏂囨。鐩綍婊氬姩鑷?Renderers 涓€鏍忥紝鍙互鐪嬪埌鏈?WebGLMultisampleRenderTarget 銆?span class="mq-68">WebGLRenderer 銆?span class="mq-69">WebGL1Renderer 銆?span class="mq-70">WebGLRenderTarget 鍜?WebGLCubeRenderTarget 浜旂被娓叉煋鍣紝鑰屾垜浠氨鑱氱劍浜?WebGLRenderer 杩欎釜娓叉煋鍣ㄥ嵆鍙紝绋嶅悗浼氱粰澶у浠嬬粛涓€涓嬩负浣曚細鏈?WebGL1Renderer锛岃嚦浜庡叾浠栦笁绉嶆覆鏌撳櫒锛屾垜浠氨涓嶅厛璁ㄨ锛堝叾瀹炴垜涔熸病鐢ㄨ繃锛屽悗缁簡瑙ｄ簡鍜变滑鍐嶈亰锛夝煠?/p>

WebGL1Renderer

鍋囧浣犲 WebGL 绋嶆湁浜嗚В锛岄偅涔堝氨浼氱煡閬撳叾瀹?WebGL 鏈?1.0 鍜?2.0 涓や釜鐗堟湰锛岄偅涔堜袱涓増鏈垎鍒槸鍩轰簬 OpenGL ES 2.0 鍜?OpenGL ES 3.0 鐨勶紝鑷充簬涓嶅熀浜?OpenGL ES 1.0 鏄洜涓?1.0 鏄浐瀹氱绾跨殑锛?span class="mq-88">2.0 鍜?3.0 鏄彲缂栫▼绠＄嚎銆傛墍璋撳浐瀹氱绾垮氨鏄垜浠粰绠＄嚎閰嶇疆鐩稿簲鍙傛暟鍜屽紑鍏冲嵆鍙紝鍙紪绋嬬绾跨殑鍙紪绋嬮儴鍒嗗氨鏄垜浠墍鐔熺煡鐨?椤剁偣鐫€鑹插櫒 鍜?鐗囧厓鐫€鑹插櫒銆?/p>

鎵繙浜嗭紝鍐嶈鍥?WebGL锛岃繖淇╃増鏈湁浠€涔堝樊鍒憿锛熷ぇ瀹跺彲浠ョ湅鏈枃 WebGL What's New锛岀畝鍗曟鎷竴涓嬪氨鏄浜嗘洿澶氱汗鐞嗘牸寮忋€佸唴缃嚱鏁般€?D 绾圭悊璐村浘锛屽悓鏃惰繕鏀寔浜嗛潪2鐨勬暣鏁版鏂瑰ぇ灏忕殑鍥剧墖銆傚悓鏃讹紝WebGL 2.0 涓?WebGL 1.0 鍦ㄥ娴忚鍣ㄧ殑鍏煎鎬т笂鏈夊緢澶х殑宸紓锛屼互 Chrome 涓轰緥锛?span class="mq-97">WebGL 1.0 鍏煎 9 鍙婁互涓婄殑 Chrome 鐗堟湰锛岃€?WebGL 2.0 鍒欏吋瀹?56 鍙婁互涓婄殑 Chrome 鐗堟湰锛屽娴忚鍣ㄧ殑鍏煎鎬х殑宸ㄥぇ宸紓灏辨湁鏋佸ぇ鐨勫彲鑳借涓€浜涢檲鏃х殑 WebGL 1.0 鐨勭郴缁熷穿婧冿紝鏁?ThreeJS 鎻愪緵浜?WebGL1Renderer 鏉ヨ繘琛岄€傞厤鍏煎銆?span class="mq-106">ThreeJS 宸茬粡浠?r118 鐗堟湰灏卞叏闈㈠崌绾у埌 WebGL 2.0 浜嗭紝鎵€浠ュ鏋滀綘鐨勭郴缁熶娇鐢ㄧ殑 ThreeJS 鐗堟湰浣庝簬 r118锛屽苟涓斿噯澶囧崌绾у埌鏈€鏂扮殑 r120 鐗堟湰锛屼负浜嗛伩鍏嶇▼搴忔寕鎺変綘闇€瑕佸皢 Renderer 鏇挎崲鎴?WebGL1Renderer锛佸浣曟煡鐪嬫渶鏂?ThreeJS 鐗堟湰璇疯涓嬪浘锛?/p>

鑰屾煡鐪嬪綋鍓嶉」鐩娇鐢ㄧ殑 ThreeJS 鐗堟湰璇疯 package.json 涓殑 ThreeJS 渚濊禆鐗堟湰鐨?MINOR 鐗堟湰鍙峰嵆鍙紝姣斿锛?span class="mq-121">three: 0.120.0 灏辫〃鏄庢槸 r120 鐗堟湰锛?span class="mq-123">npm 璇箟鍖栫増鏈瑙佸畼鏂规枃妗ｃ€?/p>

WebGLRenderer

璇村洖鎴戜滑鐨勪富瑙?WebGLRenderer锛岃繘鍏ュ埌婧愮爜锛?code class="mq-131">src/renderers/WebGLRenderer.js锛夊悗鍙互鐪嬪埌澶撮儴鏈夊緢澶氬弬鏁板垵濮嬪寲鐨勬搷浣滐紝鍦ㄦ灏变笉涓€涓€浠嬬粛锛屽叧浜庡弬鏁板惈涔夊ぇ瀹跺彲鍙傝€冩枃妗ｏ細浜嗚В鍙傛暟鍚箟璇烽槄璇?Constructor 閮ㄥ垎銆傚叾涓渶瑕佹彁涓€涓嬬殑鏄紝澶у鍙兘浼氬彂鐜拌繖鏉¤鍙ワ細

const _canvas = parameters.canvas !== undefined ? parameters.canvas : document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );

杩欓噷浣跨敤鐨勬槸 createElementNS 骞堕潪 createElement锛屼簩鑰呭尯鍒強鐢ㄩ€旇闃呰 Document.createElementNS: What's the difference and why we need it銆?/p>

getContext

褰撴垜浠?new 涓€涓?Renderer 鏃讹紝鍏跺唴閮ㄤ細鏈€鍏堣繘鍏ヨ繖涓嬮潰鐨勮鍙ワ細

if ( _gl === null ) {
  const contextNames = [ 'webgl2', 'webgl', 'experimental-webgl' ];
  if ( _this.isWebGL1Renderer === true ) {
    contextNames.shift();
  }
  _gl = getContext( contextNames, contextAttributes );
  if ( _gl === null ) {
    if ( getContext( contextNames ) ) {
      throw new Error( 'Error creating WebGL context with your selected attributes.' );
    } else {
      throw new Error( 'Error creating WebGL context.' );
    }
  }
}

棣栧厛褰?WebGL 涓婁笅鏂囦笉瀛樺湪鏃讹紝Renderer 鍐呴儴鍒楀嚭浜嗘祻瑙堝櫒鎵€鎻愪緵鐨勬墍鏈?WebGL 涓婁笅鏂囧悕绉帮紝濡傝嫢鏄?WebGL1Renderer锛屽垯鍒犲幓 WebGL 2.0 鐨勪笂涓嬫枃鍚嶇О锛岀劧鍚庤皟鐢?getContext 鏂规硶鑾峰彇涓婁笅鏂囥€?code class="mq-181">getContext 鏂规硶瀹炵幇涔熷崄鍒嗙畝鍗曪細

function getContext( contextNames, contextAttributes ) {
  for ( let i = 0; i < contextNames.length; i ++ ) {
    const contextName = contextNames[ i ];
    const context = _canvas.getContext( contextName, contextAttributes );
    if ( context !== null ) return context;
  }
  return null;
}

閬嶅巻涓婃柟鍒椾妇鐨勪笂涓嬫枃鍚嶇О锛屽鏋滆幏鍙栦笂涓嬫枃鍒欒繑鍥烇紝鍚﹀垯杩斿洖 null锛岃繖涔堢畝鍗曠殑浠ｇ爜鑱槑鐨勪綘涔熻兘鍐欏嚭鏉ヤ綘锛屽洓鑸嶄簲鍏ヤ綘鍜?ThreeJS 璐＄尞鑰呯殑姘村钩灏辨槸涓€鏍风殑馃寶

initContext

褰撹幏鍙栧埌涓婁笅鏂囧悗锛岀揣鎺ョ潃璋冪敤鐨勫氨鏄?initGLContext 鏂规硶浜嗭細

function initGLContext() {
  extensions = new WebGLExtensions( _gl );
  capabilities = new WebGLCapabilities( _gl, extensions, parameters );
  // 鑻ヤ笉鏄?nbsp;WebGL 2.0锛屽垯闇€棰濆鑾峰彇浠ヤ笅 extensions
  if ( capabilities.isWebGL2 === false ) {
    // ...
  }
  extensions.get( 'OES_texture_float_linear' );
  
  utils = new WebGLUtils( _gl, extensions, capabilities );

  state = new WebGLState( _gl, extensions, capabilities );
  state.scissor( _currentScissor.copy( _scissor ).multiplyScalar( _pixelRatio ).floor() );
  state.viewport( _currentViewport.copy( _viewport ).multiplyScalar( _pixelRatio ).floor() );

  // ...
}

鐢ㄥ娓哥殑璇濇潵璁诧細鈥滈鍏堟槧鍏ユ垜浠溂甯樼殑鏄?new WebGLExtensions 鍜?new WebGLCapabilities 涓ゆ潯璇彞鈥濓紝WebGLExtensions 鐨勪綔鐢ㄦ槸鍒ゆ柇鏌愪釜 extension 鏄惁瀛樺湪锛屼互鍙婅幏鍙栨寚瀹氱殑 extension 骞?鍏ㄩ噺杩斿洖锛岃€?WebGLCapabilities 鍒欐槸鑾峰彇褰撳墠 WebGL 绯荤粺鐨勪竴浜涘睘鎬э紝濡傦細鏀寔鐨勬渶澶х簿搴︺€佹槸鍚︽槸 WebGL 2.0 浠ュ強鎵€鏀寔鐨勬渶澶ц创鍥惧ぇ灏忕瓑銆傝€屼笅闈㈢殑 WebGLUtils 涓彧鏈変竴涓?convert 鏂规硶锛岃鏂规硶涓昏鏄?灏嗚嚜瀹氫箟鐨勭被鍨嬭浆鎹㈡垚 WebGL 鍐呯疆鐨勭被鍨?/span>銆?/p>

绱ч殢鍏跺悗鐨勫氨鏄?WebGLState锛屽埆鐪嬪畠鍚嶅瓧寰堢煭锛屼絾鏄畠鍗村緢閲嶈锛佺敤鎻忚堪钄℃€伙紙鎴戜滑椤圭洰缁勭殑缈樻锛夌殑涓€鍙ヨ瘽灏辨槸 鈥滅煭锛屼絾鏈夌敤锛佲€?/span> 閫氳繃杩欎釜 state锛屾垜浠彲浠ヨ缃鍙ｅぇ灏忋€佽缃贩鍚堛€佽缃潗璐ㄣ€佺粦瀹氱汗鐞嗙瓑銆傚叾浣欑殑鍐呭灏卞厛鐪佺暐锛屽悗缁湁蹇呰鍐嶈锛屽厛璁╁悇浣嶇煡閬?Renderer 鍐呴儴鐨勫伐浣滄祦绋嬨€?/p>

璋冪敤瀹?initGLContext 鏂规硶鍚庡氨鏈変竴鍙ワ細

const xr = new WebXRManager( _this, _gl );

WebXR 鏄竴缁勬敮鎸佸皢娓叉煋3D鍦烘櫙鐢ㄦ潵鍛堢幇铏氭嫙涓栫晫锛堣櫄鎷熺幇瀹烇紝涔熺О浣?VR锛夋垨灏嗗浘褰㈠浘鍍忔坊鍔犲埌鐜板疄涓栫晫锛堝寮虹幇瀹烇紝涔熺О浣?AR锛夌殑鏍囧噯锛岃鎯呰浜嗚ВMDN鏂囨。銆?/p>

animation

璋冪敤瀹?initContext 鍚庯紝灏辨潵鍒颁簡 animation 鐜妭锛?/p>

const animation = new WebGLAnimation();
animation.setAnimationLoop( onAnimationFrame );
if ( typeof window !== 'undefined' ) animation.setContext( window );

animation 鐨勮皟鐢ㄦ洿鏄彧鏈夎繖绠€鍗曠殑 3 琛岃鍙ワ紝WebGLAnimation 鐨勭被鍨嬪涓嬶細

class WebGLAnimation {
 start(): void;
 stop(): void;
 setAnimationLoop( callback: Function ): void;
 setContext( value: Window ): void;
}

褰撹皟鐢?setAnimationLoop 鏃讹紝鍏跺疄灏辨槸灏嗕紶鍏ョ殑 callback 璧嬬粰 WenGLAnimation 鍐呴儴鐨?animationLoop 鍙橀噺锛屽綋璋冪敤 start 鏂规硶鏃讹紝灏辫皟鐢?window 鐨?requestAnimationFrame 鏂规硶銆傛墍浠?ThreeJS 鍐呴儴鐨勫姩鐢讳篃鏄笉鏂皟鐢?requestAnimationFrame 鏉ュ疄鐜扮殑锛屽懙锛佸嚒浜猴紒

鑰?setContext 鍒欐槸灏?context 璁句负 window锛岃嚦浜?stop 鏂规硶澶у搴旇涔熻兘鐚滃埌閲岄潰濡備綍鍋滄鍔ㄧ敾鐨勪簡鍚э紒

缁撴潫璇煄?/span>

杩欎箞蹇氨缁撴潫璇簡锛熶綘鏄笉鏄粰鎴戝伔宸ュ噺鏂欎簡锛侊紵

鍏跺疄 WebGLRenderer 澶х害 2000 琛屼唬鐮侊紝浣嗗叾涓粷澶ч儴鍒嗘槸鍑芥暟澹版槑渚涙垜浠悗缁殑浣跨敤銆傚洖椤炬湰鏂囷紝澶у灏变細鍙戠幇褰撴垜浠?new 涓€涓?Renderer 鏃?ThreeJS 鍙笉杩囨槸甯垜浠垵濮嬪寲浜?context锛屽苟璁剧疆浜嗕竴涓?animation锛屽叾浣欑殑鍑芥暟閮芥槸鍚庣画鎵嶄細鐢ㄥ埌銆傛晠鍒濆鍖栦竴涓?Renderer 涔熸病浠€涔堟晠寮勭巹铏氱殑锛?/p>

鏃㈢劧鍐呴儴鏈夎繖涔堝鐨勫嚱鏁拌鎴戜滑鍚庣画浣跨敤锛岄偅涔堜笅绡囨枃绔犲氨鏉ヨ璁叉垜浠父鐢ㄧ殑 Renderer 涓殑鏂规硶锛?/p>

鎰熻阿闃呰锛?/p>