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.
0
votes
0answers
8 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 ...
-1
votes
1answer
70 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
1answer
80 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 ...
1
vote
2answers
103 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 ...
5
votes
1answer
209 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:
...
4
votes
1answer
381 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
1answer
39 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
121 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 ...
5
votes
1answer
134 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
68 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:
...
1
vote
0answers
128 views
WebGL 2.0 Shadow Maps
I'm trying to do shadow mapping but this is what is being rendered - looks like the shadow is on the cube in front of the wall as opposed to the shadow being cast on the wall.
The light is positioned ...
4
votes
1answer
125 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{...
3
votes
2answers
99 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. ...
3
votes
0answers
81 views
Is it worth caching uniform values?
Consider something like the following for webgl (untested but should work):
...
2
votes
1answer
79 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
0answers
49 views
Documentation of old versions of gl Matrix library
I'm learning webgl, and I'm using a book that use a old version of gl-Matrix (1.2.4). The newest versions of gl-Matrix aren't backward compatible, thus I'm looking for the documentation of gl-Matrix 1....
1
vote
1answer
269 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 ...
5
votes
1answer
138 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 ...
1
vote
0answers
278 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
1answer
55 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 ...
5
votes
1answer
259 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 ...
6
votes
1answer
530 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. ...
4
votes
1answer
87 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
122 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 ...
1
vote
0answers
97 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
870 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 ...
-1
votes
2answers
1k 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
404 views
4
votes
1answer
688 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 ...
3
votes
1answer
221 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
118 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 ...
5
votes
2answers
305 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 ...
3
votes
0answers
313 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 ...
2
votes
0answers
40 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 ...
2
votes
0answers
125 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 ...
9
votes
0answers
266 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 ...
2
votes
1answer
491 views
How to clip multiple tiled textures to polygon in Webgl / opengl
I have a bunch of planes each with their own texture in a grid. Currently I am rendering these as separate planes, each with their own texture, although I could use a single plane with multiple faces.
...
6
votes
1answer
273 views
Optimizing performance on hardware
I'm working on a webgl audio visualizer that uses particles, and I want to optimize rendering based on the user's hardware. I'd like to offer a "low quality" and "high quality" setting so that it ...
1
vote
2answers
413 views
Only show opaque objects behind transparent objects
I would like to make certain objects in my scene transparent, but only the parts visible to the camera when opaque.
Currently, when I make objects transparent, I can see other transparent objects ...
5
votes
1answer
531 views
Can we use PhysX in WebGL?
I'm new to GL stuff (coming in via WebGL, with no direct OpenGL experience). Can we use PhysX with WebGL?
1
vote
0answers
97 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:
...
3
votes
0answers
195 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....
6
votes
1answer
235 views
5
votes
1answer
962 views
How to use 32 bit Integers for Element Indices in WebGL 1.0?
WebGL 1.0 specification does not allow to create 32-bit index buffers. Now I'm in trouble, I'm trying to render huge objects with 100 thousands to 1 million indices. In OpenGL this is no issue at all, ...
1
vote
1answer
359 views
Why does substracting -1 in shader fail for a float data type?
I am loading a texture in a WebGL fragment shader (GLSL version 1.00).
This is my working code:
...
3
votes
2answers
577 views
Is it possible to store the plain buffer data in gltf files?
The GL Transmission Format comes along with a JSON styled main file which basicly describes the scene and binary files which contain the buffers.
I'm currently writing a WebGL library and I need to ...
1
vote
2answers
4k 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
...
11
votes
2answers
5k views
What is an index buffer and how is it related to vertex buffers?
I have a vertex buffer like this:
0.0, 0.0,
1.0, 0.0,
0.0, 0.6,
1.0, 0.6,
0.5, 1.0
I have the following index buffer:
...
6
votes
1answer
93 views
gamma transform in webGLSL: when already done or yet to be done?
Color spaces issues are such a pain, especially when you create color data at the middle of the chain, and a pile of libs and apps separate this to the display... Here I only worry about gamma ...
4
votes
1answer
334 views
Bitpacking into buffers with webgl (shadertoy)
I'm working on a webgl pixel shader which is writing to a 16 bit floating point buffer (each color channel r,g,b,a is a 16 bit floating point number).
I'm trying to figure out if there are any decent ...
