diff --git a/blank.html b/blank.html index 71155e3..d8b00d5 100644 --- a/blank.html +++ b/blank.html @@ -66,7 +66,8 @@ const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{ view: textureView, - loadValue: [0, 0, 0, 1] + loadValue: [0, 0, 0, 1], + storeOp: "store", }] }); renderPass.endPass(); diff --git a/cube.html b/cube.html index b4ddd61..e9343a5 100644 --- a/cube.html +++ b/cube.html @@ -63,7 +63,7 @@ const presentationFormat = context.getPreferredFormat(adapter); context.configure({ device, - format: presentationFormat + format: presentationFormat, }); //////////////////////////////////////// @@ -134,43 +134,41 @@ // Create render pipeline /////////////////////////// - const vs = ` - #version 450 - - layout(location=0) in vec4 position; - layout(location=1) in vec3 normal; - - layout(set=0, binding=0) uniform SceneUniforms { - mat4 mvpMatrix; + const shader = ` + struct SceneUniforms { + mvpMatrix: mat4x4; }; + [[group(0), binding(0)]] var uniforms: SceneUniforms; - layout(location=0) out vec3 vNormal; - - void main() { - vNormal = normal; - gl_Position = mvpMatrix * position; - } - `.trim(); - - const fs = ` - #version 450 + struct Varyings { + [[builtin(position)]] pos: vec4; + [[location(0)]] normal: vec3; + }; - layout(location=0) in vec3 vNormal; - - layout(location=0) out vec4 fragColor; - - void main() { - fragColor = vec4(abs(vNormal), 1.0); - } + [[stage(vertex)]] + fn main_vs( + [[location(0)]] position: vec4, + [[location(1)]] normal: vec3, + ) -> Varyings { + return Varyings(uniforms.mvpMatrix * position, normal); + } + + [[stage(fragment)]] + fn main_fs( + in: Varyings + ) -> [[location(0)]] vec4 { + return vec4(abs(in.normal), 1.0); + } `.trim(); + const shader_module = device.createShaderModule({ + code: shader, + }); const pipeline = device.createRenderPipeline({ layout: device.createPipelineLayout({bindGroupLayouts: [sceneUniformBindGroupLayout]}), vertex: { - module: device.createShaderModule({ - code: glslang.compileGLSL(vs, "vertex") - }), - entryPoint: "main", + module: shader_module, + entryPoint: "main_vs", buffers: [ { arrayStride: 12, @@ -191,10 +189,8 @@ ] }, fragment: { - module: device.createShaderModule({ - code: glslang.compileGLSL(fs, "fragment") - }), - entryPoint: "main", + module: shader_module, + entryPoint: "main_fs", targets: [{ format: presentationFormat }] @@ -222,7 +218,8 @@ const renderPassDescription = { colorAttachments: [{ view: context.getCurrentTexture().createView(), - loadValue: [0, 0, 0, 1] + loadValue: [0, 0, 0, 1], + storeOp: "store", }], depthStencilAttachment: { view: depthTexture.createView(), diff --git a/triangle.html b/triangle.html index ab4ed6d..52dd515 100644 --- a/triangle.html +++ b/triangle.html @@ -97,38 +97,32 @@ // Create render pipeline /////////////////////////// - const vs = ` - #version 450 - - layout(location=0) in vec4 position; - layout(location=1) in vec4 color; - - layout(location=0) out vec4 vColor; - - void main() { - vColor = color; - gl_Position = position; - } - `.trim(); - - const fs = ` - #version 450 - - layout(location=0) in vec4 vColor; - - layout(location=0) out vec4 fragColor; - - void main() { - fragColor = vColor; - } - `.trim(); + const shader = device.createShaderModule({ + code: ` + struct Varyings { + [[builtin(position)]] position: vec4; + [[location(0)]] color: vec4; + }; + + [[stage(vertex)]] + fn main_vs( + [[location(0)]] position: vec4, + [[location(1)]] color: vec4, + ) -> Varyings { + return Varyings(position, color); + } + + [[stage(fragment)]] + fn main_fs(in: Varyings) -> [[location(0)]] vec4 { + return in.color; + } + `.trim(), + }); const pipeline = device.createRenderPipeline({ vertex: { - module: device.createShaderModule({ - code: glslang.compileGLSL(vs, "vertex") - }), - entryPoint: "main", + module: shader, + entryPoint: "main_vs", buffers: [ { arrayStride: 8, @@ -149,10 +143,8 @@ ] }, fragment: { - module: device.createShaderModule({ - code: glslang.compileGLSL(fs, "fragment") - }), - entryPoint: "main", + module: shader, + entryPoint: "main_fs", targets: [{ format: presentationFormat }] @@ -172,7 +164,8 @@ const renderPass = commandEncoder.beginRenderPass({ colorAttachments: [{ view: textureView, - loadValue: [0, 0, 0, 1] + loadValue: [0, 0, 0, 1], + storeOp: "store", }] }); renderPass.setPipeline(pipeline);