WebGL

问题 I'm trying to create a dashed line using pure webgl. I know there is already a question on this, and maybe I'm dumb, but I cannot figure out how to make it work. I understand the concept, but I do not know how to get the distance along the path in the shader. A previous answer had the following line: varying float LengthSoFar; // <-- passed in from the vertex shader So how would I get LengthSoFar ? How can I calculate it in the vertex shader? Am I totally missing something? Can someone give

问题 I am attempting to render a Uint16Array to an image in the browser using webgl2 textures. I have a working example fiddle of a Uint8Array and am struggling with the upgrade to 16bit as webgl has a steep learning curve. Working 8-bit fiddle (identical to snippet below): Uint8Array http://jsfiddle.net/njxvftc9/2/ Non-working 16-bit attempt: Uint16Array http://jsfiddle.net/njxvftc9/3/ // image data var w = 128; var h = 128; var size = w * h * 4; var img = new Uint8Array(size); // need

问题 I am attempting to render a Uint16Array to an image in the browser using webgl2 textures. I have a working example fiddle of a Uint8Array and am struggling with the upgrade to 16bit as webgl has a steep learning curve. Working 8-bit fiddle (identical to snippet below): Uint8Array http://jsfiddle.net/njxvftc9/2/ Non-working 16-bit attempt: Uint16Array http://jsfiddle.net/njxvftc9/3/ // image data var w = 128; var h = 128; var size = w * h * 4; var img = new Uint8Array(size); // need

问题 I am trying to calculate a point to line distance in GSLS - precisely in turbo.js turbo.js This is part of a more general problem in which I try to find the [closest points on GeoJSON multiline] respective to a set of GeoJSON points - the number of calculations for a 500-points set on 1000 segments line ends up being 500k point-to-distance calculations. This is way too much to handle in the browser (even in workers) so parallelism helps a lot. The trick is that AFAIK I can only use a vec4 as

问题 context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.FLOAT, pixels); This is the code. I get this error in the console: WebGL: INVALID_ENUM: readPixels: invalid type But this works perfectly fine: context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels); Float or int is supposed to be supported, but only unsigned_byte works. There's no resource online on how to correctly

问题 I'm trying to make a FPS camera in WebGL. When I move the camera from the initial position and then rotate, the camera moves along the start position instead of the new position. The translation and rotation are made with glMatrix.js library. I have the variables: var rotateY = 0; // For rotating along the Y axis var fronBackMovement = 0; // Front and back movement var sideMovement = 0; // Movement from side to side Keyboard events: // Movement if( key.w == true ){ fronBackMovement += 5; } if

问题 I'm trying to use instancing with WebGL based on this guide. I've tried to create a simple example that draws a red triangle on the left and a blue triangle on the right. When I run it, it draws a blue triangle on the left and I don't understand why. I've tried changing the arguments to drawArraysInstancedANGLE but that doesn't help. I've tried changing the order of lines for binding buffers and setting attribute pointers, etc. What am I doing wrong? Thanks const canvas = document

问题 I'm using WebGL 1.0. I drew a circle to the stencil buffer, and now I want to use this stencil buffer multiple times without clearing it. The first time I use it, I enable stencil testing with: gl.enable(GL.STENCIL_TEST); Then, I perform my drawing to the color buffer. After this, at some later date, I want to draw again , but this time I want to clip to the inverse of what is in the stencil buffer. I know that I can draw to the stencil buffer again, but since I didn't use gl.stencilOp(GL

问题 Looking for some patterns/code examples/best practices of appropriate usage of fences in webgl2 (gl.fenceSync) - best if it would be non blocking of JS thread. var fence = gl.fenceSync(gl.SYNC_GPU_COMMANDS_COMPLETE, 0); setTimeout(() => { gl.clientWaitSync(fence, gl.SYNC_FLUSH_COMMANDS_BIT, 1000000); gl.getBufferSubData(gl.TRANSFORM_FEEDBACK_BUFFER, 0, dataOut); }, 0); 回答1: I'm just guessing to be honest, I'm not actually sure how useful syncs are in WebGL2 but I'd think you don't want to

问题 I want to do something that appears pretty simple, but Im a newbie with webgl and having a hard time finding a tutorial to simply do this. Lets say I have two webgl textures ready to go with my webgl2 rendering context. I just want to write texture1 onto texture2 at coordinates x, y . What's the barebones way of setting this up? 回答1: Rendering from one texture to another requires attaching the texture you want to write to (the destination texture) to a framebuffer const fb = gl