Skip to main content

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
14 votes
2 answers
11k 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: ...
q9f's user avatar
  • 703
10 votes
1 answer
1k views

WebGL Omnidirectional Shadow Mapping Issue

First of all, I want to say that I've read a lot of post about shadow mapping using depth maps and cubemaps and I understand how they work and also, I have working experience with them using OpenGL, ...
czapata91's user avatar
  • 171
10 votes
1 answer
377 views

Can I determine the pixel geometry programmatically?

Different screens can have different pixel geometry, so that the red, green and blue components are arranged in different patterns. Using sub-pixel rendering to give a higher apparent resolution is ...
trichoplax is on Codidact now's user avatar
9 votes
1 answer
224 views

Help me find out what this texture mapping technique is called

I'm in the process of making a tool that requires rendered texture to follow the contours of a piece of clothing. An example would be this website https://knyttan.com/editor/jumper-editor/. The effect ...
Lukas Kriaučiūnas's user avatar
9 votes
0 answers
560 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
8 votes
1 answer
134 views

Cost of parameter passing in webgl pixel shaders?

In a webgl pixel shader, all functions are inlined as i understand it, however you can have parameters that are marked as in versus being inout meaning that their value can change but the value won't ...
Alan Wolfe's user avatar
  • 7,801
6 votes
1 answer
1k views

How much should I rely on Geometry shaders in WebGL?

Geometry shaders appear to have been introduced in 3.2, which makes me wonder how common 3.2-enabled cards are, including support for Geometry shaders within WebGL contexts. Will I be cutting out a ...
Qix - MONICA WAS MISTREATED's user avatar
6 votes
1 answer
834 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
6 votes
1 answer
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 ...
metalim's user avatar
  • 163
6 votes
1 answer
318 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 ...
Mark's user avatar
  • 161
6 votes
1 answer
119 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 ...
Fabrice NEYRET's user avatar
5 votes
3 answers
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 (...
q9f's user avatar
  • 703
5 votes
2 answers
2k 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 basically describes the scene and binary files which contain the buffers. I'm currently writing a WebGL library and I need to ...
q9f's user avatar
  • 703
5 votes
1 answer
1k 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?
trusktr's user avatar
  • 255
5 votes
1 answer
399 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 ...
Nick's user avatar
  • 153
5 votes
1 answer
411 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
5 votes
1 answer
161 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
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
5 votes
1 answer
559 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 ...
Alan Wolfe's user avatar
  • 7,801
4 votes
2 answers
669 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 ...
trusktr's user avatar
  • 255
4 votes
1 answer
729 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
4 votes
1 answer
2k 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, ...
q9f's user avatar
  • 703
4 votes
2 answers
4k views

Are there any gltf example datasets available? [closed]

I'm currently researching my options on effeciently exchanging data for a webgl application. I understand the gltf format is still being drafted but I need some example data to understand whether this ...
q9f's user avatar
  • 703
4 votes
1 answer
262 views

Rendering same vertex-array in different modes

here is my vertex array I am using: ...
チーズパン's user avatar
4 votes
1 answer
122 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
4 votes
3 answers
656 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
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
1 answer
561 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
3 votes
1 answer
3k 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 ...
mago3421's user avatar
3 votes
1 answer
97 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
3 votes
1 answer
1k 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. ...
roob's user avatar
  • 131
3 votes
0 answers
300 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
1 answer
400 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: ...
q9f's user avatar
  • 703
2 votes
1 answer
643 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
1 answer
242 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
2 votes
2 answers
438 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
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
2 votes
1 answer
395 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 ...
trusktr's user avatar
  • 255
2 votes
0 answers
88 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
362 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
123 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
203 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
586 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
1 answer
675 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
268 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
1 vote
1 answer
303 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
2 answers
960 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
1 vote
1 answer
230 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
1 vote
1 answer
1k 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