430 questions
-1
votes
0
answers
31
views
in webgl how to display two quad's at a same time both with their own position?
Not able to see both rect and trap panel at a same time?Individually both are render with their proper position worldX but both at a same time with loop not.
i have this in editor.tsx =>
const ...
- 1
2
votes
0
answers
55
views
Transforming WebGL2 canvas based on touch events?
I want a webgl canvas that I can seemlessly translate, rotate and scale with multitouch (using touch events).
So far I have a canvas that I can translate with 1 finger or scale with 2 fingers, but I'm ...
- 11
0
votes
0
answers
46
views
Why aren't my instanced elements rendering?
There seems to be no errors which popup, even with GL.getError():
const Canvas = document.getElementById("game_ui");
Canvas.width = window.innerWidth;
Canvas.height = window.innerHeight;
...
- 11
1
vote
0
answers
84
views
How to reliably read depth value from FBO using gl.ReadPixels?
I'm trying to read a depth value from a FBO through gl.readPixels.
const canvas = document.getElementById("glcanvas");
const gl = canvas.getContext("webgl2");
const width = 64;
...
- 2,416
3
votes
1
answer
94
views
Ambiguous information about WebGL clip space
I am reading about WebGL clip space, I think it basically should mean the same thing as coordinate system. The same site specifies ambiguous, information.
In WebGL basics is specified left hand system,...
- 2,417
0
votes
0
answers
29
views
webgl2 Instanced draw divisor
There are circles on the Earth. I want to draw projections of the circles on Mercator map. Their shapes are gets wider as they get close to the poles. Therefor, using the same model in different ...
- 41
2
votes
1
answer
74
views
Unable to create a framebuffer with an RGBA32F texture
I'm unable to create a framebuffer from a texture with internal format RGBA32F.
The following code logs test.js:38 Framebuffer is incomplete. Status: 36054 in the console
function main() {
const ...
- 42
0
votes
0
answers
28
views
From twgl to native webgl
I need analog code for native webgl/js:
twgl.setUniforms(ProgramInfo, {
u_projectedTexture: imageTexture,
});
imageTexture is [object WebGLTexture]
u_projectedTexture is : uniform ...
- 4,274
2
votes
1
answer
199
views
How to copy specific mip map level from a source texture to a specific mip map level in a destination texture?
I'm merging many 2D textures into an Array Texture in WebGL2 (three.js) for rendering models with multi draw. These individual textures change frequently and are using mipmaps. Because it's not ...
- 2,554
1
vote
0
answers
109
views
Canvas with webgl becomes broken after some time
I have a page where I use multiple canvases with webgl2 context. When I load or refresh page everything works good (rendering in canvases). But if I go to other tab in browser or switch focus to other ...
- 1,000
0
votes
0
answers
551
views
How to switch Safari WebGL rendering engine from Metal to OpenGL
Following up on a previous question, I have a WebGL application that suffers serious performance issues under Chrome v127 until I set a flag to switch the backend WebGL renderer from Metal/ANGLE to ...
- 97.3k
1
vote
0
answers
40
views
Benchmark WebGL Application with old Monitor
I have written a small WebGL application that I would like to benchmark. My problem is that my monitor is only 60Hz, so even with the smallest instances I get max 60 FPS, but I know it could be more.
...
- 11
0
votes
0
answers
38
views
Webgl2's deleteTexture doesn't seem to be able to access the GPU memory usage?
When I run a webgl2 program in the latest chrome, I use deleteTexture to delete a texture of several hundred MB, but I find that the gpu memory is not reclaimed after executing deleteTexture. Why and ...
- 1
1
vote
1
answer
77
views
Why does GLSL assume missing function would return a float?
Consider the simple GLSL ES 1.0 and 3.0 code
int i = f();
When f() is not defined, this produces 2 errors:
ERROR: 0:41: 'f' : no matching overloaded function found
ERROR: 0:41: '=' : cannot convert ...
- 259
-1
votes
1
answer
68
views
In Webgl how to check a texture whether it is filled with empty pixels (0, 0, 0, 0)?
A texture might be massive like over size of 4k*5k. I think readPixels and check by CPU might be slow.
I need a tricky method to improve the performance about the progress of checking for a 'null' ...
- 7
-1
votes
1
answer
42
views
`drawArrays` not working when mode is POINTS, yet renders fine in other modes
With the following code:
// where gl is WebGL2RenderingContext, but I tried WebGLRenderingContext as well.
gl.drawArrays(gl.POINTS, 0, points.length / 2);
#version 300 es
in vec2 position;
void ...
- 4,381
0
votes
1
answer
126
views
webgl2 trouble rendering float texture to canvas
If I use webgl2 to render something (e.g. a triangle) to an RGBA UNSIGNED_BYTE texture, then render that texture to the canvas, everything works fine. But I'm having trouble getting my example to work ...
- 3
0
votes
1
answer
168
views
webgl2 Reading from a RGBA16UI framebuffer with readPixels
I have a webgl2 application in which I'm rendering to a framebuffer and then reading the values with readPixels. This works fine when I initialize the framebuffer and later call readPixels both with ...
- 103
0
votes
0
answers
35
views
WebGL.getUniformLocation Offset usage
I'm new to WebGL, i have the code below:
var n = WebGL.createProgram();
WebGL.useProgram(n);
WebGL.uniform1i(WebGL.getUniformLocation(n, "uO"), 2880);
What this command means, Offset ...
- 13
0
votes
0
answers
404
views
Confusion on webgl2 about format and sampler type mismatch
I am tring to implement a GPU accelerated computation with Javascript
I input the image by
const gl = this.renderer.getContext(); //this.renderer is a THREE.WebGLRenderer
this....
- 1
0
votes
1
answer
219
views
How can I send large arrays of objects to a fragment shader using WebGL2?
For a university assignment, I've written a raytracer in JavaScript using a Canvas with a 2D context. To make it faster, I'm converting it from a 2D context to a WebGL2 context.
In the original code, ...
- 3
3
votes
1
answer
608
views
WebGL 2.0 unsigned integer input variable
I want to point a Uint32Array buffer at a uint input variable.
All the information I can find online says that it should be possible.
I get this error:
[.WebGL-0x62401b7e200] GL_INVALID_OPERATION: ...
0
votes
1
answer
72
views
Default render color vector for fragment shader when using a frame buffer with multiple attachment?
ChatGPT insists that when using a framebuffer and attaching multiple draw buffers, the 0-indexed one will be the one that when you write to in the shader, it will be rendered on the canvas. However I ...
- 6,160
1
vote
1
answer
188
views
Is antialias possible in WebGL 2 if one of your fragment shader outputs is integer?
From my own attempts and reading through the WebGL/OpenGL documentation it seems that it's impossible to anti-alias if you are also writing integer data to your framebuffer object. Is this correct?
...
- 14.5k
2
votes
1
answer
297
views
Can't avoid interpolation of UV : " 'flat' : Illegal use of reserved word "
I want to made that UV are not interpolated, so I can get the exact pixel (As a beginner I see this from that video). Why using 'flat' gives an error?
If I past flat before varying of Uv (I named it ...
0
votes
0
answers
83
views
How to reduce the gray-line artifacts in three.js isosurface rendering of 3D texture example?
the isosurface example in the three.js website shows gray-line artifacts over the surface, please see
https://threejs.org/examples/webgl2_materials_texture3d.html
the glsl shader source code is here
...
- 1,564
0
votes
1
answer
391
views
Synchronous webGL rendering and EXT_disjoint_timer_query_webgl2
I am working on a webgl2 app that renders using the webgl.drawArrays() function. It seems that this is an asynchronous function. I need to be able to get it to render synchronously, or at least be ...
- 103
0
votes
0
answers
77
views
Why my WebGL2 app dosen't work on win browsers?
I'm trying to finish an assignment of my CG course. I chose this repo as reference. I refactored most of the code, migrated to WebGL2 and added BVH structure from scratch to optimize object ...
0
votes
0
answers
87
views
WebGL retrieve arbitrary meta data from shaders
I have a shader that renders stuff.
During that rendering process I want to write certain data into a buffer for each pixel - be that for picking objects, depth values, whatever.
It seems that WebGL ...
- 2,663
0
votes
1
answer
394
views
WebGL2 tells me, that while loops are not allowned
Most of the code is from here, I just loaded webgl2 instead of webgl , changed the fragment shader to include a while loop, and logged a few things,
source/script.js:
const canvas = document....
- 3
0
votes
1
answer
155
views
Updating WebGL texture from color buffer during creation fails
I have a WebGL texture,initially filled with pixels from image. Now I am trying to clear it with solid color from an array. Here is my function to create a texture2D:
function createGLTexture(gl, ...
- 11.6k
0
votes
0
answers
48
views
I can't detect real reason for gl.LINK_STATUS return failed state
SHADERS:
export function getInitFSCubeMap() {
const f = `#version 300 es
precision mediump float;
in vec2 vTextureCoord;
in vec3 vLightWeighting;
// The CubeMap texture test.
uniform ...
- 4,274
0
votes
1
answer
34
views
Change camera view for RENDERBUFFER but not for main render view
I got nice working RENDERBUFFER buffer using example but i cant change camera view only for framebuffer render view.
I wanna make second camera with own camera params...
Creating framebuffer:
function ...
- 4,274
1
vote
1
answer
103
views
How does this code work with multiple buffer bound to same target?
I have this webgl code
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionData, gl.STATIC_DRAW);
const pointSizeBuffer = ...
- 6,914
0
votes
1
answer
71
views
webgl2 problem with rendering opaque and translucent triangles
I am working from a sample at https://interactivecomputergraphics.com/. My goal is to have a simple example that shows alpha blending with opaque and translucent triangles. I have 6 squares (2 ...
- 76
0
votes
1
answer
152
views
RGBA16UI support across browsers for WebGL2
I was trying to get WebGL2 RGBA16UI textures working, and they seemed to work as shown by the answer from my previous question: How to create a 16 bit unsigned integer/unsigned short 2D texture in ...
- 85
0
votes
1
answer
351
views
How to create a 16 bit unsigned integer/unsigned short 2D texture in WebGL
I tried create a 16 bit unsigned integer/unsigned short 2D texture in WebGL, but the parameters, although they seem like they fit only lead to error 1282.
Here's what I've tried:
let tex = gl....
- 85
3
votes
1
answer
241
views
WebGL does not like Index 255 with indexed drawing
Here is a minimal WebGL test program that creates an index buffer with a single uint8 value of 255. It should draw a red square of a size of 64px, it does not (the index value is not really important ...
- 1,013
0
votes
1
answer
2k
views
Error running a Bevy game in browser: "WebAssembly.instantiate(): Import #0 module="wbindgen_placeholder" error: module is not an object or function"
I am trying to run a game I built with Bevy and Rust in the browser. Bevy started supporting WebGL2 from version 0.11.0, and I am using this version. I have compiled my Rust code to WebAssembly using ...
- 69
2
votes
0
answers
497
views
A THREE.WebGLRenderer: A WebGL context could not be created. Reason: Failed to create a WebGL2 context
In desktop mode my code run properly but in mobile view it's give error like
THREE.WebGLRenderer: A WebGL context could not be created. Reason: Could not create a WebGL context, VENDOR = 0xffff, ...
- 21
1
vote
1
answer
2k
views
Getting NS_ERROR_FAILURE when loading a large image in Firefox for WebGL2 3D texture
My texture loading approach is working fine in Chrome or Opera but I got a problem only with Firefox. I am using WebGL2 and loading a 3D texture in a form of one big image where the layers are stored ...
- 823
2
votes
1
answer
304
views
In what way is WebGL2 immediate compared to retained mode OpenGL3?
I have some previous experience with OpenGL3 from following the tutorials on learnopengl.com and have recently been learning how WebGL2 compares. I'm still a n00b, so excuse any misunderstandings.
One ...
- 35
0
votes
0
answers
43
views
There is an error with using FBO in combination with WebGL in the three.js
This is the original question link address, if I need more detailed address, I can provide it
https://discourse.threejs.org/t/using-webgl2-in-three-js-transforming-feedback-an-error-occurs-fbo/53194
...
- 43
0
votes
1
answer
90
views
In webGL2 #330, Can I store the result of shaders in a texture?
In webGL2 #330, can I store the result of shaders in a texture and then use it in another shader via uniform sampler2D?
As in openGL version #460
If possible, I would like to avoid rendering in a ...
- 439
2
votes
2
answers
1k
views
Canvases content is lost when the context is lost
I want to draw on canvases (more than 100) and have their content preserved. My setup is that I create canvases in a loop, and for each one I get the webgl2 context of it and do some drawing. The ...
- 1,304
0
votes
1
answer
260
views
WebGL not displaying my triangle despite no errors or warnings
WebGL not even rendering my triangle that I want its not giving me any errors or anything..
I've tried changing the order of how I do the inputs and rewriting the shader code multiple times.
I'm just ...
3
votes
0
answers
155
views
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....
- 73
1
vote
0
answers
278
views
gl.getQueryParameter returns GL_INVALID_OPERATION : glGetQueryObjectuivEXT: unknown query id
I'm trying to use the EXT_disjoint_timer_query_webgl2 extension in desktop Chrome (which was pretty recently enabled back by default). All my calls to getExtension succeed (both ext.TIMESTAMP_EXT and ...
- 11.9k
-2
votes
1
answer
247
views
How do I fade in borders of an image in html canvas
How can I fade in borders of an image in canvas (webgl).
Here is an example of what I would like to achieve:
Initially I was trying to use canvas filtering filter: blur(8px) however it blurs the ...
- 41
3
votes
0
answers
200
views
Using `texelFetch` to sample from a texture in a vertex shader: what colorspace should I expect?
I'm using transform feedback and a vertex shader in my WebGL 2 program to perform calculations quickly and get the results. I'm providing images to my shader as textures (which will pretty much always ...
- 23.5k