import createRegl from "regl";
export default (canvas: HTMLCanvasElement) => {
const gl = canvas.getContext("webgl", {
antialias: true,
stencil: true,
})!;
const regl = createRegl({ gl });
regl.clear({
color: [0, 0, 0, 1],
depth: 1,
stencil: 1,
});
const draw1 = regl({
frag: `
precision mediump float;
varying vec4 color;
void main() {
gl_FragColor = color;
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec4 inColor;
varying vec4 color;
void main() {
color=inColor;
gl_Position = vec4(position, 0, 1);
}`,
attributes: {
position: [
[0, 1],
[-1, -1],
[1, -1],
].map((i) => i.map((j) => j / 2)),
inColor: [
[1, 0, 0, 1],
[1, 0, 0, 1],
[1, 0, 0, 1],
],
},
elements: [[0, 1, 2]],
});
const draw2 = regl({
frag: `
precision mediump float;
varying vec4 color;
void main() {
gl_FragColor = color;
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec4 inColor;
varying vec4 color;
void main() {
color=inColor;
gl_Position = vec4(position, 0, 1);
}`,
attributes: {
position: [
[0, -1],
[-1, 1],
[1, 1],
].map((i) => i.map((j) => j / 2)),
inColor: [
[1, 1, 0, 1],
[1, 1, 0, 1],
[1, 1, 0, 1],
],
},
elements: [[0, 1, 2]],
});
const drawMask = regl({
stencil: {
enable: true,
mask: 0xff,
func: {
cmp: "always",
ref: 1,
mask: 0xff,
},
op: {
fail: "replace",
zfail: "replace",
zpass: "replace",
},
},
colorMask: [false, false, false, false],
depth: {
enable: true,
mask: false,
},
});
const drawStenciled = regl({
stencil: {
enable: true,
mask: 0xff,
func: {
cmp: "equal",
ref: 1,
mask: 0xff,
},
},
blend: {
enable: true,
},
});
drawMask(() => {
draw1();
});
drawStenciled(() => {
draw2();
});
};
regl.frame(() => {
setupQuad(() => {
regl.draw()
updateLife()
})
})
To describe the parts above:setupQuad(...)
would actually invoke the draw command. However, since it's invoked with a callback, its state is applied and the callback is run, but no actual draw command is issued.regl.draw()
is a way around that which does explicitly issue setupQuad
's draw command even though it has a callback.updateLife
is called. Since it only has a fragment shader and framebuffer
, it uses all other state from the setupQuad
command (vertex shader, attributes, primitive, etc).import React from 'react'
import regl, { ReglFrame } from 'react-regl';
const Triangle = regl({
vert: `
precision mediump float;
attribute vec2 position;
void main () {
gl_Position = vec4(position, 0, 1);
}`,
frag:`
precision mediump float;
uniform vec4 color;
void main () {
gl_FragColor = color;
}`,
attributes:{
position: [
[-1, 0],
[0, -1],
[1, 1]
]
},
uniforms:{
color: regl.prop('color')
},
count: 3
});
const App = () => {
return (
<ReglFrame>
<Triangle color={[1, 0, 0, 1]} />
</ReglFrame>
);
};
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
hi guys, im looking to render points progressively, one at time kind of like https://p5js.org/examples/image-pointillism.html
Can someone point me towards the relevant docs I need to go through - am I going about it the wrong way if I do something like have a massive array of elements and just update the offset?