webgl2

问题 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:

问题 I'm trying to learn how to do multiple outputs from the same program in WebGL2 leveraging gl.drawBuffer() capabilities. I looked at the book " OpenGL ES 3.0 Programming Guide ", chapter 11 where it lists what is needed for multi-output to take place. However the shader source example is very trivial outputting only constant values. I'd like to know if someone has a better example? or if one could explain what happened to the TextureCoordinates varying? In normal shader code I would use that

问题 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 回答1: 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

问题 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 the only instancing allowed in WebGL 2 instancing with vertex attributes (instanced arrays)? Also, is the spec the only definitive place to find out about these capabilities? 回答1: The spec says it's based on the OpenGL ES 3.0 spec The remaining

问题 I need to heavily downsample a image to prepare for a perceptual hashing algorithm, for example from a 3024x4032 to a 9x9 image, and I'd like to use webgl for that (as the base image is already processed within the webgl pipeline), and artefacts quickly appear when the downsampling rate is too large. Taking this sample situation: // WebGL2 - 2D Image // from https://webgl2fundamentals.org/webgl/webgl-2d-image.html "use strict"; var downscaleFactor = 0.5; var vertexShaderSource = `#version 300

问题 Using a 4x4x4 grid as an example, I have 64 vertices (which I’ll call particles) which start with specific positions relative to each other. These 64 particles will move in the x, y and z directions, losing their initial positions relative to each other. However each cycle, the new particle positions and velocities need to be calculated based upon the original starting relationships between a particle and its original neighbors. I’ve learned that I need to use textures, and consequently

问题 I am doing some GPGPU processing on a large 4D input array in WebGL2. Initially, I just flattened the input array and passed it in as a uniform array of ints, with a custom accessor function in GLSL to translate 4D coordinates into an array index, as follows: const int SIZE = 5; // The largest dimension that works; if I can switch to textures, this will be passed in as a uniform value. const int SIZE2 = SIZE*SIZE; const int SIZE3 = SIZE*SIZE2; const int SIZE4 = SIZE*SIZE3; uniform int u_map

问题 3D Physics simulation needs access to neighbor vertices' positions and attributes in shader to calculate a vertex's new position. 2D version works but am having trouble porting solution to 3D. Flip-Flopping two 3D textures seems right, inputting sets of x,y and z coordinates for one texture, and getting vec4s which contains position-velocity-acceleration data of neighboring points to use to calculate new positions and velocities for each vertex. The 2D version uses 1 draw call with a

问题 I want to combine my deferred renderer and forward renderer together. In order to share the same depth buffer, I use a single frame buffer object with 4 color attachments, COLOR_ATTACHMENT0-2 for G-buffer rendering, COLOR_ATTACHMENT3 for deferred shading and forward rendering, here's the pesudo code: //**Gbufffer part** Bind G-Buffer FBO gl.drawBuffers([gl.COLOR_ATTACHMENT0, gl.COLOR_ATTACHMENT1, gl.COLOR_ATTACHMENT2]); draw the G buffer //**Lighting part** Bind Lighting buffer FBO //*

问题 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 -