How can I achieve mask use regl? I find some blog, but I can't understand... o(╥﹏╥)o
http://www.jiazhengblog.com/blog/2016/04/05/2941/
https://observablehq.com/@spattana/stenciling-example
http://www.jiazhengblog.com/blog/2016/04/05/2941/
https://observablehq.com/@spattana/stenciling-example
this is my code, but it not work ...
Is there a simple example use regl?
Is there a simple example use regl?
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();
});
};
I understand that we render alternatively from one to the other buffer at each tick, but I do not understand what setupQuad() does, and why we need two regl()-s ; why things cannot be done with only one regl()
links:
Demo: https://regl-project.github.io/regl/www/gallery/life.js.html
Source: https://github.com/regl-project/regl/blob/gh-pages/example/life.js
Listed at the top of the "fbo" category of the gallery
Demo: https://regl-project.github.io/regl/www/gallery/life.js.html
Source: https://github.com/regl-project/regl/blob/gh-pages/example/life.js
Listed at the top of the "fbo" category of the gallery
regl.frame(() => {
setupQuad(() => {
regl.draw()
updateLife()
})
})- regl.frame sets up a loop that executes every frame
- setupQuad invokes the command created above. The command includes a vertex and fragment shader as well as attribute data
- If invoked alone or with just an object of props,
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. - In an regl-project/regl#596,
regl.draw()is a way around that which does explicitly issuesetupQuad's draw command even though it has a callback. - Finally,
updateLifeis called. Since it only has a fragment shader andframebuffer, it uses all other state from thesetupQuadcommand (vertex shader, attributes, primitive, etc).
@ahaoboy Here's your code copied into a codepen: https://codepen.io/rsreusser/pen/wvoXYPv?editors=1010 Is it possible to clarify the expected result?
I see a diamond if I clear the stencil to 0 at the top, but I wasn't certain if that's what I was looking for or not
I have published a new major version of react-regl@4.0.0 that introduces a new novel 'deferred' interface. This enables you to pass traditional regl draw commands seamlessly as react components like:
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')
);
I am using this in http://crashgiants.io/ to render the same regl draw commands in react contexts and in traditional "raw regl" rendering
This update also moves the project to typescript
I'm going to revert the uniform array changes
sorry everyone, been very hectic and I made a mistake
@rreusser It's amazing how often I'm learning about something and see you did an implementation before. I've been exploring rendering implicit surfaces with Monte Carlo techniques and found this from you https://www.shadertoy.com/view/wdffWj. I was wondering if you could get me started in reimplementing this in regl? I'm still fairly new to shaders and am having a bit of trouble with the translation. It's for this sort of task https://fab.cba.mit.edu/classes/865.18/people/Amira/Mods_Axis/index_frep.html
@adnan-wahab I think there are a lot of different use cases, but I had really good luck with gephi: https://gephi.org/
I had just enough data (which wasn't a lot) that basically the only constraint for me was that the the library have good enough algorithms to untangle the layout. I couldn't find a js library that really nailed that, making any nicer UI features not very useful. But again, that may be very specific to particular cases.
@leoccnts_gitlab this doesn't do multi-pass and it's not regl, but this might be a nice template for a shadertoy-like interface: https://observablehq.com/@mbostock/shader
1 reply
I need to update the dns records
weird when i dont clear the screen it like blends and bleeds everywhere. but if i do clear it, the background eats my pointcloud... but only on the second frame :o
omg it works when i clear the depth buffer before drawing to FBO wowwww amazing so cool
anyone run into an issue where using a "float" (32 bit) texture in a framebuffer on mobile seems to result in a "half float" (16 bit) texture, but when run on a desktop it correctly uses the full 32 bits? changing it to "half float" makes it the same behavior on both. tried checking webglreport.com and didn't see any differences in float, half float, or general precision metrics. may very well be doing something wrong, I'm a bit new to webgl stuff, but figured I'd see if there might possibly be a known issue there either with mobile browser webgl implementations, mobile graphics cards, or regl
webglstats would probably have told us but it's gone! :-(
Hm, https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices says “If you have a float texture, iOS requires that you use highp sampler2D foo;, or it will very painfully give you lowp texture samples!”
ahh that sounds extremely promising, lowp texture samples would very much explain what I'm seeing. I'll report back if I can confirm when I get time! And yes, the exact same thing happened to me WRT mediump/highp on the desktop... a somewhat understandable "feature" but ugh it makes debugging way more complicated :triumph: thanks again for the tip!
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?