Questions tagged [webgl2]

WebGL 2 is the 2nd version of WebGL. It is based on OpenGL ES 3.0

WebGL 2 is based on OpenGL ES 3.0. See the spec

Getting started with WebGL2:

Webgl2fundamentals.org will get you setup with a basic understanding of WebGL2 and how it works.

Some differences from WebGL 1.0:

  • full support of non power of 2 textures
  • sampler objects
  • query objects
  • uniform buffer objects
  • instancing
  • many new texture formats
  • transform feedback (writing the output of vertex shaders to buffers)
  • GLSL 3.00
  • anti-aliased renderbuffers
308 questions
8
votes
1 answer

What is the meaning of s,t,p,q in Vector components?

In the WebGL reference card, there is the documentation about Vector components. While it seems to me that i can use also {x, y, z, w}, I am not able to understand if it is mandatory to use {s, t, p, q} when reading from Textures. Use when…
deblocker
  • 7,277
  • 2
  • 18
  • 49
8
votes
1 answer

How stencil buffer and masking work?

I want to draw object in just specific area. Please take a look this image for reference The 2 triangles (picture A) being draw just in the area inside the quad (picture B), so the result will look clipped (picture C). First i draw the quad just…
janucaria
  • 191
  • 2
  • 12
7
votes
2 answers

Display: none on Deck.gl React component causes huge performance issue

EDIT: This issue is specific to this setup. Please use the code from here if you wish to help. Thanks! I am using Deck.gl with react to display a map. When I try to hide the map with display: none it starts to freeze up my whole computer. I have…
6
votes
3 answers

What is the difference between a ND-Buffer and a G-Buffer?

I'm noob at WebGL. I read in several posts of ND-Buffers and G-Buffers as if it were a strategic choice for WebGL development. How are ND-Buffers and G-Buffers related to rendering pipelines? Are ND-Buffers used only in forward-rendering and…
deblocker
  • 7,277
  • 2
  • 18
  • 49
5
votes
1 answer

Alpha Blending with Integer Texture for Object Picking

Problem Description Hi! In our WebGL application, we are drawing many (even hundreds of thousands) shapes and we want to discover which shape is currently under the mouse. I'm looking for a way to do it in an efficient manner. Details The shapes are…
Michael Mauderer
  • 3,361
  • 1
  • 21
  • 48
4
votes
0 answers

IOS or Mac WebGL2 support for Chrome and Firefox?

I have found the webGL2 enable option of Safari. But webGL2 still doesn't work on Chrome and Firefox on Mac or IOS? Is there any option to enable webGL2?
4
votes
0 answers

WebGL (2.0) canvas blending with HTML in linear color space

Problem Description Hi! I'm creating a WebGL 2.0 vector shapes renderer and I'm facing a serious problem that I don't know how to resolve. My current rendering pipeline looks like this: I'm drawing shapes in my shaders with premultiplied colors in…
Wojciech Danilo
  • 10,776
  • 13
  • 60
  • 118
4
votes
2 answers

When does interpolation happen between the vertex and fragment shaders in this WebGL program?

Background I'm looking at this example code from the WebGL2 library PicoGL.js. It describes a single triangle (three vertices: (-0.5, -0.5), (0.5, -0.5), (0.0, 0.5)), each of which is assigned a color (red, green, blue) by the vertex shader: …
statusfailed
  • 617
  • 3
  • 13
4
votes
1 answer

webGL 2 readPixels on framebuffers with FLOAT textures

is it possible to retrieve pixels value as a float on framebuffer with multiple attachments ? (WebGL 2) I tried this : var framebuffer = _gl.createFramebuffer(); _gl.bindFramebuffer(_gl.FRAMEBUFFER,…
Onirom
  • 532
  • 5
  • 18
4
votes
0 answers

Can I construct a bounding volume hierarchy efficiently using WebGL 2 shaders?

Is it feasible to adapt the approach in this paper from CUDA to WebGL 2 shaders and still be efficient? (1) Assign a Morton code for each primitive according to its centroid. Should be easy, as bitwise operations (AND, OR, etc) are available in…
emh
  • 199
  • 9
4
votes
1 answer

Syntax error encountered in WebGL 2.0 GLSL when using sampler3D

I am trying to render a 3D medical data in a brower using WebGL 2.0. AFAIK 3D textures are now supported in WebGL 2.0. texImage3D() is a recognized function call. I am writing a fragment shader and declaring a uniform sampler: uniform sampler3D…
jezerien
  • 55
  • 1
  • 4
4
votes
2 answers

Get some trounble when using drawBuffers in WebGL2

I want to combine my deferred renderer and forward renderer together. In order to share the same depth buffer, I use a single frame buffer object with 4 color attachments, COLOR_ATTACHMENT0-2 for G-buffer rendering, COLOR_ATTACHMENT3 for deferred…
Skyfeiyun
  • 71
  • 1
  • 4
3
votes
1 answer

Using mat4 attribute in WebGL2

I am trying to pass a 4x4 matrix as an attribute to WebGL2 vertex shader. After following closely this SO answer, I am stuck with wrapping my head around why I can't successfully render and get a glDrawArrays: attempt to access out of range…
3
votes
1 answer

Is it safe to assume that unset sampler2D uniforms will read texture unit 0?

I have multiple textures, one of which gets bound to TEXTURE0 before drawing. In my fragment shaders, I have a single sampler2D uniform such as: uniform sampler2D diffuse; I used to call uniform1f([uniform location], 0) every frame, every shader to…
Finn Bear
  • 33
  • 1
  • 10
3
votes
1 answer

Callback on transform feedback to prevent getBufferSubData graphics pipeline stall

When I read vertex data to a Float32Array from a transform buffer in Chrome using getBufferSubData, I get the warning "performance warning: READ-usage buffer was read back without waiting on a fence. This caused a graphics pipeline stall.". My…
bm13563
  • 659
  • 4
  • 16
1
2 3
20 21