Displaying 1 to 20 from 47 results

webgl-workshop - :mortar_board: The sequel to shader-school: Learn the WebGL API

  •    Javascript

Learn the basics of WebGL in small, manageable chunks. The sequel to shader-school, created for CampJS IV by Mikola Lysenko and Hugh Kennedy. The script will ask you if you want to create an answer directory, press y to accept. This will populate your current directory with shader files for you to edit for each lesson.

regl - 👑 Functional WebGL

  •    Javascript

Check out the gallery. The source code of all the gallery examples can be found here. To try out regl right away, you can use the live editor in the gallery.

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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.

preview-dds - preview and save DDS textures from the command line

  •    Javascript

Preview and convert DDS files from the command line (compressed textures and HDR cubemaps).This only supports a limited range of DDS formats, see here.

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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

  •    Javascript

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.