WebGL 鍧愭爣绯荤粺

Posted 2021-04-25 Refactor

鍓嶈█馃摎

鍘熸湰鎯虫墦绠楃洿鎺ヤ粙缁?code class="mq-3">GLSL鍩虹璇硶鎴栬€呬笁缁村浘褰㈢浉鍏崇殑鍐呭锛屽彲鏄悗鏉ユ垜鎯充簡鎯筹紝涓嶇鏄湪WebGL绯荤粺杩樻槸鍦?code class="mq-5">OpenGL绯荤粺涓兘鏈変竴涓緢閲嶈鐨勬蹇碘€斺€?span class="mq-6">鍧愭爣绯荤粺馃鍦ㄤ箣鍓嶇殑鏂囩珷涓篃鎻愬埌杩囧嚑涓潗鏍囩郴缁燂紝渚嬪锛氱汗鐞嗗潗鏍囩郴缁熴€?code class="mq-7">WebGL鍧愭爣绯荤粺绛夛紝鍙槸杩欎簺閮芥槸鐩稿绗肩粺鐨勬蹇碉紝褰撴墍鏈夌墿浣撹繘鍏ュ埌WebGL绯荤粺鍚庨兘浼氶伒寰繖浜涘潗鏍囩郴鐨勬爣鍑嗮煋?/p>

浣嗘槸褰撹繘鍏ュ埌涓夌淮涓栫晫鍚庯紝鎴戜滑浼氶潰瀵规洿澶嶆潅鐨勫浘褰㈠浘鍍忕┖闂淬€佹洿澶嶆潅鐨勫浘褰㈠彉鍖栵紙浣嗛兘绂讳笉寮€鏈€鍩虹鐨勫钩绉?鏃嬭浆/缂╂斁锛変互鍙婃洿澶嶆潅鐨勫浘褰㈡暟鎹煪愯€屽湪鍥惧舰鐨勬樉绀鸿繃绋嬩腑杩樹細娑夊強閫氳繃鍙樻崲鐭╅樀灏嗗潗鏍囦粠涓€涓潗鏍囩郴缁熷彉鎹㈠埌鍙︿竴涓潗鏍囩郴缁熺殑杩囩▼馃殌

鍧愭爣绯荤粺馃摝

涓嶅悓鐨勫潗鏍囩郴缁熶篃琚О浣滅浉搴旂殑绌洪棿锛岄鍏堟潵鐪嬩竴涓嬶紝椤剁偣鍦ㄦ渶缁堣杞寲涓虹墖鍏冧箣鍓嶉渶瑕佺粡鍘嗗摢浜涘潗鏍囩郴缁燂紙绌洪棿锛夛細

• 灞€閮ㄧ┖闂达紙Local Space锛? 鐗╀綋绌洪棿锛圤bject Space锛?/span>

• 涓栫晫绌洪棿锛圵orld Space锛?/span>

• 瑙傚療绌洪棿锛圴iew Space锛? 瑙嗚绌洪棿锛圗ye Space锛?/span>

• 瑁佸壀绌洪棿锛圕lip Space锛?/span>

• 灞忓箷绌洪棿锛圫creen Space锛?/span>

椤剁偣鍧愭爣锛堜綅浜庡眬閮ㄧ┖闂达級锛岀О涓哄眬閮ㄥ潗鏍囷紝鐒跺悗椤剁偣鍧愭爣浼氫粠灞€閮ㄧ┖闂存寜鐓т笂杩伴『搴忎竴姝ユ鍙樻崲鍒板睆骞曠┖闂答煉?/p>

鑰屽潗鏍囦粠涓€涓┖闂村埌鍙︿竴涓┖闂村垯闇€瑕佸彉鎹㈢煩闃垫潵瀹屾垚杩欎竴杩囩▼锛?/p>

• 妯″瀷鐭╅樀锛圡odel Matrix锛?/span>

• 瑙傚療鐭╅樀锛圴iew Matrix锛?/span>

• 鎶曞奖鐭╅樀锛圥rojection Matrix锛?/span>

鍙樻崲杩囩▼灏卞涓嬪浘鎵€绀猴細

鉂楋笍鏈儴鍒嗘槸鍩轰簬OpenGL浠嬬粛鐨?/strong>鉂楋笍

灞€閮ㄧ┖闂答煆?/span>

