Popov72 · July 5, 2021 10:52
diff --git a/webgpuShadow.html b/webgpuShadow.html
 <html>

 <body>
    <script>
        const canvas = document.createElement('canvas');

        canvas.width = 600;
        canvas.height = 600;

        document.body.appendChild(canvas);

        async function init(canvas) {
            const vertexShaderGLSL = `#version 450
            const vec2 pos[3] = vec2[3](vec2(0.0f, 0.5f), vec2(-0.5f, -0.5f), vec2(0.5f, -0.5f));

            void main() {
                gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
            }
            `;

            const fragmentShaderGLSL = `#version 450
            layout(location = 0) out vec4 outColor;

            layout(set = 0, binding = 0) uniform samplerShadow shadowSampler0Sampler;
            layout(set = 0, binding = 1) uniform texture2D shadowSampler0Texture;
            #define shadowSampler0 sampler2DShadow(shadowSampler0Texture, shadowSampler0Sampler)

            void main() {
                float c = texture(shadowSampler0, vec3(0.5, 0.5, 0.0), 0.);

                outColor = vec4(c);//vec4(1.0, 0.0, 0.0, 1.0);
            }
            `;

            const glslangModule = await import('https://unpkg.com/@webgpu/[email protected]/dist/web-devel/glslang.js');
            const glslang = await glslangModule.default();

            const adapter = await navigator.gpu.requestAdapter();
            const device = await adapter.requestDevice();

            const context = canvas.getContext('gpupresent');

            const swapChainFormat = "bgra8unorm";

            const swapChain = context.configure({
                device,
                format: swapChainFormat,
                size: [600, 600, 1]
            });

            const bindGroupLayout = device.createBindGroupLayout({
                entries: [{
                    binding: 0,
                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
                    sampler: {
                        type: "comparison"
                    }
                }, {
                    binding: 1,
                    visibility: GPUShaderStage.VERTEX | GPUShaderStage.FRAGMENT,
                    texture: {
                        viewDimension: "2d",
                        sampleType: "depth",
                    }
                }]
            });

            const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });

            const pipeline = device.createRenderPipeline({
                layout: pipelineLayout,

                vertex: {
                    module: device.createShaderModule({
                        code: glslang.compileGLSL(vertexShaderGLSL, "vertex"),
                    }),
                    entryPoint: "main"
                },
                fragment: {
                    module: device.createShaderModule({
                        code: glslang.compileGLSL(fragmentShaderGLSL, "fragment"),
                    }),
                    entryPoint: "main",
                    targets: [{
                        format: swapChainFormat,
                    }],
                },

                primitiveTopology: "triangle-list",
            });

            const width = 1024, height = 1024;

            const textureExtent = {
                width,
                height,
                depth: 1
            };

            const gpuTexture = device.createTexture({
                size: textureExtent,
                dimension: "2d",
                format: "rgba8unorm",
                usage: GPUTextureUsage.COPY_DST | GPUTextureUsage.SAMPLED,
                sampleCount: 1,
                mipLevelCount: 1
            });

            const bindGroup = device.createBindGroup({
                layout: bindGroupLayout,
                entries: [
                    {
                        binding: 0,
                        resource: device.createSampler({
                            compare: "less-equal"
                        }),
                    },
                    {
                        binding: 1,
                        resource: gpuTexture.createView(),
                    }
                ]
            });

            function frame() {
                const commandEncoder = device.createCommandEncoder({});
                const textureView = context.getCurrentTexture().createView();

                const renderPassDescriptor = {
                    colorAttachments: [{
                        view: textureView,
                        loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
                        storeOp: "store"
                    }],
                };

                const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
                passEncoder.setPipeline(pipeline);
                passEncoder.setBindGroup(0, bindGroup);
                passEncoder.draw(3, 1, 0, 0);
                passEncoder.endPass();

                device.queue.submit([commandEncoder.finish()]);
            }

            return frame;
        }

        async function doIt() {
            const frame = await init(canvas);

            function doFrame(timestamp) {
                frame(timestamp);
                requestAnimationFrame(doFrame);
            }
            requestAnimationFrame(doFrame);
        }

        doIt();
    </script>
 </body>

 </html>
	<html>

	<body>
	<script>
	const canvas = document.createElement('canvas');

	canvas.width = 600;
	canvas.height = 600;

	document.body.appendChild(canvas);

	async function init(canvas) {
	const vertexShaderGLSL = `#version 450
	const vec2 pos[3] = vec2[3](vec2(0.0f, 0.5f), vec2(-0.5f, -0.5f), vec2(0.5f, -0.5f));

	void main() {
	gl_Position = vec4(pos[gl_VertexIndex], 0.0, 1.0);
	}
	`;

	const fragmentShaderGLSL = `#version 450
	layout(location = 0) out vec4 outColor;

	layout(set = 0, binding = 0) uniform samplerShadow shadowSampler0Sampler;
	layout(set = 0, binding = 1) uniform texture2D shadowSampler0Texture;
	#define shadowSampler0 sampler2DShadow(shadowSampler0Texture, shadowSampler0Sampler)

	void main() {
	float c = texture(shadowSampler0, vec3(0.5, 0.5, 0.0), 0.);

	outColor = vec4(c);//vec4(1.0, 0.0, 0.0, 1.0);
	}
	`;

	const glslangModule = await import('https://unpkg.com/@webgpu/[email protected]/dist/web-devel/glslang.js');
	const glslang = await glslangModule.default();

	const adapter = await navigator.gpu.requestAdapter();
	const device = await adapter.requestDevice();

	const context = canvas.getContext('gpupresent');

	const swapChainFormat = "bgra8unorm";

	const swapChain = context.configure({
	device,
	format: swapChainFormat,
	size: [600, 600, 1]
	});

	const bindGroupLayout = device.createBindGroupLayout({
	entries: [{
	binding: 0,
	visibility: GPUShaderStage.VERTEX \| GPUShaderStage.FRAGMENT,
	sampler: {
	type: "comparison"
	}
	}, {
	binding: 1,
	visibility: GPUShaderStage.VERTEX \| GPUShaderStage.FRAGMENT,
	texture: {
	viewDimension: "2d",
	sampleType: "depth",
	}
	}]
	});

	const pipelineLayout = device.createPipelineLayout({ bindGroupLayouts: [bindGroupLayout] });

	const pipeline = device.createRenderPipeline({
	layout: pipelineLayout,

	vertex: {
	module: device.createShaderModule({
	code: glslang.compileGLSL(vertexShaderGLSL, "vertex"),
	}),
	entryPoint: "main"
	},
	fragment: {
	module: device.createShaderModule({
	code: glslang.compileGLSL(fragmentShaderGLSL, "fragment"),
	}),
	entryPoint: "main",
	targets: [{
	format: swapChainFormat,
	}],
	},

	primitiveTopology: "triangle-list",
	});

	const width = 1024, height = 1024;

	const textureExtent = {
	width,
	height,
	depth: 1
	};

	const gpuTexture = device.createTexture({
	size: textureExtent,
	dimension: "2d",
	format: "rgba8unorm",
	usage: GPUTextureUsage.COPY_DST \| GPUTextureUsage.SAMPLED,
	sampleCount: 1,
	mipLevelCount: 1
	});

	const bindGroup = device.createBindGroup({
	layout: bindGroupLayout,
	entries: [
	{
	binding: 0,
	resource: device.createSampler({
	compare: "less-equal"
	}),
	},
	{
	binding: 1,
	resource: gpuTexture.createView(),
	}
	]
	});

	function frame() {
	const commandEncoder = device.createCommandEncoder({});
	const textureView = context.getCurrentTexture().createView();

	const renderPassDescriptor = {
	colorAttachments: [{
	view: textureView,
	loadValue: { r: 0.0, g: 0.0, b: 0.0, a: 1.0 },
	storeOp: "store"
	}],
	};

	const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
	passEncoder.setPipeline(pipeline);
	passEncoder.setBindGroup(0, bindGroup);
	passEncoder.draw(3, 1, 0, 0);
	passEncoder.endPass();

	device.queue.submit([commandEncoder.finish()]);
	}

	return frame;
	}

	async function doIt() {
	const frame = await init(canvas);

	function doFrame(timestamp) {
	frame(timestamp);
	requestAnimationFrame(doFrame);
	}
	requestAnimationFrame(doFrame);
	}

	doIt();
	</script>
	</body>

	</html>