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
2
votes
0 answers

How do you render to an R8UI, RedIntegerFormat, UnsignedByteType WebGLRenderTarget?

I'm trying to render to a single component 8 bit render target in three.js but I'm getting a number of errors I'm not sure how to solve and searching doesn't seem to come up with a lot of other hits. The WebGLRenderTarget is created with the…
Garrett Johnson
  • 2,413
  • 9
  • 17
2
votes
0 answers

Improving the performance of Webgl2 texSubImage2D call with large texture

Using WebGL2 I stream a 4K by 2K stereoscopic video as a texture onto the inside of a sphere in order to provide 360° VR video playback capability. I've optimized as much of the codebase as is feasible given the returns on time and the application…
Reahreic
  • 596
  • 2
  • 7
  • 26
2
votes
1 answer

Can I read single pixel value from WebGL depth texture in JavaScript?

In short I would like to read a single pixel value from a WebGL 2 depth texture in JavaScript. Is this at all possible? The scenario I am rendering a scene in WebGL 2. The renderer is given a depth texture to which it writes the depth buffer. This…
Berthur
  • 4,300
  • 2
  • 14
  • 28
2
votes
1 answer

How to mirror/clone a WebXR 'immersive-xr' HMD view to the browser

How would one go about mirroring or cloning the WebXR 'immersive-xr' view from a HMD like the VIVE or Oculus in the browser using the same WebGL canvas? There is much discussion about copying the pixels to a texture2D, then applying that as a render…
Reahreic
  • 596
  • 2
  • 7
  • 26
2
votes
1 answer

Can an layout(location=n) out skip an index for drawBuffers in WebGL?

I'm working on MRT in my graphics engine. An interesting point i'm at (and aim to fix) has my generated fragment shader spitting out: layout(location = 0) out vec4 thing1; layout(location = 2) out vec4 thing2; The drawBuffers call on the…
Diniden
  • 1,005
  • 6
  • 14
2
votes
1 answer

"GL_INVALID_OPERATION: Insufficient buffer size." after variable number of render calls

I'm using MapboxGL to render geojson as a polygon onto a map. The page loads and renders correctly but when I move the map around, I get this error after some number (usually between ~30-100) of render calls and the polygon disappears. On…
willjfield
  • 33
  • 6
2
votes
0 answers

Calculating Oblique Projection for WebGL

I am trying to create a portal rendering engine in WebGL 2.0 (so far I am trying to port this C++ project: https://github.com/HackerPoet/NonEuclidean), and am trying to implement oblique projection in order to align the clipping plane of the portal…
K. Russell Smith
  • 133
  • 1
  • 11
2
votes
1 answer

webgl performance differences between firefox and chrome

I am currently developing an image processing tool for a webapplication. I need to take to png-images of the same size and combine them pixel by pixel. So far, I have set up a prototype (very much inspired by the tutorials on webglfundamentals.org)…
user13906415
2
votes
2 answers

WebGL2: same function in different shaders

I have a big function with complex mathematics in it, and I want to call this same function in several fragment shaders. Do I have to copy-paste the code of the function to every shader? Or is there any way to avoid this, to share code between…
eruditor
  • 23
  • 5
2
votes
1 answer

WebGL readPixels with Multiple Render Targets

I am using MRT (Multiple Render Targets, drawBuffers, etc) using WebGL 1.0 (extensions) and in WebGL 2.0. What is the best way to readPixels() from a specific bound color attachment? All I can think is to make another FBO with my desired Texture set…
Diniden
  • 1,005
  • 6
  • 14
2
votes
2 answers

Why is using isampler2D causing my shader to fail to compile in WebGL2?

I have a fragment shader which is failing to compile in a WebGL 2 context: #version 300 es precision highp float; uniform isampler2D tex_in; out vec2 outColor; void main() { outColor = vec2(0.0, 0.0); } When I gl.compileShader this shader,…
Craig Gidney
  • 17,763
  • 5
  • 68
  • 136
2
votes
2 answers

pass data between shader programs

Ok I'm going to keep this as simple as possible. I want to pass data between shader programs. I'm using readPixels currently to do that but I feel it may be slowing operations down and I'm exploring faster options. what my program does: program1…
2
votes
1 answer

Jittering vertices

I'm trying to get rid of spatial jitter. To be more precise, I'm trying to replicate Three.js behavior concerning matrix manipulation. My current rendering pipeline (WebGL with m4.js) There is a scene object, a camera and a mesh. The mesh has its…
StrandedKitty
  • 305
  • 3
  • 14
2
votes
1 answer

get current pixel position on webGL2 fragment shader

I created a simple webGL script, it apply pixel color depending on (x,y) pixel position What I get: here's what I did: #ifdef GL_ES precision mediump float; #endif uniform float width; uniform float height; uniform float time; void main() { …
Yukulélé
  • 15,644
  • 10
  • 70
  • 94
2
votes
1 answer

How to draw multiple objects by using uniform buffer objects and instanced rendering?

I want to draw multiple objects with animations by using Uniform buffer objets and Instanced rendering.. I've implemented this with a for loop but I want to render them at one time. Here is my code which using for loop to render multiple objects…