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.

28 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
9 votes
0 answers
558 views

WebGL packing/unpacking functions that can roundtrip all typical 32-bit floats

I have a WebGL circuit simulator. One of the problems it has is that, due to using quite a lot of intermediate float textures as it simulates, it doesn't work on various mobile devices. They only ...
Craig Gidney's user avatar
4 votes
1 answer
735 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
3 votes
0 answers
295 views

What does these FXAA settings do?

I been looking for a way to do anti-aliasing with deferred rendering with WebGL as my target platform. WebGL does not support multisampled FBOs. I found FXAA implmentations such as this https://github....
user4874's user avatar
2 votes
0 answers
86 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
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
346 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
2 votes
0 answers
119 views

Is it worth caching uniform values?

Consider something like the following for webgl (untested but should work): ...
davidkomer's user avatar
2 votes
0 answers
201 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 ...
B.junior's user avatar
2 votes
0 answers
578 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 ...
Jose's user avatar
  • 31
1 vote
0 answers
417 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
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
1 vote
1 answer
566 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
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
1 vote
0 answers
769 views

WebGL Spotlight

I have to add a spotlight to my rotating cube so this is my code: HTML ...
B.junior's user avatar
1 vote
0 answers
233 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 ...
Jose's user avatar
  • 31
1 vote
0 answers
45 views

View / print index values?

So i'm currently trying to draw a 3D cube, and from what I understand everything should be working right, but It's coming out weird and I believe it's because the ordering of my indexes is wrong. Is ...
Itheyln's user avatar
  • 19
1 vote
0 answers
157 views

Can I Implement Clustered Lighting with WebGL?

Do current WebGL capabilities allow to use Clustered Lighting? If not what is it missing to allow that? Basically WebGL uses GLES 2, so is that possible with GLES 2? I want to implement this one: ...
CoffeDeveloper's user avatar
1 vote
1 answer
74 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
0 votes
0 answers
26 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
0 votes
1 answer
104 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
62 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
0 answers
89 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
0 votes
0 answers
188 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
136 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
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
0 answers
107 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 ...
Andy's user avatar
  • 9
-2 votes
1 answer
835 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