Displaying 1 to 20 from 47 results

glslify - :sparkles: A node.js-style module system for GLSL!

  •    Javascript

It forms one of the core components of the stack.gl ecosystem, allowing you to install GLSL modules from npm and use them in your shaders. This makes it trivial to piece together different effects and techniques from the community, including but certainly not limited to fog, noise, film grain, raymarching helpers, easing functions and lighting models. A full list can be found on the stack.gl packages list under the "Shader Components" category.

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.




glsl-dither - Bayer matrix dithering in GLSL

  •    C

Bayer matrix dithering in GLSL. Originally sourced from @oosmoxiecode's C64 Shader Demo, which in turn was based on the implementation in this article.The returned value will be the same type as the brightness parameter.

glsl-hsv2rgb - Fast GLSL conversion from HSV color to RGB

  •    C

Fast conversion from HSV color to RGB – published to npm for use with glslify, originally sourced from this post written by Sam Hocevar.All of the values should range between 0 and 1. Returns the calculated RGB value as a vec3.

glsl-luma - Get the luma (brightness) of an RGB color in GLSL

  •    C

Get the luma (brightness) of an RGB color in GLSL. Useful for converting images to greyscale.Takes a vec3 or vec4 color as input, returning the luma as a float.


glsl-noise - webgl-noise shaders ported to work with glslify

  •    GLSL

webgl-noise ported to an NPM package so that you can require it from glslify.

glslify-optimize - A browserify transform stream that optimizes your glslify shaders

  •    Javascript

A browserify transform stream that optimizes your glslify shaders using glsl-optimizer, the library used in Unity for mobile shader optimization.MIT. See LICENSE.md for details.

glsl-ascii-filter - faux ASCII post-processing effect in GLSL

  •    GLSL

A simple ASCII post-processing effect in GLSL, original here by @movAX13h.Best rendered with retina scaling for crisp edges.

glsl-checker - repeating checker GLSL pattern

  •    GLSL

GLSL utility for checkered patterns.Creates a checkered n x n pattern with the given UV coordinates, returning a float 0.0 or 1.0.

glsl-crosshatch-filter - a simple crosshatch effect for 2D scenes

  •    GLSL

A very basic crosshatch effect for post-processing, from geeks3d.com.Applies a cross-hatch filter to the texColor RGB based on its luminance, using the thresholds 1.0, 0.75, 0.5, 0.3. Returns the new RGB color.

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.

glsl-fxaa - FXAA implementation for glslify in WebGL

  •    GLSL

A WebGL implementation of Fast Approximate Anti-Aliasing (FXAA v2). This is a screen-space technique. The code was originally from Geeks3D.com and cleaned up by Armin Ronacher for WebGL.FXAA is particularly useful in WebGL since most browsers do not currently support MSAA, and even those that do (e.g. Chrome) will not support it outside of the main frame buffer (which is common when doing post-processing effects like color grading).

glsl-lut - lookup table color transforms for glslify

  •    Javascript

Use a texture as a lookup table to apply color transforms in a shader. Original implementation from GPUImage, see here. For more details on the concept, see here.This is geared towards OpenGL ES, so no 3D textures are used, and the lookup table is 512x512 (using every 4th color).

glsl-random - pseudo-random 2D noise for glslify

  •    C

However, the 'classic' lowp version (with no precision specified) is also included here. Some may find it useful for targeted mobile GPUs.

shader-reload - An interface for reloading GLSL shaders on the fly.

  •    Javascript

This is an experimental interface for live shader reloading in ThreeJS, regl, and other WebGL frameworks. This means you can edit your GLSL shader files without re-starting your entire application state. Works with regular strings, template strings, and/or transforms like brfs and glslify. Handles errors with a client-side popup that disappears on subsequent reloads.See this tweet for a longer video.

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

  •    GLSL

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.

glsl-matrix-texture - read matrices from a texture

  •    Javascript

If you have many differing meshes you want to render on the same draw call where each mesh has its own model matrix, this technique could be useful.If you want to render the same geometry many times with different matricies, instancing may be a more appropriate technique.