Questions tagged [regl]

For questions about regl the library and its usage

From the earlier regl front page (now see https://regl-project.github.io/regl/):

regl is a functional abstraction for WebGL.

Using regl is easier than writing raw WebGL code because you don't need to manage state or binding. It's also lighter and faster and has less overhead than many existing 3d frameworks. And it has a functional data-driven style inspired by react.

19 questions
5
votes
2 answers

2D zoom to point in webgl

I'm trying to create a 2D graph visualization using WebGL (regl, to be more specific). With my current implementation I can already see the force layout being applied to each node, which is good. The problem comes when I try to zoom with respect to…
5
votes
2 answers

Blending anti-aliased circles with regl

I'm rendering circles using regl, and have three goals: The canvas should be transparent, showing HTML content behind it. Circles should be antialiased smoothly. Overlapping circles should look reasonable (blend colors, no corners showing) So far,…
Don McCurdy
  • 10,975
  • 2
  • 37
  • 75
4
votes
1 answer

Why is this image not mirrored vertically?

I'm finding myself a bit lost amongst the many many sign and domain conventions used in webGl. Take a gander at this regl example (it shows the baboon test image). Here's what I understand of it: No primitive is specified; It likely infers…
Exp HP
  • 695
  • 6
  • 24
3
votes
1 answer

WebGL interpolate with a reference color inside a triangle

Using regl, I am trying to draw a triangle with WebGL where I can define a color at some reference point inside the triangle, and have the color of the other pixels be a function of their distance to this point. So far, it only works when this…
Ren
  • 35
  • 4
3
votes
1 answer

Trying to draw shapes in screen-space coordinates using an orthographic projection with WebGL (regl)

Using regl I'm trying to implement a very simple drawRect() function that will eventually be able to pass an x, y, width, height in screen space (with origin 0,0 at top left corner of the screen) Here's what I have so…
Jonathan Dumaine
  • 5,575
  • 3
  • 38
  • 50
3
votes
0 answers

Long GPU frames – Chrome devtools performance monitor

I'm running into an issue with WebGL in Google Chrome (61.0) with really long frames that occur around once every 60-90 seconds on my machine. Devtools logs these frames as GPU activity, but what is actually causing these frames to be long is opaque…
Jay
  • 309
  • 3
  • 13
2
votes
0 answers

I need help programming the Heat Equation in REGL (WebGL Library)

I am new to how WEBGL works so I do not understand why the Heat Equation is not working like it is supposed to. In my fragment shader, I used a sampler 2D, prevState, and a texture coordinate, uv. With the heat equation having the formula, U(i,j) +=…
Juggernaut
  • 21
  • 1
2
votes
1 answer

Cannot plot points in Z direction using regl

I am starting with regl and I am trying to make a small demo for plotting points in all three axis. I have used this link to start with. In the example above the points were initialized as const points = d3.range(numPoints).map(i => ({ …
Kenneth Joseph Paul
  • 2,171
  • 2
  • 14
  • 27
1
vote
1 answer

How can I put a Regl/WebGL canvas into a HTML div container

I'm very new to web design/javascript etc so please forgive rookie level knowledge. I'm developing some data visualisations using Regl to show a high volume of points on screen using the fantastic work of Jim Vallandingham and Peter Beshai as a…
joe_w
  • 43
  • 3
1
vote
0 answers

Visual artifacts for mesh with large coordinates in WebGL (Regl)

When rendering a mesh in WebGL with Regl I noticed visual artifacts start to appear as the mesh increases in size in terms of its coordinates. See the live example at https://jsfiddle.net/yxzuo2aq/2/ or the screenshot below. Visually nothing should…
F Lekschas
  • 12,481
  • 10
  • 60
  • 72
1
vote
1 answer

Regl color and alpha blending of primitives

I am trying to figure out how to achieve color and alpha blending between primitives using Regl. I know Regl command's have a blend property and I've tried replicating the following webgl settings that do the…
F Lekschas
  • 12,481
  • 10
  • 60
  • 72
0
votes
1 answer

How do you get syntax highlighting in Visual Studio Code in string literal for glsl shader?

I'm using Regl which integrates glsl vertex and fragment shaders as strings within a javascript file. I'd like to have syntax highlighting in Visual Studio Code apply to the glsl code within the strings, e.g.: var regl = createREGL(); var…
snibbe
  • 2,715
  • 1
  • 27
  • 34
0
votes
1 answer

Is my webgl FBO color attachment being cleared?

I'm trying to render something to texture using a library called regl. I manage to render an effect using two render targets and i see the result in one. Capturing the frame after i've done rendering to the target looks like this, and it represents…
pailhead
  • 5,162
  • 2
  • 25
  • 46
0
votes
1 answer

Safari 14 WebGL alpha blending with framebuffer rendering seems broken

I ran into a very strange issue recently and I am curious if anyone else came across this issue or if someone might spot an issue with my WebGL alpha blending function. When having alpha blending enabled and combined with framebuffer rendering, it…
F Lekschas
  • 12,481
  • 10
  • 60
  • 72
0
votes
1 answer

How to write to a framebuffer in regl?

I am trying to update the texture inside a framebuffer in REGL. But for some reason, it does not update the framebuffer. here is the full code: const regl = createREGL({ extensions: 'OES_texture_float' }) const initialTexture =…
Peter Goes
  • 459
  • 4
  • 12
1
2