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
0 answers
25 views

Advice on Implementing View-Dependent LOD and Progressive Rendering for Real-Time Visualization

I'm working on a project that involves real-time visualization of large datasets to create detailed surfaces from heightmap representations. As I'm relatively new to the field of real-time rendering, ...
mattoro's user avatar
1 vote
1 answer
117 views

Convert between screen and world coordinates in isometric 3D

I'm working on a a simple 3D scene in WebGL. The purpose is to: Implement an isometric viewing angle in orthographic 3D Translate between XY screen coordinates and XY world coordinates Codepen: ...
Candleout's user avatar
  • 127
0 votes
1 answer
84 views

How to correctly handle rendering of ~600000, arbitrary colored 2D squares with WebGL?

Information I have to render a map, that is rendered as a 2d collection of squares of different color, separated by white lines horizontally and vertically. There may be ~600000 squares surrounded by ...
h4ckthepl4net's user avatar
0 votes
0 answers
60 views

"Smoothing out" raymarched reflections

I am writing a program to display 3-dimensional lattices (honeycombs) using raymarching and reflections. I made a simple cubic honeycomb to start. The usual method is to use a repetition operator, by ...
zenzicubic's user avatar
0 votes
1 answer
64 views

Position a 3D camera directly above or below the target

I'm trying to setup a 3D camera in WebGL. The camera is setup with the help of a lookAt function. The lookAt function takes cameraTarget, ...
Candleout's user avatar
  • 127
1 vote
1 answer
167 views

Move the camera in orthographic 3D

I'm trying to figure out how to move a camera in orthographic 3D. The scene is orthographic in the sense that an object looks the same regardless of position. The only thing that may affect the size ...
Candleout's user avatar
  • 127
0 votes
0 answers
85 views

How to setup a 3D camera

I'm trying to figure out how to setup a 3D camera in WebGL. This is my first swing at 3D so a lot of the matrix stuff is new to me. Code The code can be reviewed in this CodePen: https://codepen.io/...
Candleout's user avatar
  • 127
1 vote
1 answer
70 views

Doubt about Light space transform (Shadow map)

at this moment I am learning to do shadow mapping in webgl2.0, i was able to generate my first shadows in my 3D scene but I have a couple of doubts to clarify. This is the way im calculating my light ...
Luigi Pocay's user avatar
2 votes
0 answers
83 views

Can anyone tell me why my projection perspective matrix isn't working?

I'm a beginner in WebGL and graphics programming in general. I'm trying to render procedurally generated terrain. My first stab at this seemed to work and I get the following result. I want to add ...
Andrew Lubrino's user avatar
0 votes
0 answers
168 views

Warn GL_INVALID_OPERATION: Only array uniforms may have count > 1

I want to implement shadows in my already existing glmatrix-based project. You can see my project's github source. It is classic scebe object based structure. I have draw functions, I render recalls. ...
Nikola Lukic's user avatar
0 votes
1 answer
134 views

Plot inverse of emulated double-precision floats

I need to accurately plot a line chart using WebGL. The numbers have a precision of around 33 bits - that's too many to fit into a single-precision float's mantissa. WebGL does not support the double-...
purefanatic's user avatar
0 votes
0 answers
36 views

How do I make "attribute vec0.5" in GLSL. Sorry if it confuses

Is it possible, in OpenGL (specifically in WebGL), to use a single value from buffer for multiple shader iterations? Like to put the same element from buffer into shader attribute multiple times? Like:...
Forprix's user avatar
1 vote
1 answer
259 views

Ray Tracing With Continuous Refraction

I want to write a simple ray tracing(?) algorithm in WebGL with continuous refraction. So my idea was, what if you have a material whose optical density varies continuously, if this is physically ...
fweth's user avatar
  • 127
1 vote
0 answers
395 views

Generating cheap perfect outlines for meshes in WebGL

