| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| const device = await adapter.requestDevice(); |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| -0.3, -0.5, 0.0, |
| 0.3, -0.5, 0.0, |
| 0.3, 0.5, 0.0, |
| |
| -0.3, -0.5, 0.0, |
| 0.3, 0.5, 0.0, |
| -0.3, 0.5, 0.0, |
| ]); |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| loadOp: 'clear', |
| }] |
| }); |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| renderPass.draw(6); |
| renderPass.end(); |
| const commandBuffer = commandEncoder.finish(); |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| const device = await adapter.requestDevice(); |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| |
| -0.5, -0.5, 0.0, |
| -1.0, -0.5, 0.0, |
| -0.5, -1.0, 0.0, |
| ]); |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| loadOp: 'clear', |
| }] |
| }); |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| renderPass.draw(6); |
| renderPass.end(); |
| const commandBuffer = commandEncoder.finish(); |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| </script> |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500" style="background-color: black;"></canvas> |
| <script type="module"> |
| |
| </script> |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| <script type="module"> |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| console.log('适配器adapter', adapter); |
| console.log('GPU设备对象device', device); |
| |
| </script> |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| ]); |
| |
| |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| |
| |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| ]); |
| |
| |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| |
| |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| vertex: { |
| buffers: [ |
| { |
| arrayStride: 3*4, |
| |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| }); |
| </script> |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| const device = await adapter.requestDevice(); |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| |
| const vertexArray = new Float32Array([ |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| 0.0, 0.0, 1.0, |
| ]); |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| cullMode: 'back', |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| loadOp: 'clear', |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| }] |
| }); |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| renderPass.draw(3); |
| renderPass.end(); |
| const commandBuffer = commandEncoder.finish(); |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| const device = await adapter.requestDevice(); |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| 2.0, 0.0, 0.2, |
| 0.0, 1.0, 0.2, |
| 0.0, 0.0, 0.2, |
| ]); |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| cullMode: 'back', |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| loadOp: 'clear', |
| }] |
| }); |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| renderPass.draw(3); |
| renderPass.end(); |
| const commandBuffer = commandEncoder.finish(); |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| ]); |
| |
| |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| |
| |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| |
| |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| |
| loadOp: 'clear', |
| }] |
| }); |
| |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| |
| renderPass.draw(3); |
| |
| renderPass.end(); |
| |
| const commandBuffer = commandEncoder.finish(); |
| |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| const device = await adapter.requestDevice(); |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| |
| const vertexArray = new Float32Array([ |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| ]); |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| loadOp: 'clear', |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| }] |
| }); |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| renderPass.draw(3); |
| renderPass.end(); |
| const commandBuffer = commandEncoder.finish(); |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| const device = await adapter.requestDevice(); |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| |
| const vertexArray = new Float32Array([ |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| ]); |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| loadOp: 'clear', |
| }] |
| }); |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| renderPass.draw(3); |
| renderPass.end(); |
| const commandBuffer = commandEncoder.finish(); |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex, fragment } from './shader.js' |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| -0.3, -0.5, 0.0, |
| 0.3, -0.5, 0.0, |
| 0.3, 0.5, 0.0, |
| |
| -0.3, -0.5, 0.0, |
| 0.3, 0.5, 0.0, |
| -0.3, 0.5, 0.0, |
| ]); |
| |
| |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| |
| |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| layout: 'auto', |
| vertex: { |
| |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| fragment: { |
| |
| module: device.createShaderModule({ code: fragment }), |
| entryPoint: "main", |
| targets: [{ |
| format: format |
| }] |
| }, |
| primitive: { |
| topology: "triangle-list", |
| } |
| }); |
| |
| |
| const commandEncoder = device.createCommandEncoder(); |
| |
| const renderPass = commandEncoder.beginRenderPass({ |
| colorAttachments: [{ |
| |
| |
| view: context.getCurrentTexture().createView(), |
| storeOp: 'store', |
| |
| clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 }, |
| |
| loadOp: 'clear', |
| }] |
| }); |
| |
| renderPass.setPipeline(pipeline); |
| |
| renderPass.setVertexBuffer(0, vertexBuffer); |
| |
| renderPass.draw(6); |
| |
| renderPass.end(); |
| |
| const commandBuffer = commandEncoder.finish(); |
| |
| device.queue.submit([commandBuffer]); |
| </script> |
| </body> |
| |
| </html> |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| |
| |
| const fragment = ` |
| @fragment |
| fn main() -> @location(0) vec4<f32> { |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| } |
| ` |
| |
| export { vertex, fragment } |
| |
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Threejs中文网:http://www.webgl3d.cn/</title> |
| </head> |
| |
| <body> |
| |
| <canvas id="webgpu" width="500" height="500"></canvas> |
| <script type="module"> |
| |
| import { vertex } from './shader.js' |
| |
| const adapter = await navigator.gpu.requestAdapter(); |
| |
| const device = await adapter.requestDevice(); |
| |
| const canvas = document.getElementById('webgpu'); |
| const context = canvas.getContext('webgpu'); |
| const format = navigator.gpu.getPreferredCanvasFormat(); |
| context.configure({ |
| device: device, |
| format: format, |
| }); |
| |
| |
| const vertexArray = new Float32Array([ |
| |
| 0.0, 0.0, 0.0, |
| 1.0, 0.0, 0.0, |
| 0.0, 1.0, 0.0, |
| ]); |
| |
| |
| const vertexBuffer = device.createBuffer({ |
| size: vertexArray.byteLength, |
| |
| usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST, |
| }); |
| |
| |
| device.queue.writeBuffer(vertexBuffer, 0, vertexArray); |
| |
| |
| |
| const pipeline = device.createRenderPipeline({ |
| vertex: { |
| |
| module: device.createShaderModule({ code: vertex }), |
| entryPoint: "main", |
| buffers: [ |
| { |
| arrayStride: 3 * 4, |
| |
| attributes: [{ |
| shaderLocation: 0, |
| format: "float32x3", |
| offset: 0 |
| }] |
| } |
| ] |
| }, |
| }); |
| |
| </script> |
| </body> |
| |
| </html> |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| const vertex = ` |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
| ` |
| |
| export { |
| vertex |
| } |
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>http://www.webgl3d.cn/</title> |
| </head> |
| <body> |
| <script type="module"> |
| if(navigator.gpu){ |
| console.log('你的浏览器支持WebGPU。'); |
| }else{ |
| console.log('你的浏览器不支持WebGPU,请更换新版本浏览器。'); |
| } |
| </script> |
| </body> |
| |
| </html> |
参考
- threejs中文网,郭老师博客
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战