WebGPU\ub294 GPU\ub97c \uc774\uc6a9\ud574 \uadf8\ub798\ud53d\uc744 \ub80c\ub354\ub9c1\ud558\uac70\ub098 \ubc94\uc6a9\uc801\uc778 \uc5f0\uc0b0\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \uc6f9 API\uc785\ub2c8\ub2e4. \uc774 \uae00\uc740 WebGPU\ub97c \uc774\uc6a9\ud574 \uac04\ub2e8\ud55c \uc0bc\uac01\ud615\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubd05\ub2c8\ub2e4.<\/p>\n
WebGL\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \uadf8\ub798\ud53d\uc744 \ucd9c\ub825\ud560 Canvas\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. HTML \ud30c\uc77c\uc5d0 Canvas \uc694\uc18c\ub97c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4. \ucd94\uac00\ud588\ub2e4\uace0 \uce58\uace0…<\/p>\n
WebGPU\uc758 \ucd08\uae30\ud654\uac00 \ud544\uc694\ud55c\ub370, WebGPU\uc758 \ucd08\uae30\ud654\ub294 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ubbc0\ub85c \ubcc4\ub3c4\uc758 \ube44\ub3d9\uae30 \ud568\uc218\ub85c \ucc98\ub9ac\ud569\ub2c8\ub2e4.<\/p>\n
\r\nasync function main() {\r\n \/\/ \uc55e\uc73c\ub85c \ucf54\ub4dc\ub294 \ubaa8\ub450 \uc5ec\uae30\uc5d0 \ucd94\uac00\ub428\r\n}\r\n\r\nawait main();\r\n<\/pre>\n\uba3c\uc800 GPU \ub514\ubc14\uc774\uc2a4 \uac1d\uccb4\ub97c \uc5bb\uc5b4\uc635\ub2c8\ub2e4.<\/p>\n
\r\n const adapter = await navigator.gpu.requestAdapter();\r\n const device = await adapter.requestDevice();\r\n<\/pre>\n\uc774\uc81c \uc774 device \uac1d\uccb4\ub97c \ud1b5\ud574 \uadf8\ub798\ud53d\uc744 \ub80c\ub354\ub9c1\ud560\ud150\ub370, \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ud1b5\ud574 \ub80c\ub354\ub9c1 \uacb0\uacfc\uac00 \ucd9c\ub825\ub41c \uce94\ubc84\uc2a4\uc640 \uc5f0\uacb0\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\n
\r\n const canvas = document.querySelector('canvas');\r\n const context = canvas.getContext('webgpu');\r\n const presentationFormat = navigator.gpu.getPreferredCanvasFormat();\r\n context.configure({\r\n device,\r\n format: presentationFormat,\r\n });\r\n<\/pre>\nWebGL\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c WebGPU \uc5ed\uc2dc Shader \ucf54\ub4dc\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. \ud558\uc9c0\ub9cc \uc250\uc774\ub354 \uc5b8\uc5b4\uac00 \ub2e4\ub974\uba70 WebGL\uc740 GLSL\uc774\uace0 WebGPU\ub294 WGSL(\uc704\uadf8\uc2e4)\uc785\ub2c8\ub2e4. WebGL\uc5d0\uc11c\ub294 Vertex Shader\uc640 Fragment Shader\uac00 \ud544\uc694\ud588\ub358 \uac83\ucc98\ub7fc WebGPU \uc5ed\uc2dc\ub3c4 \ub9c8\ucc2c\uac00\uc9c0\uc785\ub2c8\ub2e4. \ud574\ub2f9 \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n const module = device.createShaderModule({\r\n label: 'our hardcoded red triangle shaders',\r\n code: \/* wgsl *\/ `\r\n @vertex fn vs(\r\n @builtin(vertex_index) vertexIndex : u32\r\n ) -> @builtin(position) vec4f {\r\n let pos = array(\r\n vec3f( 0, .5, 0), \r\n vec3f( -.5, -.5, 0), \r\n vec3f( .5, -.5, 0) \r\n );\r\n \r\n return vec4f(pos[vertexIndex], 1.0);\r\n }\r\n \r\n @fragment fn fs() -> @location(0) vec4f {\r\n return vec4f(1.0, 0.0, 0.0, 1.0);\r\n }\r\n `,\r\n });\r\n<\/pre>\n\uc774\uc81c \uc250\uc774\ub354 \ucf54\ub4dc\ub97c \uc2e4\ud589\ud560 \ub80c\ub354 \ud30c\uc774\ud504 \ub77c\uc778 \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\r\n const pipeline = device.createRenderPipeline({\r\n label: 'our hardcoded red triangle pipeline',\r\n layout: 'auto',\r\n vertex: {\r\n module,\r\n entryPoint: 'vs',\r\n },\r\n fragment: {\r\n module,\r\n entryPoint: 'fs',\r\n targets: [{ format: presentationFormat }],\r\n },\r\n });\r\n<\/pre>\n\ub2e4\uc74c\uc740 \uc2e4\uc81c \ub80c\ub354\ub9c1\uc744 \uc704\ud574 \ud544\uc694\ud55c \uc124\uc815\uac12(Canvas\uc758 \ud14d\uc2a4\uccd0\ubdf0, \ubc30\uacbd\uc0c9\uc0c1 \ub4f1)\uc744 \uac16\ub294 \ub514\uc2a4\ud06c\ub9bd\ud130 \uac1d\uccb4\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\r\n const renderPassDescriptor = {\r\n label: 'our basic canvas renderPass',\r\n colorAttachments: [\r\n {\r\n view: context.getCurrentTexture().createView(),\r\n clearValue: [0.3, 0.3, 0.3, 1],\r\n loadOp: 'clear',\r\n storeOp: 'store',\r\n },\r\n ],\r\n }; \r\n<\/pre>\n\uc774\uc81c \uc2e4\uc81c \ub80c\ub354\ub9c1\uc744 \uc704\ud55c \uad6c\uccb4\uc801\uc778 \uba85\ub839\uc744 \uc778\ucf54\ub529\ud558\uae30 \uc704\ud55c \uac1d\uccb4\ub97c \uc0dd\uc131\ud558\uace0 \ub80c\ub354\ub9c1 \uba85\ub839\uc744 \uc9c0\uc815\ud569\ub2c8\ub2e4.<\/p>\n
\r\n const encoder = device.createCommandEncoder({ label: 'our encoder' });\r\n\r\n const pass = encoder.beginRenderPass(renderPassDescriptor);\r\n pass.setPipeline(pipeline);\r\n pass.draw(3); \/\/ \uc815\uc810 \uc170\uc774\ub354\ub97c 3\ubc88 \ud638\ucd9c\r\n pass.end();\r\n<\/pre>\n\uc704\uc758 \ucf54\ub4dc\ub294 \uba85\ub839\uc744 \uc9c0\uc815\ub9cc \ud588\uc744 \ubfd0\uc774\uace0 \uc2e4\uc81c \uc2e4\ud589\uc744 \uc704\ud55c \ucf54\ub4dc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\n const commandBuffer = encoder.finish();\r\n device.queue.submit([commandBuffer]);\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"WebGPU\ub294 GPU\ub97c \uc774\uc6a9\ud574 \uadf8\ub798\ud53d\uc744 \ub80c\ub354\ub9c1\ud558\uac70\ub098 \ubc94\uc6a9\uc801\uc778 \uc5f0\uc0b0\uc744 \uc2e4\ud589\ud560 \uc218 \uc788\ub294 \uc6f9 API\uc785\ub2c8\ub2e4. \uc774 \uae00\uc740 WebGPU\ub97c \uc774\uc6a9\ud574 \uac04\ub2e8\ud55c \uc0bc\uac01\ud615\uc744 \ub80c\ub354\ub9c1\ud558\ub294 \ucf54\ub4dc\ub97c \uc0b4\ud3b4\ubd05\ub2c8\ub2e4. WebGL\uacfc \ub9c8\ucc2c\uac00\uc9c0\ub85c \uadf8\ub798\ud53d\uc744 \ucd9c\ub825\ud560 Canvas\uac00 \ud544\uc694\ud569\ub2c8\ub2e4. HTML \ud30c\uc77c\uc5d0 Canvas \uc694\uc18c\ub97c \ucd94\uac00\ud574\uc57c \ud569\ub2c8\ub2e4. \ucd94\uac00\ud588\ub2e4\uace0 \uce58\uace0… WebGPU\uc758 \ucd08\uae30\ud654\uac00 \ud544\uc694\ud55c\ub370, WebGPU\uc758 \ucd08\uae30\ud654\ub294 \ube44\ub3d9\uae30\uc801\uc73c\ub85c \uc2e4\ud589\ub418\ubbc0\ub85c \ubcc4\ub3c4\uc758 \ube44\ub3d9\uae30 \ud568\uc218\ub85c \ucc98\ub9ac\ud569\ub2c8\ub2e4. async function main() { \/\/ \uc55e\uc73c\ub85c \ucf54\ub4dc\ub294 \ubaa8\ub450 \uc5ec\uae30\uc5d0 … <\/p>\n