glt

WebGL/GLSL Procedural Texture Generator

We all began as something else…

Early stage! Work in progress!

Demo

Desktop Chrome should work.

glt-vue

Powered by:

• vue
• vue-material
• material-design-lite for slider

glt-ng4

Powered by:

• angular
• material2
• flex-layout

vue vs ng4 notes

I am new to both ng2/ng4 and vue.

vue

• smaller footprint
• easier to learn
• faster development state preserving hot reload
• route using same component preserves the component, it means less new <canvas> created
• UI components:
  • mostly missing focus highlight
  • vue-mdl might be better choice?
  • cross-browser compatibility?
  • future? perhaps MDC?
• sometimes feels (in a good way) more like AngularJS than Angular 2

ng4

• switched from ng2/ts, and ng2/js before, js was purely documented
• experimental Angular 4.0.0
• ng4 smaller than ng2, also faster dev reload
• slower app loading, but ng4 is better than ng2
• bigger download size
• more browser memory used
• UI components backed by Google

Components

glt

• compile graph JSON format to shader
• shader format Three.js
• shader format GLSL Sandbox
• shader format Shadertoy
• Three.js based renderer

glt-vue

components/glt-vue/dist/

• vue.js based single page application

glt-ng4

components/glt-ng4/dist/

• angular-cli based single page application
• reusing single rendering context

glt-extractor

• build utility parsing GLSL functions to JSON with dependencies

glt-minify

• reducing whitespaces in GLSL
• based on glsl-parser and glsl-deparser

glt-samples

• testing samples in graph JSON format
• demo samples in graph JSON format