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);