灞€閮ㄧ┖闂?/strong>鏄寚鐗╀綋鎵€鍦ㄧ殑鍧愭爣绌洪棿锛屽嵆瀵硅薄鏈€寮€濮嬫墍鍦ㄧ殑鍦版柟銆傚湪灞€閮ㄧ┖闂翠腑锛岀墿浣撲綅浜庣┖闂寸殑鍘熺偣锛屾墍鏈夌殑璋冩暣閮芥槸鍩轰簬鐗╀綋鐨勭浉瀵逛綅缃繘琛岀殑銆備妇涓牀瀛愶細鐩镐俊澶у灏忔椂鍊欓兘缁勮杩囧洓椹辫溅锛屽綋鎴戜滑缁勮鍥涢┍杞︾殑鏃跺€欎笉闇€瑕佸叧蹇冩垜鐨勯浂閮ㄤ欢鐨勭粡绾害锛屽彧闇€瑕佸叧蹇冿紝鎴戣繖涓┈杈惧簲璇ュ畨瑁呭湪杩欎釜缁勪欢鐨勫摢涓湴鏂瑰嵆鍙煂?/p>

涓栫晫绌洪棿馃寧

涓栫晫绌洪棿鏄寚铏氭嫙鐨勫満鏅墍鍦ㄧ殑绌洪棿锛屾瘮濡傛父鎴忓満鏅瓑銆傚畠鎸囬《鐐圭浉瀵逛簬鍦烘櫙鐨勫潗鏍囷紝褰撴墍鏈夌墿浣撳鍏ョ▼搴忔椂锛屽畠浠湁鍙兘浼氶兘鎸ゅ湪涓栫晫鐨勫師鐐?code class="mq-51">(0.0, 0.0, 0.0)涓婏紝鎴戜滑闇€瑕佷负姣忎竴涓墿浣撳畾涔変竴涓綅缃紝浠庤€岃兘鍦ㄦ洿澶х殑鍦烘櫙涓悎鐞嗙殑鎽嗘斁璁╁畠浠€?span class="mq-52">妯″瀷鐭╅樀鐨勪綔鐢ㄥ氨鏄€氳繃瀵圭墿浣撹繘琛屼綅绉汇€佺缉鏀俱€佹棆杞瓑鎿嶄綔灏嗗叾鎽嗘斁鍒板満鏅腑鐨勪笉鍚屼綅缃€?/p>

瑙傚療绌洪棿馃憖

鎴戜滑閫氳繃WebGL鍦ㄥ睆骞曚笂灞曠幇缁欑敤鎴风殑鍐呭骞朵笉鏄笘鐣岀┖闂翠腑鎽嗘斁鐨勫叏閮ㄥ唴瀹癸紝鑰屾槸閫氳繃鎽勫儚鏈烘潵妯℃嫙鐢ㄦ埛鐨勭溂鐫涙墍鍛堢幇鐨勫満鏅€?span class="mq-57">瑙傚療绌洪棿灏辨槸浠庢憚鍍忔満鐨勮瑙掓墍瑙傚療鍒扮殑绌洪棿锛屼篃浼氱О浣?span class="mq-58">鎽勫儚鏈虹┖闂?/strong>鎴?span class="mq-59">瑙嗚绌洪棿銆?/p>

浠ユ憚鍍忔満浣嶇疆涓哄師鐐癸紝瑙傚療鏂瑰悜涓?code class="mq-61">-z杞存柟鍚戠殑涓€涓┖闂撮€氬父鐢ㄤ竴绯诲垪鐨勫钩绉诲拰鏃嬭浆鍙樻崲鎶婁笘鐣岀┖闂翠腑鐨勭墿浣撹浆鎹㈠埌瑙傚療绌洪棿涓€?/p>

瑁佸壀绌洪棿鉁傦笍

鎽勫儚鏈烘湁鏈濆悜锛屼篃鏈夋媿鎽勭殑瑙嗛噹鑼冨洿锛屾墍鏈夊湪瑙嗛噹鑼冨洿涔嬪鐨勪笢瑗块兘鏄湅涓嶅埌鐨勶紝閮借琚墧闄ゃ€傚湪姣忎釜椤剁偣鐫€鑹插櫒杩愯缁撴潫鐨勬椂鍊欙紝OpenGL甯屾湜鍧愭爣閮藉湪涓€涓寚瀹氳寖鍥村唴锛岃秴鍑鸿寖鍥寸殑鍧愭爣閮戒細琚鍓帀锛屽墿涓嬬殑鍧愭爣鎵嶄細杩涘叆鐗囧厓鐫€鑹查樁娈碉紝杩欎篃灏辨槸瑁佸壀绌洪棿鍚嶅瓧鐨勭敱鏉ャ€傝€?span class="mq-67">鎶曞奖鐭╅樀灏辨槸灏嗙墿浣撲粠瑙傚療绌洪棿杞崲鍒拌鍓┖闂淬€?/p>

