1_13_indices/index.html

<html>

<body>
    <canvas id="canvas" width="640" height="480"></canvas>
</body>
<script src="../utils/utils.js"></script>
<script src="../utils/gl-matrix.js">
    //index buffer
</script>
<script id="shader" type="wgsl">
// Vertex shader

@group(0) @binding(0)
var<uniform> transform: mat4x4<f32>;
@group(0) @binding(1)
var<uniform> projection: mat4x4<f32>;

struct VertexOutput {
    @builtin(position) clip_position: vec4<f32>
};

@vertex
fn vs_main(
    @location(0) inPos: vec3<f32>
) -> VertexOutput {
    var out: VertexOutput;
    out.clip_position = projection * transform * vec4<f32>(inPos, 1.0);
    return out;
}

// Fragment shader

@fragment
fn fs_main(in: VertexOutput,  @builtin(front_facing) face: bool) -> @location(0) vec4<f32> {
    if (face) {
        return vec4<f32>(0.0, 0.0, 1.0 ,1.0);
    }
    else {
        return vec4<f32>(0.0, 1.0, 0.0 ,1.0);
    }
}

</script>

<script>
    //index
    async function webgpu() {
        if (!navigator.gpu) {
            showWarning("WebGPU support is not available. A WebGPU capable browser is required to run this sample.");
            throw new Error("WebGPU support is not available");
        }
        const adapter = await navigator.gpu.requestAdapter();
        console.log(adapter);

        let device = await adapter.requestDevice();
        console.log(device);

        const context = configContext(device, canvas);

        let shaderModule = shaderModuleFromCode(device, 'shader');

        const positionAttribDesc = {
            shaderLocation: 0, // @location(0)
            offset: 0,
            format: 'float32x3'
        };

        const positionBufferLayoutDesc = {
            attributes: [positionAttribDesc],
            arrayStride: 4 * 3, // sizeof(float) * 3
            stepMode: 'vertex'
        };
//cs_start: index_buffer_vertex_pool
        const positions = new Float32Array([
            -100.0, 100.0, 0.0,
            -100.0, 100.0, 200.0,

            100.0, 100.0, 0.0,
            100.0, 100.0, 200.0,

            100.0, -100.0, 0.0,
            100.0, -100.0, 200.0,

            -100.0, -100.0, 0.0,
            -100.0, -100.0, 200.0,

        ]);

        const positionBuffer = createGPUBuffer(device, positions, GPUBufferUsage.VERTEX);
//cs_end: index_buffer_vertex_pool
//cs_start: index_buffer_index_buffers
        const indices = new Uint16Array([0, 1, 2, 3, 4, 5, 6, 7, 0, 1]);

        const indexBuffer = createGPUBuffer(device, indices, GPUBufferUsage.INDEX);

        const indices2 = new Uint16Array([3, 1, 5, 7]);

        const index2Buffer = createGPUBuffer(device, indices2, GPUBufferUsage.INDEX);
//cs_end: index_buffer_index_buffers
        let translateMatrix = glMatrix.mat4.lookAt(glMatrix.mat4.create(),
            glMatrix.vec3.fromValues(300, 300, 300), glMatrix.vec3.fromValues(0, 0, 0), glMatrix.vec3.fromValues(0.0, 0.0, 1.0));

        let projectionMatrix = glMatrix.mat4.perspective(glMatrix.mat4.create(),
            1.4, 640.0 / 480.0, 0.1, 1000.0);

        let translateMatrixUniformBuffer = createGPUBuffer(device, translateMatrix, GPUBufferUsage.UNIFORM);

        let projectionMatrixUniformBuffer = createGPUBuffer(device, projectionMatrix, GPUBufferUsage.UNIFORM);

        let uniformBindGroupLayout = device.createBindGroupLayout({
            entries: [
                {
                    binding: 0,
                    visibility: GPUShaderStage.VERTEX,
                    buffer: {}
                },
                {
                    binding: 1,
                    visibility: GPUShaderStage.VERTEX,
                    buffer: {}
                }
            ]
        });

        let uniformBindGroup = device.createBindGroup({
            layout: uniformBindGroupLayout,
            entries: [
                {
                    binding: 0,
                    resource: {
                        buffer: translateMatrixUniformBuffer
                    }
                },
                {
                    binding: 1,
                    resource: {
                        buffer: projectionMatrixUniformBuffer
                    }
                }
            ]
        });

        const pipelineLayoutDesc = { bindGroupLayouts: [uniformBindGroupLayout] };
        const layout = device.createPipelineLayout(pipelineLayoutDesc);

        const colorState = {
            format: 'bgra8unorm'
        };

        const pipelineDesc = {
            layout,
            vertex: {
                module: shaderModule,
                entryPoint: 'vs_main',
                buffers: [positionBufferLayoutDesc]
            },
            fragment: {
                module: shaderModule,
                entryPoint: 'fs_main',
                targets: [colorState]
            },
//cs_start: index_buffer_primitive
            primitive: {
                topology: 'triangle-strip',
                stripIndexFormat: 'uint16',
                frontFace: 'ccw',
                cullMode: 'none'
            },
//cs_end: index_buffer_primitive
            depthStencil: {
                depthWriteEnabled: true,
                depthCompare: 'less',
                format: 'depth24plus-stencil8'
            }
        };

        pipeline = device.createRenderPipeline(pipelineDesc);

        // 🤔 Create Depth Backing
        const depthTextureDesc = {
            size: [canvas.width, canvas.height, 1],
            dimension: '2d',
            format: 'depth24plus-stencil8',
            usage: GPUTextureUsage.RENDER_ATTACHMENT
        };

        let depthTexture = device.createTexture(depthTextureDesc);
        let depthTextureView = depthTexture.createView();

        let colorTexture = context.getCurrentTexture();
        let colorTextureView = colorTexture.createView();

        let colorAttachment = {
            view: colorTextureView,
            clearValue: { r: 1, g: 0, b: 0, a: 1 },
            loadOp: 'clear',
            storeOp: 'store'
        };

        const depthAttachment = {
            view: depthTextureView,
            depthClearValue: 1,
            depthLoadOp: 'clear',
            depthStoreOp: 'store',
            stencilClearValue: 0,
            stencilLoadOp: 'clear',
            stencilStoreOp: 'store'
        };

        const renderPassDesc = {
            colorAttachments: [colorAttachment],
            depthStencilAttachment: depthAttachment
        };
        commandEncoder = device.createCommandEncoder();
//cs_start: index_buffer_command_submission
        passEncoder = commandEncoder.beginRenderPass(renderPassDesc);
        passEncoder.setViewport(0, 0, canvas.width, canvas.height, 0, 1);
        passEncoder.setPipeline(pipeline);
        passEncoder.setBindGroup(0, uniformBindGroup);
        passEncoder.setVertexBuffer(0, positionBuffer);
        passEncoder.setIndexBuffer(indexBuffer, 'uint16');
        passEncoder.drawIndexed(10);
        passEncoder.setIndexBuffer(index2Buffer, 'uint16');
        passEncoder.drawIndexed(4);
        passEncoder.end();
//cs_end: index_buffer_command_submission
        device.queue.submit([commandEncoder.finish()]);
    }

    webgpu();
</script>

</html>