/
script.js
65 lines (55 loc) · 2.15 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
const script = async () => {
// Canvas setup
const canvas = document.createElement(('canvas'));
// Create WebGL2ComputeRenderingContext
const context = canvas.getContext('webgl2-compute');
if (!context) {
document.body.className = 'error';
return;
}
document.getElementById('context').innerText = 'WebGL2ComputeRenderingContext create: success';
// ComputeShader source
// language=GLSL
const computeShaderSource = `#version 310 es
layout (local_size_x = 8, local_size_y = 1, local_size_z = 1) in;
layout (std430, binding = 0) buffer SSBO {
float data[];
} ssbo;
void main() {
uint threadIndex = gl_GlobalInvocationID.x;
ssbo.data[threadIndex] = float(threadIndex);
}
`;
// create WebGLShader for ComputeShader
const computeShader = context.createShader(context.COMPUTE_SHADER);
context.shaderSource(computeShader, computeShaderSource);
context.compileShader(computeShader);
if (!context.getShaderParameter(computeShader, context.COMPILE_STATUS)) {
console.log(context.getShaderInfoLog(computeShader));
return;
}
// create WebGLProgram for ComputeShader
const computeProgram = context.createProgram();
context.attachShader(computeProgram, computeShader);
context.linkProgram(computeProgram);
if (!context.getProgramParameter(computeProgram, context.LINK_STATUS)) {
console.log(context.getProgramInfoLog(computeProgram));
return;
}
// input data
const input = new Float32Array(8);
document.getElementById('input').innerText = `input: [${input}]`;
// create ShaderStorageBuffer
const ssbo = context.createBuffer();
context.bindBuffer(context.SHADER_STORAGE_BUFFER, ssbo);
context.bufferData(context.SHADER_STORAGE_BUFFER, input, context.DYNAMIC_COPY);
context.bindBufferBase(context.SHADER_STORAGE_BUFFER, 0, ssbo);
// execute ComputeShader
context.useProgram(computeProgram);
context.dispatchCompute(1, 1, 1);
// get result
const result = new Float32Array(8);
context.getBufferSubData(context.SHADER_STORAGE_BUFFER, 0, result);
document.getElementById('output').innerText = `output: [${result}]`;
};
window.addEventListener('DOMContentLoaded', script);