鐮旂┒琛ㄦ槑浜轰袱鐪奸噸鍚堣鍩熼€氬父涓?24搴︼紝褰撻泦涓敞鎰忓姏鏃剁害涓轰簲鍒嗕箣涓€锛屽嵆25搴︼紙鐭ラ亾涓轰粈涔堝綋涓€涓汉鍏ㄧ璐敞鏃跺彲鑳戒細蹇界暐鍛ㄨ竟鍙戠敓鐨勪簨鎯呬簡鍚ю煠佛煆硷級锛屽崟鐪肩殑鑸掗€傝鍩熶负60搴︺€傚綋鐒讹紝鍦?code class="mq-69">OpenGL涓憚鍍忔満鐨勫乏鍙炽€佷笂涓嬫柟鍚戜篃閮芥湁涓€瀹氱殑鑼冨洿锛岃繖涓寖鍥寸О浣?span class="mq-70">瑙嗛噹瑙掑害锛團OV锛?/strong>銆?/p>

鍥句腑钃濊壊鐨?code class="mq-74">w鍜?code class="mq-75">h灏辩‘瀹氫簡鎽勫儚鏈轰笂涓嬪乏鍙宠兘鐪嬪埌鐨勮寖鍥村ぇ灏忥紱閫氬父璁剧疆涓婁笅宸﹀彸瑙嗛噹閮芥槸90搴︼紝鍚屾椂璁剧疆涓€涓?span class="mq-76">杩戣鍓潰鍜?span class="mq-77">杩滆鍓潰锛氭瘮杩戣鍓潰杩戙€佹瘮杩滆鍓潰杩滅殑鐗╀綋琚墧闄わ紝鎶婁袱涓鍓潰涔嬮棿鎵€鏈夌殑鐗╀綋閮芥槧灏勫埌鎶曞奖骞抽潰涓娾渼

鎴戜滑鍐嶈鍥炲埌鎶曞奖鐭╅樀锛屾姇褰辩煩闃靛垎涓轰袱绉嶏細姝ｅ皠鎶曞奖鐭╅樀鍜?span class="mq-80">閫忚鎶曞奖鐭╅樀锛?em class="mq-81">灏嗙壒瀹氳寖鍥村唴鍧愭爣杞寲鍒版爣鍑嗗寲璁惧鍧愭爣绯伙紙NDC锛夌殑杩囩▼琚О涔嬩负鎶曞奖锛夈€傛灏勬姇褰卞拰閫忚鎶曞奖鐨勫樊鍒緢鏄庢樉锛岄€忚鎶曞奖鐪嬭捣鏉ユ洿鍔犵珛浣撶湡瀹烇紙灏辨兂瀛︾敾鐢绘椂鑰佸笀鏁欑殑鈥滆繎澶ц繙灏忥紝杩戦珮杩滀綆鈥濓級锛岃€屾灏勬姇褰卞垯娌℃湁杩欑鏁堟灉锛屼娇鐢ㄦ灏勬姇褰辩殑鐗╀綋娌℃湁閫忚锛岃繙澶勭殑鐗╀綋涔熶笉浼氭樉寰楁洿灏忥紝鍦ㄦ灏勬姇褰变腑姣忎釜椤剁偣璺濈瑙傚療鑰呯殑璺濈閮芥槸涓€鏍风殑锛屽綋鐒舵灏勬姇褰变篃鏈夊畠鐨勭敤澶勶紝姣斿鐢ㄤ簬娓叉煋涓€浜涗簩缁寸殑寤虹瓚鎴栧伐绋嬬殑绋嬪簭锛屽湪杩欎簺鍦烘櫙涓伐绋嬪笀浠洿甯屾湜椤剁偣涓嶄細琚€忚鎵€褰卞搷銆?/p>

涓轰笂杩版瘡涓€涓楠ら兘鍒涘缓鐩稿簲鐨勫彉鎹㈢煩闃碉細妯″瀷鐭╅樀銆佽瀵熺煩闃靛拰鎶曞奖鐭╅樀銆備竴涓《鐐瑰潗鏍囧皢浼氭牴鎹互涓嬭繃绋嬭鍙樻崲鍒拌鍓潗鏍囷細

