Questions tagged [webgl]

WebGL extends the capability of the HTML canvas element to allow it to render accelerated 3D graphics in any compatible web browser.

Filter by
Sorted by
Tagged with
0
votes
0answers
60 views

What's The Math Behind This Cloth Animation?

I progammed a simple cloth animation. Initially I tried to implement Hooke's law, but it wasn't numerically stable, presumably because I used explicit Euler. Anyway, I came up with something (WebGL2 ...
0
votes
0answers
11 views

How to add a second calculation to an already working transform feedback webgl2 code?

I'm doing a project that involves transform feedback and WebGL2. I was able to make a transform feedback work using two buffers, to calculate an update in 3d positions of particles. But now I'd like ...
0
votes
1answer
22 views

After Effects Animation to code [closed]

What is the best method of translating After Effects Animation to code? Is Bodymovin Lottie still viable in 2021?
0
votes
1answer
145 views

WebGL Can't render anything, wrong projection?

I'm trying to understand and learn WebGL and computer graphics from the bottom up, that is why I started to work on my own little library for that. I've spent a couple of days looking for a right ...
0
votes
1answer
58 views

Fastest Simulation Of Mass Spring Systems

I'd like to simulate a 4-dimensional cloth in the web browser, since browsers don't offer great ressources for numerical computation, I'd like to know which algorithm uses the least amount of ...
0
votes
0answers
21 views

How to draw a pdb 3d structure in webgl?

I am trying to create a 3d structure in webgl using 3d coordinates from a pdb file mentioned below: https://www.rcsb.org/structure/1RE2 I don't know which one is the appropriate one, so i used gl....
0
votes
1answer
217 views

What is wrong with my metallic PBR shader?

I feel like my light conservation math isn't correct, but I am not sure which part is wrong. Is reflected light supposed to influence the diffuse light? Does metalness only affect the reflected ...
1
vote
1answer
341 views

Mimic shadertoy in WebGL

I was following this guide for drawing circles using shadertoy. Now I am trying to mimic the examples behaviour in WebGL. Here is a working shadertoy example I try to mimic. The code is not mine, see ...
0
votes
1answer
70 views

Let GPU write to itself

As someone who is trying to dive into WebGL for parallelizing simulations, or Machine Learning, or typical IIR filters I've come to realize that for everything that I want to do requires the GPU to ...
1
vote
1answer
170 views

When unsetting a VAO, should you also unbind the associated VBOs?

I'm working with a js/wasm/c++ program that uses object oriented programming when updating the OpenGL state. There are corresponding c++ classes for VBOs (vertex buffer) and VAOs (vertex array). ...
0
votes
1answer
193 views

Early depth test in WebGL

I understand that in OpenGL early depth test can be performed in the rasterizer (before running the fragment shader), but is it the same case for WebGL? If so, how is early depth test enabled in WebGL?...
2
votes
1answer
211 views

Does WebGL 2 support linear depth texture sampling?

With WebGL 1 we can use WEBGL_draw_buffers extension which lets us use a texture as the depth attachment on the frame buffer. And we can chose to use LINEAR or NEAREST as the filtering method. ...
4
votes
3answers
284 views

Visual Artifact in Wireframe Grid/Plane

I have a simplistic shader program that adds reference coordinate planes to a scene. These planes are drawn as intersecting lines. When viewed at a distance, a visual artifact is created; there is ...
0
votes
1answer
5k views

How to load a model in .json in three.js

I need to load a model "somemodel.json" into my "movie.js".Can someone tell me where i am going wrong.I followed the steps given here. index.html ...
4
votes
1answer
641 views

Computing a lookAt matrix by passing a vec3 to a camera object

I am following this tutorial on how to implement a first person camera. So far I was able to implement the entire (C++) class in TypeScript and it works as it is supposed to. Problem What I was not ...
2
votes
0answers
109 views

Why there are calculation differences in WebGL and OpenGL

I am currently implementing the Mandelbrot fractal on the GPU. I wrote two programs: the first in OpenGL (desktop C++ application) and the second in WebGL (static webpage). The two programs use almost ...
2
votes
0answers
95 views

Calculate the distance between two 3d points in screen coordinates

Given the Point A with the coordinates gl_FragCoord.xy, I have to find the distance to the Center of the cube face to which it belongs in screen coordinates. ...
-2
votes
1answer
382 views

How can I make a cube with faces of different colors? Webgl

I have to draw cubes with faces of different colors (each per face), but I don't know how to accomplish this task: I draw cubes using CPU and GPU meshes (no vertexBuffer or three.js "style") and I don'...
1
vote
2answers
519 views

WebGL - issues doing a simple texture downsample

I'm working on an image processing app which uses WebGL to apply shaders to a bunch of input photos. At one point in the algorithm, I need to create some image pyramids where I downscale the input ...
0
votes
1answer
213 views

Using depth texture to mask local pixels

I have a scene with camera facing billboards drawn with depth write off so they appear on top of other objects. I would like to draw each sprite so that any obscured pixels are drawn with a very low ...
5
votes
1answer
312 views

Problems rendering a plane via `drawElements`

I am generating plane vertices where the y values are generated by a heightmap (noise) algorithm. This is how I produce my vertex array: ...
2
votes
1answer
46 views

Correctness or otherwise of the procedure for generating an orbiting camera in WebGl

I have to create a orbiting camera. I created the model of sun (a sphere) around (0,0,0) , triangulated and Phong shaded it. I would have a camera that goes around the sun thus an orbiting camera and ...
1
vote
1answer
309 views

Gravitational calculation of a particle via GLSL / WebGL

I have a running particle system which emits particles in a given radius. Now I want to add some gravity to it. The particles and velocities of each particle is saved in a 2D Texture, now I want ...
1
vote
1answer
71 views

`worldViewProjection` doesn't work for a single component

I have implemented a couple of classes which are drawn using shaders where the vertex position is always calculated the same way: ...
4
votes
1answer
483 views

What actually happens in frame buffer when an image or document is scrolled?

What actually happens inside computer when the text, pdf, jpeg, ms-word or any other document(file) is scrolled? Does it generate a new bitmap image sufficient for the screen to display even for tiny ...
2
votes
1answer
317 views

Triangulation of vertices of an ellipsoid

I have the parametric model of an ellipsoid like this: \begin{cases} x=a_1\,cos \,\eta \:cos\,\omega & -\pi\leq\omega\leq\pi \\𝑦 = 𝑎_2\,cos\,\eta\:sin\,\omega \\ z=a_3\,sin \,\eta & -\frac{...
2
votes
2answers
245 views

What is the technique to generate an oblique 3d cone?

Oblique meaning not a regular cone; its apex makes an angle to the base. An alternate way of visualizing this: consider a sphere centered at the origin. The sphere traces a circle on the XY-plane. ...
2
votes
0answers
103 views

Is it worth caching uniform values?

Consider something like the following for webgl (untested but should work): ...
5
votes
1answer
152 views

Unable to render a Waveront model in WebGL2

I am following the WebGL2Fundametals tutorial. Using some sample (cube) data I was able to successfully call gl.drawElements(); using index, normal and geometry ...
4
votes
1answer
252 views
1
vote
0answers
325 views

How does this function calculate normals of a mesh? [closed]

I have trouble understanding the following Javascript code. It calculates, given a mesh described by its vertices vs and indices ...
1
vote
1answer
264 views

Inverse matrix order of operation

If I have a rotation, $A$, and a translation, $B$, which I multiply like so $C = AB$ Does the inverse of $C$ not only inverse the magnitudes of $A$ and $B$ but also become the reverse of operations? ...
1
vote
1answer
496 views

How does notch's new graphics engine work?

@notch has recently been posting on an engine he is developing. He claims that it is voxel-based and supports deformable terrain, with a render distance of almost 1000 000 voxels and real-time ...
1
vote
0answers
418 views

3D model outline using stencil buffer

I'm trying to outline a 3D model in WebGL. I've tried using a stencil buffer techique with glLineWidth and glPolygonMode. However, Mozilla's WebGL reference says that the minimum and maximum widths of ...
5
votes
3answers
3k views

Is it possible to create minimal glTF files with vertex and index buffers?

I am currently looking into glTF to use as a transfer format for my WebGL project. I already have the geometries I wish to render on my WebGL client available as preprocessed vertex and index buffers (...
4
votes
1answer
109 views

Role of gl.vertexAttrib

I'm re-learning WebGL, and I stumbled upon gl.vertexAttribPointer and gl.vertexAttrib. To my knowledge, gl.vertexAttribPointer tells the GPU how the data in the currently binded buffer relates to the ...
6
votes
1answer
512 views

Fading particles and transition

I'm trying to render a particle simulation. I want each particle to leave a trace. To achieve this I'm using a framebuffer and two textures. On each frame the algorithm goes like this: Render to a ...
5
votes
1answer
289 views

Drawing a cube a million times

I need to build terrain using one cube with dimensions 1x1x1, the coordinates are provided in a .txt file and there are about 11M triplets. The problem is that using my current code I can only draw ...
5
votes
1answer
1k views

What happens to float values written to UNSIGNED_BYTE texture?

This is more a theoretical question. I'm wondering what happens when I write float values into an empty RGBA texture of type gl.UNSIGNED_BYTE in WebGL 1.0. ...
3
votes
1answer
89 views

Need help reasoning about video oscillation >60hz

I want to make a basic video oscillator for the web. What I want to do is basically illustrated in a tutorial for Lumen: essentially, I want to define an oscillator to turn on and off a color signal ...
2
votes
0answers
157 views

WebGL- moving an object in the line of sight

I defined my Model-View Matrix defining a function lookAt that represents the eye of the camera, the position of the object that I'm representing and the "up" vector of the camera. How can I move the ...
0
votes
0answers
99 views

Is there a concept for a cross platform GUI?

I have developed a C++ core application, which needs a relatively simple GUI, like a mind map. Now I wish to find a multipurpose solution for the visualization. So far my effort: three.js (webgl) in ...
3
votes
1answer
2k views

WebGL: Why are my textures black?

I am trying to write a simple WebGL script to display a pyramid with a brick texture and Phong lighting. The lighting works fine but when I incorporate the texture, the pyramid turns black. I've ...
0
votes
2answers
3k views

Emission of light from texture on WebGL

I have to build a texture of a cube that models the emission of light by the object. Any tips? I really don't know where to start.
1
vote
0answers
564 views

WebGL Spotlight

I have to add a spotlight to my rotating cube so this is my code: HTML ...
5
votes
1answer
2k views

How to know when rendering is complete in WebGL?

gl.drawArrays()/gl.drawElements() initiates a drawing and returns immediately. There is also (non-recommended) gl.finish() that (theoretically) blocks execution until rendering is complete. Is there ...
2
votes
1answer
317 views

Easing curves on the GPU?

I was thinking that I could pass a timestamp in (from requestAnimationFrame) to the vert shader, and just have my easing curves in the GPU instead of using (for example) Tween.js from the outside. Is ...
1
vote
0answers
165 views

How To Generate High Quality Bitmap From Canvas For WebGL Texture

I would like to generate a bitmap for use with a webgl texture generated from a 2d canvas, but I don't think I am doing it correctly. I know how to display the contents of one canvas into another by ...
4
votes
2answers
451 views

Can a scene graph be stored in the GPU?

I am starting to learn WebGL. Can a scene graph be stored in the GPU? Or is that type of thing more for the main thread (or webworker)? For example, I want to calculate some layout, and apply it as a ...
2
votes
0answers
467 views

Creating Signed Distance Fields Images On The Fly For WebGL Application

I am working on a "CAD" like program in HTML5 that requires drawing many thousands (700,000+) of images on the screen. I think, "fortunately" the many images are replicated uses of a unique set of ...