All Projects → Tw1ddle → WebGL-Distance-Fields

Tw1ddle / WebGL-Distance-Fields

Licence: MIT License
⭐ Realtime Euclidean distance field generation and rendering

Programming Languages

javascript
184084 projects - #8 most used programming language
haxe
709 projects

Projects that are alternatives of or similar to WebGL-Distance-Fields

SdfFontDesigner
Offline font tuning/bitmap generation via shaders
Stars: ✭ 56 (+12%)
Mutual labels:  shaders, glsl, sdf
pilka
Another live-coding tool for creating shader demos, Vulkan+Wgpu powered.
Stars: ✭ 84 (+68%)
Mutual labels:  shaders, glsl
Shader-Playgrounds
A WebGL shaders editor for beginners and otherwise.
Stars: ✭ 28 (-44%)
Mutual labels:  shaders, glsl
mathematical-sculptures
Generate custom parametric surfaces ✒️💠
Stars: ✭ 26 (-48%)
Mutual labels:  shaders, glsl
cellular-automata-explorer
(WIP) An interactive web app for exploring cellular automata.
Stars: ✭ 18 (-64%)
Mutual labels:  shaders, glsl
shaderview
A GLSL shader development tool for the LÖVE game framework.
Stars: ✭ 22 (-56%)
Mutual labels:  shaders, glsl
manyworlds
A scifi-inspired study of signed distanced functions and noise fields in WebGL
Stars: ✭ 24 (-52%)
Mutual labels:  shaders, glsl
sparksl-noise
minimum proof of concept about procedural noise generation in SparkAR's shader language (SparkSL).
Stars: ✭ 16 (-68%)
Mutual labels:  shaders, glsl
ShaderView
ShaderView is an Android View that makes it easy to use GLSL shaders for your app. It's the modern way to use shaders for Android instead of RenderScript.
Stars: ✭ 53 (+6%)
Mutual labels:  shaders, glsl
ios-spritekit-shader-sandbox
👾 Collection of custom effects for SpriteKit implemented using GLSL/Metal shaders.
Stars: ✭ 63 (+26%)
Mutual labels:  shaders, glsl
deffx
A collection of useful shader effects made ready to be used with the Defold game engine
Stars: ✭ 33 (-34%)
Mutual labels:  shaders, glsl
glsl-cos-palette
glsl function for making cosine palettes
Stars: ✭ 26 (-48%)
Mutual labels:  shaders, glsl
pixi-sdf-text
Signed distance field text implementation for PixiJS
Stars: ✭ 89 (+78%)
Mutual labels:  glsl, sdf
WaterColor
openframeworks parametric shader effect watercolor
Stars: ✭ 54 (+8%)
Mutual labels:  shaders, glsl
Messier87
A realtime raytracing blackhole renderer
Stars: ✭ 53 (+6%)
Mutual labels:  shaders, glsl
nerv pathtracer
a pathtracer with physically based rendering in mind
Stars: ✭ 27 (-46%)
Mutual labels:  shaders, glsl
30-days-of-shade
30 days of shaders in GLSL using GLSLCanvas
Stars: ✭ 134 (+168%)
Mutual labels:  shaders, glsl
FNode
Tool based in nodes to build GLSL shaders without any programming knowledge written in C using OpenGL and GLFW.
Stars: ✭ 81 (+62%)
Mutual labels:  shaders, glsl
Unity3D-Plane-Clipping
Plane clipping shaders for Unity3D 5. Extends the Standard shader!
Stars: ✭ 84 (+68%)
Mutual labels:  shaders, glsl
kotlin-glsl
Write your GLSL shaders in Kotlin.
Stars: ✭ 30 (-40%)
Mutual labels:  shaders, glsl

Project logo

License Build Status Badge

Fast Euclidean distance field generation and rendering demo. Run it in the browser.

Usage

The demo performs realtime distance field generation from text drawn on a HTML5 canvas. Type something to add letters, hit backspace or delete to remove letters, use mousewheel to zoom.

Screenshot

How It Works

The technique is based on Chapter 12 of OpenGL Insights by Stefan Gustavson. Refer to the generator code, shaders and readme.

Anti-aliased input (128x128):

Screenshot

Output rendered at (~700x700):

Screenshot

Notes

License

  • The distance field shaders are in the public domain. The rest of the code is provided under the MIT license, unless noted otherwise.
  • Got an idea or suggestion? Open an issue on GitHub, or send Sam a message on Twitter.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].