椤剁偣鐫€鑹插櫒鐨勮緭鍑鸿姹傛墍鏈夌殑椤剁偣閮藉湪瑁佸壀绌洪棿鍐咃紝杩欏氨鏄娇鐢ㄥ彉鎹㈢煩闃靛仛鐨勶紝鐒跺悗OpenGL瀵硅鍓潗鏍囨墽琛岄€忚闄ゆ硶浠庤€屽皢瀹冧滑鍙樻崲鍒版爣鍑嗗寲璁惧鍧愭爣锛汷penGL浣跨敤鍐呴儴鍙傛暟鏉ユ爣鍑嗗寲璁惧鍧愭爣鏄犲皠鍒板睆骞曞潗鏍囷紝姣忎竴涓潗鏍囬兘鍏宠仈浜嗕竴涓睆骞曚笂鐨勭偣锛岃繖涓繃绋嬬О涓?span class="mq-87">瑙嗗彛鍙樻崲銆?/p>

閫忚闄ゆ硶鏄皢4D瑁佸壀绌洪棿鍧愭爣鍙樻崲涓?D鏍囧噯鍖栬澶囧潗鏍囩殑杩囩▼

瑙嗗彛绌洪棿馃帴

璇ョ┖闂村彲浠ョ畝鍗曞湴鐞嗚В涓哄簲鐢ㄧ獥鍙ｏ紝鎶曞奖骞抽潰涓婄殑涓滆タ鍜岀獥鍙ｄ笂鐨勫儚绱犻€氳繃涓€涓€瀵瑰簲鐨勬柟寮忔槧灏勫埌绐楀彛锛屽湪绐楀彛涓婃樉绀恒€傝繖涓€姝?code class="mq-93">OpenGL浼氬府鎴戜滑瀹屾垚锛?/p>

浠ヤ笂鍐呭鏉ヨ嚜浜嶭earnOpenGL锛屾劅璋㈠ぇ瀹惰鐪嬧€?鈥?/p>

杩樻湁鍐呭鍛紝鍓嶉潰鍙槸璇翠簡WebGL浠栫埞锛?code class="mq-99">WebGL杩樻病鎻愬憿锛堢嫍澶翠繚鍛斤級WebGL涓殑妯″瀷銆佽鍥俱€佹姇褰辩煩闃靛彲浠ョ湅杩欑瘒MDN鏂囩珷锛屽唴瀹逛笌OpenGL鍩烘湰涓€鑷达紝鍐嶆灏变笉閲嶅浠嬬粛浜嗐€?/p>

鍥為【鈴?/span>

鎴戜滑浜嗚В浜嗕笂闈㈠嚑涓潗鏍囩郴涔嬪悗锛屽洖鎯充竴涓嬫垜浠箣鍓嶆枃绔犵殑绀轰緥涓ソ鍍忓氨鍙湁灞€閮ㄧ┖闂村拰瑙嗗彛绌洪棿锛屽叾瀹炲綋椤剁偣琚墖鍏冪潃鑹插櫒澶勭悊涔嬪悗瀹冨氨鎴愪负浜?span class="mq-105">鏍囧噯鍖栬澶囧潗鏍囷紙NDC锛?/strong>锛屼篃灏辨槸璇存垜浠箣鍓嶇殑绀轰緥鐨勬祦绋嬫槸涓嬪浘杩欐牱鐨勶細

杩欎篃灏卞簲瀵逛笂浜嗕箣鍓嶆垜浠湪鐭╁舰canvas涓粯鍒朵笁瑙掑舰锛屾棆杞箣鍚庡彂鐢熷舰鍙樼殑鍦烘櫙馃涓棿鐪佺暐浜嗚繖涔堝鍧愭爣杞崲鐨勮繃绋嬶紝鎴戜滑鏄笉鏄彲浠ュ湪鍚勪釜鍧愭爣绯荤粺鐨勮浆鎹㈣繃绋嬩腑鍋氱偣鏂囩珷锛岃В鍐充笂杩版垜浠殑闂鍛紵绛旀鏄?span class="mq-109">褰撶劧鍟︼紒

灏辨槸璇存垜浠渶瑕佸湪涓栫晫绌洪棿鍧愭爣绯烩啋瑙傚療鍧愭爣绯诲拰瑙傚療鍧愭爣绯烩啋瑁佸壀绌洪棿鍧愭爣绯讳袱涓幆鑺傚仛鏂囩珷锛屼笂鍥句腑涔熷彲浠ョ湅鍑哄叾瀹炲氨鏄鍏惰繘琛岀瓑姣旂殑缂╂斁锛屼娇鍏惰兘鎸夌収鎴戜滑鐨勮鎯冲湪灞忓箷涓婂睍绀吼煒?/p>

鏈夎叮鐨勫潗鏍囩郴缁熶粙缁嶅埌杩欓噷鍟︼紝鍚庣画浼氬嚭鏇村濂界帺骞朵笖鏈夌敤鐨勬枃绔犲垎浜粰澶у锛屾劅璋㈤槄璇火煍?/p>