webgl2 | 易学教程

How to read depth texture attached to FBO in WebGL2

阅读更多关于 How to read depth texture attached to FBO in WebGL2

问题 I'm now working on the deferred shading using WebGL2.0. One primary problem I'm now facing is that I can't read the depth value from the DEPTH_ATTACHMENT. Actually I creat my own GBuffer with a DEPTH24_STENCIL8 texture as DEPTH_ATTACHMENT, then I bind this texture to the sampler and try to read the value in my fragment shader in deferred shading part like this: uniform sampler2D u_depthSampler; vec4 depthValue = texture(u_depthSampler, v_uv); Then I set the depthValue as output in my shading

Ray Tracing a scene with triangle meshes with webgl 2.0, deferred shading, framebuffers [closed]

阅读更多关于 Ray Tracing a scene with triangle meshes with webgl 2.0, deferred shading, framebuffers [closed]

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 12 months ago . after my original post was flagged as "too broad" by other stack overflow users. I will rephrase my question in less lines. I have implemented a ray marcher in shadertoy, and i understood all the math about the ray-object intersection. And i want to make the next step to ray

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

阅读更多关于 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 Objects) to create a texture on the GPU in a more efficient manner. However, I am unable to find any examples online of how to do so. I have found a good description of how to achieve this in OpenGL, but am unsure how to proceed using the WebGL API. I

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

阅读更多关于 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 Objects) to create a texture on the GPU in a more efficient manner. However, I am unable to find any examples online of how to do so. I have found a good description of how to achieve this in OpenGL , but am unsure how to proceed using the WebGL API. I would like to use either a Canvas or an ImageBitmap as the source for the texture data. So far I am

WebGL: async operations?

阅读更多关于 WebGL: async operations?

I'd like to know if there are any async calls for WebGL that one could take advantage of? I have looked into Spec v1 and Spec v2 they don't mention anything. In V2, there is a WebGL Query mechanism which I don't think is what I'm looking for. A search on the web didn't come up with anything definitive. There is this example and is not clear how the sync and async version differ. http://toji.github.io/shader-perf/ Ultimately I'd like to be able to some of all of these asynchronously: readPixels texSubImage2D and texImage2D Shader compilation program linking draw??? There is a glFinish operation

WebGL how to avoid long shader compile stalling a tab

阅读更多关于 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 compilation to be done. I already tried the following: don't use that particular shader for some time - this doesn't work, because most other WebGL commands will wait for it to finish, even if that shader program is never made active use another context - same as above, but even WebGL commands from another context will cause the stall use OffscreenCanvas in

The complete list of promoted extensions in WebGL2

阅读更多关于 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 renderer does a few relevant things with extensions. From outside, everything is quite transparent. To make it work smoothly, I need the complete list of promoted extensions. Have found few blogs, but those lists are not complete. Other lists which I

The relation between gl_PointSize, gl_Position, gl_FragCoord

阅读更多关于 The relation between gl_PointSize, gl_Position, gl_FragCoord

example the vs shader void main() { gl_Position = vec4(0, 0, 0, 1); gl_PointSize = 100.0; } the canvas is 1x5 pixels (width,height) the fragment shader uses gl_FragCoord what will the values of gl_FragCoord be for these 5 pixels? Cheers For each pixel gl_FragCoord.xy will be 4.5, 0.5 3.5, 0.5 2.5, 0.5 1.5, 0.5 0.5, 0.5 gl_FragCoord is always the pixel being drawn currently . Your fragment shader will be called 5 times. Once for each of the 5 pixels the 100x100 sized point covers (it is of course clipped to the size of the canvas which you said is only 1x5 pixels in size) Which pixels is

How do I obtain pixel data from a canvas I don't own?

阅读更多关于 How do I obtain pixel data from a canvas I don't own?

问题 I am trying to get the pixel RGBA data from a canvas for further processing. I think the canvas is actually a Unity game if that makes a difference. I am trying to do this with the canvas of the game Shakes and Fidget. I use the readPixels method from the context. This is what I tried: var example = document.getElementById('#canvas'); var context = example.getContext('webgl2'); // Also doesn't work with: ', {preserveDrawingBuffer: true}' var pixels = new Uint8Array(context.drawingBufferWidth

The complete list of promoted extensions in WebGL2

阅读更多关于 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 renderer does a few relevant things with extensions. From outside, everything is quite transparent. To make it work smoothly, I need the complete list of promoted extensions. Have found few blogs, but those lists are not complete. Other lists which I have found on GitHub look wrong because they have redundant extensions which were in fact not promoted