<!doctype html >
<html class="reftest-wait" >
<head >
<meta charset="utf-8" />
</head >
<body >
<canvas id="canvas" width=512 height=512 ></canvas >
</body >
<script >
(async function() {
try {
var triangleVertWGSL = `@vertex
fn main(
@builtin(vertex_index) VertexIndex : u32
) -> @builtin(position) vec4f {
var pos = array<vec2f, 3 >(
vec2(0 .0 , 0 .5 ),
vec2(-0 .5 , -0 .5 ),
vec2(0 .5 , -0 .5 )
);
return vec4f(pos[VertexIndex], 0 .0 , 1 .0 );
}
`;
var redFragWGSL = `@fragment
fn main() -> @location(0 ) vec4f {
return vec4(1 .0 , 0 .0 , 0 .0 , 1 .0 );
}`;
const canvas = document.querySelector('canvas' );
const adapter = await navigator.gpu?.requestAdapter({ });
const device = await adapter?.requestDevice();
const context = canvas .getContext('webgpu' );
const devicePixelRatio = window.devicePixelRatio;
canvas .width = canvas .clientWidth * devicePixelRatio;
canvas .height = canvas .clientHeight * devicePixelRatio;
const presentationFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
device,
format: presentationFormat,
});
const pipeline = device.createRenderPipeline({
layout: 'auto' ,
vertex: {
module: device.createShaderModule({
code : triangleVertWGSL,
}),
},
fragment: {
module: device.createShaderModule({
code : redFragWGSL,
}),
targets: [
{
format: presentationFormat,
},
],
},
primitive: {
topology: 'triangle-list' ,
},
});
const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor = {
colorAttachments: [
{
view: textureView,
clearValue: [0 , 0 , 0 , 1 ],
loadOp: 'clear' ,
storeOp: 'store' ,
},
],
};
const commandEncoder = device.createCommandEncoder();
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.setPipeline(pipeline);
passEncoder.draw(3 );
passEncoder.end();
device.queue.submit([commandEncoder.finish()]);
await device.queue.onSubmittedWorkDone();
requestAnimationFrame(() => {
requestAnimationFrame(() => document.documentElement.className = '' );
});
} catch (error) {
console.error(error);
document.getElementById('canvas' ).style .display = 'none' ;
document.body .append(error.toString());
document.documentElement.className = '' ;
}
})();
</script >
</html >
Messung V0.5 in Prozent C=96 H=99 G=97
¤ Dauer der Verarbeitung: 0.2 Sekunden
¤
*© Formatika GbR, Deutschland