Stack Overflow
Stack Overflow

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
405 questions
10
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,629
  • 2
  • 24
  • 59
8
votes
2 answers

Check if WebGL2 is supported and enabled in client's browser

I want to check if WebGL 2 is enabled and supported in the user's browser. There are a lot of posts for WebGL 1 but I found nothing related WebGL version 2.
Neeraj
  • 652
  • 10
  • 18
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…
Levente Rozsenich
  • 389
  • 1
  • 11
7
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
  • 738
  • 4
  • 15
7
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,629
  • 2
  • 24
  • 59
6
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
  • 75
  • 1
  • 4
5
votes
2 answers

Creating cursor trail with fragment shader

I wish to draw a simple mouse trail using fragment shaders, similar in appearance to drawing the following in processing (omitting the step of clearing the canvas). I cannot wrap my head around the setup necessary to achieve this. // processing…
msalla
  • 717
  • 6
  • 23
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,777
  • 1
  • 22
  • 49
5
votes
1 answer

WebGL how to avoid long shader compile stalling a tab

I have a giant shader that takes more than a minute to compile, which completely stalls whole browser during the process. As far as I know shader compilation cannot be made asynchronous, so you can run other WebGL commands while waiting for…
Roman Danielis
  • 183
  • 2
  • 8
5
votes
1 answer

How do you implement a gamma correct workflow in WebGL2?

I am having trouble utilizing sRGB textures with WebGL2. I am attempting to load a texture and display it as a fullscreen quad, but the image is displaying incorrectly (too dark.) The texture loading code is the following. const texture0 = await (()…
Chris_F
  • 4,991
  • 5
  • 33
  • 63
5
votes
1 answer

What are Vertex Arrays in OpenGL & WebGL2?

I've been working with WebGL1 for some time but now that I'm learning more about WebGL2, I'm confused what Vertex Arrays actually do. For example, in the following example, I can remove all references to them (e.g. creation, binding, deletion) and…
Detuned
  • 3,652
  • 4
  • 27
  • 54
5
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
  • 1
  • 7
  • 22
5
votes
1 answer

How can I upload a texture in WebGL2 using a Pixel Buffer Object?

Currently, uploading large 4096x4096 textures using texImage2d is quite slow, locking the main thread while the texture is sent to the GPU and ultimately causing stuttering. From what I've read, WebGL2 has the ability to use PBO's (Pixel Buffer…
gordyr
  • 6,078
  • 14
  • 65
  • 123
5
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
  • 81
  • 1
  • 5
1
2 3
…
26 27