Displaying 1 to 20 from 31 results

gl-pixel-stream - streaming gl.readPixels from an FBO


Streams chunks of gl.readPixels from the specified FrameBuffer Object. This is primarily useful for exporting WebGL scenes and textures to high resolution images (i.e. print-ready).Before calling this method, ensure your FBO is populated with the content you wish to export. On each chunk, this will bind the given FBO, set the viewport, read the new pixels, and then unbind all FBOs.

gl-shader-output - test a shader's gl_FragColor output on a 1x1 canvas


A helper module for unit testing shaders and comparing the result of gl_FragColor from a 1x1 WebGL canvas. See glsl-hsl2rgb for a practical example.You can use this with tools like smokestack for test-driven GLSL development.

glsl-100-to-300 - transpiles GLSL tokens from v100 to v300 es


Transpile GLSL source tokens from version "100" (WebGL1) to "300 es" (WebGL2).The resulting WebGL2 shader.

glsl-fast-gaussian-blur - optimized single-pass blur shaders for GLSL


Optimized separable gaussian blurs for GLSL. This is adapted from Efficient Gaussian Blur with Linear Sampling.The function blurs in a single direction. For correct results, the texture should be using gl.LINEAR filtering.




orbit-controls - generic controls for orbiting a target in 3D


Generic controls for orbiting a target in 3D. Can be used to control a camera, a 3D ray, or anything with { position, direction }.Can be used with any camera abstraction that uses position and direction to form the view matrix, including ThreeJS, Babylon, stackgl, etc.

perspective-camera - a high-level 3D perspective camera


A high-level 3D perspective camera with a familiar and convenient interface, built from modular pieces.See demo/canvas.js for a full example, using Canvas2D.


gl-gif - Quickly and easily generate looping GIFs using WebGL


Quickly and easily generate looping GIFs with WebGL using @jnordberg's gif.js.Note that if you change the size of your canvas after creating the encoder, gif.tick will throw an error.

extrude-polyline - triangulates a 2D polyline into a stroke


Extrudes a 2D polyline with a given line thickness and the desired join/cap types. Tries to maintain visual consistency with HTML5 2D context stroking.The returned mesh is a simplicial complex.

fontpath-gl - a gl implementation of vector font rendering


A 2D fontpath renderer for stackgl. As opposed to gl-render-text, which is texture based, this renderer is path-based.The following will produce filled text, drawn with triangles.

get-image-pixels - Gets the RGBA pixel array from an Image/Video/Canvas source


Uses an intermediary canvas node to grab the RGBA pixels of the given source, with an optional clipping region. Works on HTML Canvas, Image, and Video elements.Gets the RGBA pixels from HTML Image/Video/Canvas element as a Uint8Array with some optional parameters.

gl-basic-shader - generates a basic shader with vertex attributes


If the texcoord, normal or color options are false (or texcoord is 0) then that attribute will not be included in the shader.The projection, model, and view matrices are set to an identity matrix initially.

gl-vignette-background - a soft gradient background in WebGL


Also see three-vignette-background for a ThreeJS version of this module, with a slightly different API and noise algorithm.See demo/index.js for a full-screen example.

glsl-film-grain - natural looking film grain using noise functions


Natural looking film grain using 3D noise functions. Inspired by Martins Upitis.This is a fairly expensive technique to achieve film grain, but it looks more realistic than a hash function and also produces better motion.

google-panorama-equirectangular - gets equirectangular images from Google StreetView


Stitches Google Street View and Photo Sphere tiles into an equirectangular image. For use in the browser, with Webpack or Browserify.Also includes an intermediate mode for higher quality WebGL rendering on low-end devices.

image-sdf - generate a signed distance field from an image


Command-line tool which takes a 4-channel RGBA image and generates a signed distance field. The bitmask is determined by pixels with alpha over 128 and any RGB channel over 128.The code has been adpated from libgdx.

polyline-normals - gets miter normals for a 2D polyline


Computes the normals of a polyline, using miter joins where multiple segments meet. This is mainly useful to expand thick lines in a vertex shader on the GPU.See the 2d test for an example of how these lines would be extruded.

three-glslify-example - a simple example of ThreeJS with glslify


A simple example of modular shaders in ThreeJS with glslify. Uses glsl-halftone, glsl-hash-blur, and glsl-checker.Now open http://localhost:9966/ and start making changes to index.js, frag.glsl or vert.glsl to see changes reloaded in the browser.

implicit-mesh - create simplicial complex meshes from an implicit function


Build a 3d mesh with resolution opts.size from an implicit function fn(x,y,z).If opts is a number of array, it is interpreted as the opts.size.