WebGPU入门小白（一）：零基础创建第一个WebGPU项目

鐪嬩簡杩欎箞澶歐ebGPU鐨勫彂灞曞拰浼樺娍锛屾槸涓嶆槸鏈夌偣蹇冪棐鐥掞紝蹇冩兂锛學ebGPU鍚捣鏉ュソ澶嶆潅锛屾€庝箞鍏ユ墜鍛紵寮€濮嬶紵濡備綍鍙戝竷WebGPU椤圭洰锛熸垜浠笉鐭ラ亾灏嗗ぇ璞℃斁鍏ュ啺绠辨槸鍚﹀彧闇€瑕佷笁姝ワ紝浣嗘垜浠彲浠ュ憡璇夋偍浣跨敤Orillusion鐨勬ā鏉垮埗浣淲ebGPU椤圭洰鏄涔堝鏄擄紒Orillusion鎻愪緵骞堕儴缃睠hromeWebGPU浠ょ墝銆傝繍琛屽悗鍙互鍦–hrome100+涓婃敮鎸乄ebGPU鍐呭锛堟敮鎸佹渶鏂扮殑wgsl鐗堟湰锛夈€侽rillusionWebGPU妯℃澘閾炬帴锛歨ttps://github.com/Orillusion/orillusion-webgpu-samples鍦═erminal涓緭鍏ヤ互涓嬪懡浠や笅杞紾ithub搴擄紝浣跨敤npm鎴杫arn瀹夎搴撳苟杩愯銆傛祻瑙堝櫒鎵撳紑localhost:3000锛屽嵆鍙互鐪嬪埌杩愯缁撴灉锛屼竴涓皬涓夎銆?鍏嬮殕repogitclonehttps://github.com/Orillusion/orillusion-webgpu-samples.git#杩涘叆鏂囦欢澶筩dorillusion-webgpu-samples#寮€濮嬪畨瑁呬緷璧栭」npminstall#oryarnadd#杩愯椤圭洰鍦╨ocalhost:3000npmrundev#oryarnrundev灏辨槸杩欎箞绠€鍗曪紝鐩镐俊浣犲凡缁忓湪鑷繁鐨勭數鑴戜笂瀹炵幇浜嗙涓€涓猈ebGPU灏忕▼搴忥紝涓嬮潰灏辨潵鐪嬬湅Orillusion鐨勫伐绋嬪笀浠湪杩欎釜灏忎笁瑙掍笅涓烘垜浠仛浜嗕簺浠€涔堝惂锛佷娇鐢╒ite鎵撳寘鍓嶇鎶€鏈殑鏈嬪弸锛屽Webpack銆丷ollup銆丳arcel绛夋墦鍖呭伐鍏锋瘮杈冪啛鎮夛紝澶уぇ鎻愬崌浜嗗墠绔紑鍙戣€呯殑寮€鍙戜綋楠屻€俈ite涓€寮€濮嬪氨灏嗗簲鐢ㄤ腑鐨勬ā鍧楀垎涓轰緷璧栧拰婧愪唬鐮佷袱绉嶏紝閫氳繃鍘熺敓ESM鍔犺浇锛屽ぇ澶ф彁楂樹簡浠ｇ爜缂栬瘧鏃堕棿锛屽惎鍔ㄥ拰鐑洿鏂伴€熷害闈炲父蹇紝鍑犱箮鍦ㄦ绉掔骇銆傚紑绠卞嵆鐢ㄥ湴鏀寔TypeScript銆丣SX銆丆SS绛夈€俈ite浣跨敤esbuild灏員ypeScript缈昏瘧鎴怞avaScript锛屾瘮tsc蹇?0-30鍊嶅乏鍙炽€傚悓鏃讹紝HMR鏇存柊鍙嶆槧鍦ㄦ祻瑙堝櫒涓殑鏃堕棿涓嶅埌50姣銆傝繖浜涚壒鎬у拰浼樺娍瀵瑰紑鍙戣€呮潵璇存槸闈炲父鍙嬪ソ鐨勩€備娇鐢╒ite寮€鍙戠殑鏂囦欢缁撴瀯濡備笅锛氣敎鈹€馃搨node_modules/#Dependencies鈹傗敎鈹€馃搧@webgpu#WebGPUtypesforTS鈹傗敂鈹€馃搧...#Otherdependencies(TypeScript,Vite,etc.)鈹溾攢馃搨src/#婧愭枃浠垛攤鈹溾攢馃搧shaders#鐫€鑹插櫒鏂囦欢鐨勬枃浠跺す鈹傗敂鈹€馃搫*.ts#姣忎釜婕旂ず鐨凾S鏂囦欢鈹溾攢馃搨samples/#绀轰緥html鈹傗敂鈹€馃搫*.html#姣忎釜婕旂ず鐨凥TML鏉＄洰鈹溾攢馃搫銆俫itignore#蹇界暐gitrepo涓殑鏌愪簺鏂囦欢鈹溾攢馃搫index.html#鍏ュ彛椤甸潰鈹溾攢馃搫LICENSE#MIT鈹溾攢馃搫logo.png#Orillusion鏍囧織鍥惧儚鈹溾攢馃搫package.json#鑺傜偣鍖呮枃浠垛敎鈹€馃搫readme.md#璇绘垜锛佲敂鈹€馃搫tsconfig.json#TS閰嶇疆鏂囦欢瀹夎WebGPU搴擄紝閰嶇疆tsconfig鏂囦欢鎴戜滑鐨勬ā鏉垮簱宸茬粡瀹夎浜咢webgpu/types鏉ユ敮鎸乄ebGPU:npminstall@webgpu/types--save灏唙ite/client鍜孈webgpu/types娣诲姞tsconfig涓殑compilerOptions.types:{"compilerOptions":{......"types":["vite/client","@webgpu/types"]}"include":["src"]}vite/client浼氭彁渚涗互涓嬬被鍨嬪畾涔夎ˉ鍏咃細璧勬簮瀵煎叆锛堜緥濡傦細瀵煎叆涓€涓?wgsl鏂囦欢锛塚ite鍦╥mport.meta.env涓婃敞鍏ョ殑鐜鍙橀噺绫诲瀷瀹氫箟import.meta.hotdrawHMRAPI绫诲瀷瀹氫箟triangleChrome100+wgsl浣跨敤鏂扮殑@鏍囩锛屽鏋滄棤娉曟樉绀簑gsl閿欒锛岃鏇存柊Chrome鐗堟湰椤剁偣鐫€鑹插櫒triangle.vert.wgsl//浣跨敤鏈€鏂扮殑wgsl鏍囧噯@stage(vertex)fnmain(@builtin(vertex_index)VertexIndex:u32)->@builtin(position)vec4{varpos=array,3>(vec2(0.0,0.5),vec2(-0.5,-0.5),vec2(0.5,-0.5));returnvec4(pos[VertexIndex],0.0,1.0);}鐗囨鐫€鑹插櫒red.frag.wgsl//浣跨敤鏈€鏂扮殑wgsl鏍囧噯@stage(fragment)fnmain()->@location(0)vec4{returnvec4(1.0,0.0,0.0,1.0);}缁樺埗涓夎褰asicTriangle.tsvite/client鍙互寰堟柟渚跨殑瀵煎叆瀛楃涓茬被鍨嬬殑wgsl鏂囦欢锛屽湪閾炬帴鍚庢坊鍔??raw>鏍囪鍗冲彲importtriangleVertWGSLfrom'./鐫€鑹插櫒/涓夎褰€倂ert.wgsl?raw'importredFragWGSLfrom'./shaders/red.frag.wgsl?raw'閫氳繃90琛屼唬鐮佸垵濮嬪寲webgpu璁惧锛岃皟鐢╟anvas锛屽垱寤虹绾匡紝浼犲叆vertex鍜宖ragmentshader浠ｇ爜銆傜粓浜庢娊濂栨垚鍔熶簡锛乄ebGPUOriginTrialToken涓轰簡鏂逛究鏈湴寮€鍙戯紝Orillusion鐢宠浜嗗彲鍦╨ocalhost鐜涓嬩娇鐢ㄧ殑ChromeWebGPU鐨凮riginTrialToken锛屽苟鍦╲ite.config.js涓厤缃紝鏃犻渶涓嬭浇ChromeCanary鐗堟湰鎴栨墜鍔ㄨ缃笉瀹夊叏鐨剋ebgpu鏍囧織锛屾櫘閫欳hrome96+鏀寔WebGPU銆傚湪WebGPU姝ｅ紡鍙戝竷涔嬪墠锛孫rillusion浼氬畾鏈熸洿鏂皌oken銆?/vite.config.jsimport{defineConfig}from'vite'constdevToken='Amu*********************=='module.exports=defineConfig({plugins:[{name:'Origin-Trial',configureServer:server=>{server.middlewares.use((_req,res,next)=>{res.setHeader("Origin-Trial",devToken)next()})}}]})灏忕粌涔犳垜浠粙缁嶄簡椤剁偣鐫€鑹插櫒鍜岀墖娈电潃鑹插櫒锛屾墍浠ュ皾璇曟敼鍙樺潗鏍囧拰棰滆壊鏉ュ埗浣滀綘鑷繁鐨勫浘褰紒鎺ㄩ€佸埌Git锛屼笌鎴戜滑浜ゆ祦鍒嗕韩锛丱rillusionWebGPU妯℃澘閾炬帴锛歨ttps://github.com/Orillusion/orillusion-webgpu-samples鎴戜滑鐭ラ亾涓夎褰㈡槸濡備綍婊¤冻瀛︾敓鐨勬眰鐭ユ鐨勩€侽rillusion鍥㈤槦璁″垝鎺ㄥ嚭鏇村WebGPU璇剧▼锛岃鎴戜滑涓€璧锋帰绱ebGPU锛屽叧娉ㄦ垜浠紝鏁鏈熷緟鍚庣画鍒嗕韩锛佹杩庢洿澶氱殑鏈嬪弸鍔犲叆鎴戜滑鐨凮rillusion绀惧尯锛屼笌鎴戜滑涓€璧疯璇乄ebGPU鐨勫彂灞曘€傛垜浠皢灏芥渶澶у姫鍔涗笌姣忎竴浣嶇ぞ鍖烘垚鍛樺垎浜渶鍓嶆部鐨刉ebGPU鎶€鏈紝鐪熻瘹甯屾湜澶у涓篛rillusion寮€婧愮ぞ鍖哄仛鍑鸿嚜宸辩殑璐＄尞銆傛垜浠竴鐩村潥淇★紝鍦ㄥ紑婧愮ぞ鍖虹暀涓嬫妧鏈棔杩规槸姣忎竴浣嶆妧鏈汉鍛樻渶宕囬珮鐨勮拷姹傘€傚洜姝わ紝鎴戜滑灏婇噸锛屾垜浠鍙紝鎴戜滑鏈熷緟锛屽姞鍏ュゥ鐫匡紝璁╂垜浠叡鍚岃繘姝ワ紒鈥斺€旈摼鎺ユ湭鐭ワ紝閾炬帴鏈潵涓栫晫Orillusion鍥㈤槦浠嬬粛Orillusion鍥㈤槦鐢卞笣鍥界悊宸ュ闄㈣瑙夋覆鏌撲笓涓氬崥澹悗鍒涚珛銆傚洟闃熸垚鍛樻嫢鏈夌澹€佸崥澹瓑椤剁骇瀛︽湳鑳屾櫙锛屽紩鎿庢妧鏈爺鍙戞垚鍛樺潎鏉ヨ嚜鍘烢gretEngine鏍稿績鍥㈤槦锛屾嫢鏈?0骞翠互涓婂紩鎿庡簳灞傚紑鍙戠粡楠屻€傛垜浠篃涓€鐩村湪鍏虫敞寮€婧愮ぞ鍖虹殑浼樼浼佷笟鍜岀浉鍏充汉鎵嶏紝鏈熷緟鏇村鐨勫紑婧愮埍濂借€呭姞鍏rillusion锛屼竴璧锋敼鍙樹笘鐣岋紒鍥㈤槦涓撴敞浜庡彂鍔ㄦ満搴曞眰鎶€鏈殑鐮斿彂銆備富瑕佸伐浣滄槸鎵撻€犱竴涓畬鍏ㄥ紑婧愮殑WebGPU杞婚噺绾ч€氱敤娓叉煋寮曟搸銆傜洰鏍囨槸鍦ㄦ祻瑙堝櫒涓疄鐜版闈㈢骇娓叉煋鏁堟灉锛屾敮鎸佽秴澶у鏉傚満鏅殑3D娓叉煋銆傛湭鏉ワ紝鍥㈤槦灏嗗缁堜笓娉ㄤ簬寮曟搸搴曞眰鐨勬妧鏈獊鐮达紝鎵撻€犱紭绉€鐨勫紑婧愯蒋浠跺拰寮€婧愰鍩燂紝涓?D鍦烘櫙澶х垎鍙戞椂浠ｆ彁渚涘紩鎿庡熀纭€宸ュ叿銆?/p>