WebGL

问题 Please refer to the background section below if the following does not make much sense, I omitted most of the context as to make the problem as clear as possible. I have two WebGLRenderingContexts with the following traits: WebGLRenderingContext: InputGL (Allows read and write operations on its framebuffers.) WebGLRenderingContext: OutputGL (Allows only write operations on its framebuffers.) GOAL : Superimpose InputGL's renders onto OutputGL's renders periodically within 33ms (30fps) on

问题 In WebGL to draw something using an index buffer you would somewhat undergo this routine (as hinted by MDN): setup: bindBuffer(ARRAY_BUFFER); bufferData(pass vertex data); bindBuffer(ELEMENT_ARRAY_BUFFER); bufferData(pass index data); drawing: bindBuffer(ELEMENT_ARRAY_BUFFER); glDrawElements(...); There is no bindBuffer(ARRAY_BUFFER) call. Suppose I have multiple VBO's with vertex data. How does an EBO will know from which buffer to take the data? In standard OpenGL I would encapsulate it in

问题 I am working on volumetric rendering raw data in three.js. I have a hard time understanding the relationship between the type and format of the texture (in my case it is texture3d) in three.js. Available type of texture type are : and available format are: I tried to put type as THREE.UnsignedIntType for u8int datatype of raw data but it gives invalid internalformat of texture error but everything works fine with type of THREE.UnsignedByteType . this is my code of texture, var texture = new

问题 I'm using webgl to do YUV to RGB conversions on a custom video codec. The video has to play at 30 fps. In order to make this happen I'm doing all my math every other requestAnimationFrame. This works great, but I noticed when profiling that uploading the textures to the gpu takes the longest amount of time. So I uploaded the "Y" texture and the "UV" texture separately. Now the first "requestAnimationFrame" will upload the "Y" texture like this: gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl

问题 We are working on a Three.js based WebGL project, and have trouble understanding how transparency is handled in WebGL. The image shows a doublesided surface drawn with alpha = 0.7, which behaves correctly on its right side. However closer to the middle strange artifacts appear, and on the left side the transparency does not seem to work at all. http://emilaxelsson.se/sandbox/vis1/alpha.png The problem can also be seen here: http://emilaxelsson.se/sandbox/vis1/ Has anyone seen anything similar

问题 In the example page at https://www.lighthouse3d.com/tutorials/glsl-tutorial/uniform-blocks/ has this: uniformBlockBinding() bindBuffer() bufferData() bindBufferBase() But conceptually, wouldn't this be more correct? bindBuffer() bufferData() uniformBlockBinding() bindBufferBase() The idea being that uploading to a buffer (bindBuffer+bufferData) should be agnostic about what the buffer will be used for - and then, separately, uniformBlockBinding()+bindBufferBase() would be used to update those

问题 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 defined with Signed Distance Functions. Each shape is drawn by applying a predefined sdf fragment shader to a square polygon (2 triangles). Each shape is assigned with a unique ID ( uint ) on the Rust side (we're using WASM here). The idea is to

问题 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 defined with Signed Distance Functions. Each shape is drawn by applying a predefined sdf fragment shader to a square polygon (2 triangles). Each shape is assigned with a unique ID ( uint ) on the Rust side (we're using WASM here). The idea is to

问题 I run into this error when I set a non-power of to image on webGL: Error: WebGL warning: drawArrays: TEXTURE_2D at unit 0 is incomplete: Mipmapping requires power-of-two sizes. Note, I am currently learning webGL. I have notice that when I use a Power-of-Two image every thing works fine. gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); All I want to do is learn to

问题 I run into this error when I set a non-power of to image on webGL: Error: WebGL warning: drawArrays: TEXTURE_2D at unit 0 is incomplete: Mipmapping requires power-of-two sizes. Note, I am currently learning webGL. I have notice that when I use a Power-of-Two image every thing works fine. gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); All I want to do is learn to