I am tasked with creating an outline shader in WebGL (i'm using WASM/Emscripten, so an OpenGL solution will work too) for meshes that the user can upload into our software (be it .obj, .fbx, .3ds), ...
yosmo78's user avatar
  • 111
0 votes
2 answers
158 views

Tiling in GLSL creates unwanted seams

I'm writing a shader that creates a grid with coloured tiles. The color is derived from a pixel at that location on a texture. But around the tiles I get these unwanted seams. I can't seem to figure ...
polyclick's user avatar
  • 103
0 votes
1 answer
276 views

Uploading interleaved data in gltf buffers

Suppose a GLTF file provides a single N byte buffer which includes all vertex data for multiple meshes. The first m bytes are ...
dubious's user avatar
  • 113
2 votes
1 answer
214 views

Is there a better, more elegant way of translating/rotating my camera in my 3d raymarched world or am I stuck with trigonometry?

What I am trying to achieve So I'm a fractal enthusiast and decided to build a 2D/3D fractal generator in WebGL using raymarching, with Typescript as scripting language. I've been a C#/Typescript dev ...
Arthur Visser's user avatar
1 vote
0 answers
38 views

How khronos flame swing effect is done?

This demo: https://www.khronos.org/registry/webgl/sdk/demos/google/particles/ Contains multiple effects that can be done with WebGL. I've been able to recreate some of them, but for example I don't ...
hhaamm's user avatar
  • 111
0 votes
0 answers
75 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 ...
fweth's user avatar
  • 127
0 votes
1 answer
166 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 ...
fweth's user avatar
  • 127
0 votes
1 answer
76 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 ...
Harry Svensson's user avatar
1 vote
1 answer
946 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). ...
NateW's user avatar
  • 113
1 vote
1 answer
611 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?...
Anisa's user avatar
  • 41
0 votes
1 answer
488 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 ...
zoran404's user avatar
  • 153
3 votes
1 answer
530 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. ...
zoran404's user avatar
  • 153
4 votes
3 answers
632 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 ...
user avatar
2 votes
0 answers
122 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 ...
David's user avatar
  • 43
2 votes
0 answers
332 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. ...
keepyourweb's user avatar
1 vote
1 answer
205 views

WebGL Can't render anything, wrong projection? [closed]

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 ...
Dreik's user avatar
  • 11
1 vote
1 answer
559 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 ...
チーズパン's user avatar
-2 votes
1 answer
826 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'...
StormPooper's user avatar
0 votes
1 answer
326 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 ...
Snicklefritz's user avatar
1 vote
2 answers
903 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 ...
el_zilcho's user avatar
5 votes
1 answer
399 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: ...
チーズパン's user avatar
4 votes
1 answer
734 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 ...
チーズパン's user avatar
2 votes
1 answer
53 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 ...
Nick's user avatar
  • 321
1 vote
1 answer
509 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 ...
HappyR's user avatar
  • 13
4 votes
1 answer
711 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 ...
Charan K's user avatar
1 vote
1 answer
84 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: ...
チーズパン's user avatar
2 votes
1 answer
616 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{...
Nick's user avatar
  • 321
2 votes
2 answers
426 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. ...
deostroll's user avatar
  • 121
2 votes
0 answers
118 views

Is it worth caching uniform values?

Consider something like the following for webgl (untested but should work): ...
davidkomer's user avatar
1 vote
1 answer
632 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? ...
SuperJumbo's user avatar
1 vote
1 answer
575 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 ...
Tau's user avatar
  • 121
5 votes
1 answer
159 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 ...
チーズパン's user avatar
1 vote
0 answers
541 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 ...
Daniel Marques's user avatar
4 votes
1 answer
120 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 ...
Daniel Kareh's user avatar
6 votes
1 answer
798 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 ...
Anvaka's user avatar
  • 213
5 votes
1 answer
2k 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. ...
Muad's user avatar
  • 165
3 votes
1 answer
96 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 ...
stackptr's user avatar