GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → akira-cn → glsl-doodle

akira-cn / glsl-doodle

Licence: other
Drawing patterns with glsl shaders on modern browsers.

Programming Languages

GLSL
2045 projects
javascript
184084 projects - #8 most used programming language

Labels

webglpatternglslglsl-shaders

Projects that are alternatives of or similar to glsl-doodle

Webgl Fundamentals
WebGL lessons that start with the basics
Stars: ✭ 3,315 (+6154.72%)
Mutual labels:  glsl, glsl-shaders
Radiance
Radiance is video art software for VJs. It supports beat detection, animated GIFs, YouTube video, OpenGL shader effects. It is designed for live performance and runs on Linux and MacOS.
Stars: ✭ 109 (+105.66%)
Mutual labels:  glsl, glsl-shaders
Thebookofshaders
Step-by-step guide through the abstract and complex universe of Fragment Shaders.
Stars: ✭ 4,070 (+7579.25%)
Mutual labels:  glsl, glsl-shaders
shader-art
WebGL art with GLSL shaders.
Stars: ✭ 25 (-52.83%)
Mutual labels:  glsl, glsl-shaders
FNode
Tool based in nodes to build GLSL shaders without any programming knowledge written in C using OpenGL and GLFW.
Stars: ✭ 81 (+52.83%)
Mutual labels:  glsl, glsl-shaders
Blotter
A JavaScript API for drawing unconventional text effects on the web.
Stars: ✭ 2,833 (+5245.28%)
Mutual labels:  glsl, glsl-shaders
3d Game Shaders For Beginners
🎮 A step-by-step guide to implementing SSAO, depth of field, lighting, normal mapping, and more for your 3D game.
Stars: ✭ 11,698 (+21971.7%)
Mutual labels:  glsl, glsl-shaders
deffx
A collection of useful shader effects made ready to be used with the Defold game engine
Stars: ✭ 33 (-37.74%)
Mutual labels:  glsl, glsl-shaders
ModularMusicVisualizer
Project in Hiatus, unmaintained, being rewritten privately. Will Open Source when stuff is ready. Project will be Renamed.
Stars: ✭ 81 (+52.83%)
Mutual labels:  glsl, glsl-shaders
glNoise
A collection of GLSL noise functions for use with WebGL with an easy to use API.
Stars: ✭ 185 (+249.06%)
Mutual labels:  glsl, glsl-shaders
OptimisedCentresOfRotationSkinning
Library to Compute Centres of Rotation for Optimised Centres of Rotation Skinning by Le and Hodgins 2016 "Real-time Skeletal Skinning with Optimized Centers of Rotation"
Stars: ✭ 28 (-47.17%)
Mutual labels:  glsl, glsl-shaders
ShaderBoy
Simple text editor that lets you write Shadertoy shaders more comfortably, anytime, anywhere.
Stars: ✭ 133 (+150.94%)
Mutual labels:  glsl, glsl-shaders
YALCT
Yet Another Live Coding Tool - Powered by Veldrid and elbow grease
Stars: ✭ 25 (-52.83%)
Mutual labels:  glsl, glsl-shaders
Vuh
Vulkan compute for people
Stars: ✭ 264 (+398.11%)
Mutual labels:  glsl, glsl-shaders
30-days-of-shade
30 days of shaders in GLSL using GLSLCanvas
Stars: ✭ 134 (+152.83%)
Mutual labels:  glsl, glsl-shaders
Shaderkit
A library of fragment shaders you can use in any SpriteKit project.
Stars: ✭ 488 (+820.75%)
Mutual labels:  glsl, glsl-shaders
kotlin-glsl
Write your GLSL shaders in Kotlin.
Stars: ✭ 30 (-43.4%)
Mutual labels:  glsl, glsl-shaders
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 (+0%)
Mutual labels:  glsl, glsl-shaders
React Regl
React Fiber Reconciler Renderer for Regl WebGL
Stars: ✭ 171 (+222.64%)
Mutual labels:  glsl, glsl-shaders
qml-glsl-coder
live editor of GLSL fragment shaders based on Qt / QML
Stars: ✭ 19 (-64.15%)
Mutual labels:  glsl, glsl-shaders
View All Similar Projects ➔

glsl-doodle

Drawing patterns with glsl shaders on modern browsers.

https://doodle.webgl.group/

Usage

From CDN:

<script src="https://unpkg.com/[email protected]/dist/glsl-doodle.js"></script>
<glsl-doodle for="myShader"></glsl-doodle>
<script id="myShader" type="x-shader/x-fragment">
#ifdef GL_ES
precision mediump float;
#endif

#pragma include <graphics>
#pragma include <color>
#pragma include <pattern>

uniform vec2 dd_resolution;
uniform vec2 dd_randseed0;

void main() {
  vec2 st = gl_FragCoord.xy / dd_resolution;
  // st = polar(st);
  vec2 grid = vec2(10, 10);
  vec2 idx = grid_index(st, grid);
  st = grid_xy(st, grid);

  box2 box = create_box();
  box = scale(box, center(box), vec2(random(idx, 0.1, 0.9)));
  st = box_quad(st, box);

  float pct = sdf_rect(st, vec2(0), 1.0, 1.0);
  color(fill(pct, 0.0), random3(idx + dd_randseed0));
}
</script>

With external resource:

<script src="https://unpkg.com/[email protected]/dist/glsl-doodle.js"></script>
<glsl-doodle src="https://raw.githubusercontent.com/akira-cn/glsl-doodle/master/demos/preview/grids/index.glsl"></glsl-doodle>

From NPM:

npm i glsl-doodle --save
import Doodle from 'glsl-doodle';
(async function () {
  const doodle = new Doodle();
  const program = await doodle.load('https://raw.githubusercontent.com/akira-cn/glsl-doodle/master/demos/preview/grids/index.glsl');
  doodle.useProgram(program);
  doodle.render();
}());

For more information, please visit https://doodle.webgl.group/.

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].