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
3
votes
1 answer

Perspective projection (using gl-matrix) in Webgl 2 shows nothing, but without it shows fine

I have the following javascript code: // convenience function. function v(x, y, z){ var v = vec3.create(); vec3.set(v, x, y, z); return v; } window.onload = function() { gl = get_gl('c', {antialias: true}) var vert_shader =…
ƒƒƒ
  • 33
  • 3
3
votes
2 answers

Bind multiple Uniform Buffer Objects

With WebGL 2 we now can play with Uniform Buffer Objects. They look like a great idea, not having to attach common uniforms to every single program (like projection and view matrices that are common to every object being rendered). I created an…
andrevenancio
  • 494
  • 4
  • 19
3
votes
1 answer

Access to gl_InstanceID in WebGL 2 Instancing

I am trying to do instancing in WebGL 2. I want to use the built-in variable gl_InstanceID to index into a uniform float array. I get the following error: glDrawElementsInstancedANGLE: attempt to draw with all attributes having non-zero divisors Is…
Startec
  • 12,496
  • 23
  • 93
  • 160
3
votes
1 answer

The complete list of promoted extensions in WebGL2

I got a chance to update our renderer we use to WebGL2. To make the renderer as backward compatible as possible we keep tracking of loaded extensions( as we did before the upgrade ) and emulate extensions even if such extension was promoted. The…
Kos
  • 1,547
  • 14
  • 23
3
votes
3 answers

Reading Pixels in WebGL 2 as Float values

I need to read the pixels of my framebuffer as float values. My goal is to get a fast transfer of lots of particles between CPU and GPU and process them in realtime. For that I store the particle properties in a floating point texture. Whenever a…
Feppster
  • 101
  • 1
  • 7
2
votes
0 answers

How to enable antialias/multisampling when rendering to framebuffer with stencil buffer for webgl2?

I add samples: 4 and change gl.RGBA to gl.RGBA4 to enable antialias of first framebuffer attachment: const framebufferInfo = twgl.createFramebufferInfo(gl, [ { format: gl.RGBA4, type: gl.UNSIGNED_BYTE, min: gl.LINEAR, wrap: gl.CLAMP_TO_EDGE,…
plantain
  • 43
  • 1
  • 8
2
votes
0 answers

How to pass 64 bit float uniform to webgl shaders from wasm?

I'm currently attempting to interface with a webgl2 canvas from a WASM program using wasm_bindgen and the web_sys crate. I am passing two vectors into my fragment shader as uniforms however I cant determine how to send them as double precision. It…
Giraugh
  • 116
  • 6
2
votes
1 answer

Why does this not get the corresponding pixel

After drawing a triangle, I want to use the readPixels method to get the pixel information, but I can't get it with the following code. const gl = document.querySelector("canvas").getContext("webgl2", { preserveDrawingBuffer:…
Link
  • 73
  • 5
2
votes
2 answers

How to clear a gl.RGBA8UI texture

I have a RGBA8UI internal format texture attached to a framebuffer, and somehow I need to reset it to a default value. Unfortunately, a simple gl.clear(gl.COLOR_BUFFER_BIT) does not seem to work, (I suspect the issue is the internal format of the…
user445082
  • 59
  • 1
  • 3
2
votes
1 answer

WebGL: read from a texture and write the output to a second texture

I am using WebGL2. I have two programs. Program 1 renders my favorite triangle, in my favorite color, into a texture, for safe keeping. Program 2 reads the output of program 1 (the first texture) and then renders the contents of that texture. This…
Avery
  • 57
  • 1
  • 4
2
votes
1 answer

Can I store signed 16bit value in single channel in webgl2?

Is there a way to store signed 16bit value inside single channel? Im trying to store it inside red channel like this: gl.texImage2D(gl.TEXTURE_2D, 0, gl.R16I, width, height, 0, gl.RED, gl.SHORT, image); but it results in…
ffsa
  • 55
  • 5
2
votes
1 answer

Implementing series approximation/perturbation theory for WebGL2 based Mandelbrot viewer application

I have started building a mandelbrot viewer application with WebGL2 and JavaScript and am trying to implement series approximation at a basic level. I'm currently getting weird/distored/incomplete images depending on the number of iterations and the…
badross92
  • 93
  • 3
  • 6
2
votes
1 answer

Why isn't this drawing a triangle?

I don't know why my WebGL code is not drawing a simple triangle on the screen and I'm not sure how to debug it. The shaders are able to compile so I believe that's not the problem. main.js: const canvas = document.querySelector("#gl-canvas") const…
somerandomdrunkcoder
  • 43
  • 9
2
votes
1 answer

WebGL2 : incomplete framebuffer

I'm porting a C++/OpenGL application into WebGL and I'm trying to create and configure a framebuffer. The framebuffer has 3 textures we can write into of types : vec2, vec2, uint. (gl.RG32F, gl.RG32F, gl.R32UI) Here is how I initialize the…
bamia
  • 333
  • 3
  • 15
2
votes
0 answers

Is it possible to filter integer texture in WebGL?

I have read other posts (for example this) that shows how to render integer texture (R16I) via WebGL. However, it is using the gl.NEAREST for texture filtering for minification and magnification gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,…
lorraine
  • 124
  • 1
  • 10
1 2 3
…
26 27