0.2
some functions that provide a quick shortcut to writing gpu code in javascript
Repository
Current version released
2 years ago
Dependencies
deno.land/x

1. import
import {
f_o_gpu_gateway, f_o_gpu_gateway__from_simple_fragment_shader, f_render_o_gpu_gateway
}
from './client.module.js'
2. create a canvas
let o_canvas = document.createElement('canvas');
o_canvas.width = window.innerWidth
o_canvas.height = window.innerHeight
document.body.appendChild(o_canvas);
3. create the gpu gateway
let o_gpu_gateway = f_o_gpu_gateway(
o_canvas,
`#version 300 es
in vec4 a_o_vec_position_vertex;
out vec2 o_trn_nor_pixel;
void main() {
gl_Position = a_o_vec_position_vertex;
o_trn_nor_pixel = (a_o_vec_position_vertex.xy + 1.0) / 2.0; // Convert from clip space to texture coordinates
}`,
`#version 300 es
precision mediump float;
// incoming variables
in vec2 o_trn_nor_pixel;
// outgoing variables
out vec4 fragColor;
void main() {
fragColor = vec4(
vec3(length(o_trn_nor_pixel)),
1
);
}
`,
)
4. render the gpu gateway
f_render_o_gpu_gateway(
o_gpu_gateway
);
IALAF (i am lazy as f$#@) functions
this is one of the shortest way to get a shader!
document.body.appendChild(f_o_gpu_gateway__from_simple_fragment_shader(
`#version 300 es
precision mediump float;
in vec2 o_trn_nor_pixel;
out vec4 fragColor;
void main() {
float n = length(
o_trn_nor_pixel-.5
);
fragColor = vec4(
vec3(sin(n*33.)),
1
);
}
`,
500,
500
).o_canvas)
errors,
upon an error you will get a rustlike error output for example in the following we have multiple errors
let o = f_o_gpu_gateway__from_simple_fragment_shader(
`#version 300 es
precision mediump float;
in vec2 o_trn_nor_pixel;
out vec4 fragColor;
void main() {
float n = length(
o_trn_nor_pixel-vec3(.5) // we cannot subtract a vec3 from vec2
);
fragColor = vec4(
vec3(sin(n_min*33.)), // use of undeclared identifier
1
);
}}
`,
500,
500
);
document.body.appendChild(o.o_canvas);
the output will be like
// ERROR '-'
// |
// 7 | o_trn_nor_pixel-vec3(.5) // we cannot subtract a vec3 from vec2
// | ^ wrong operand types - no operation '-' exists that takes a left-hand operand of type 'in mediump 2-component vector of float' and a right operand of type 'const 3-component vector of float' (or there is no acceptable conversion)
// ERROR 'n_min'
// |
// 10 | vec3(sin(n_min*33.)), // use of undeclared identifier
// | ^^^^^ undeclared identifier
// ERROR '}'
// |
// 13 | }}
// | -- syntax error