Dave Horner's Website - Yet another perspective on things...
Home Tech Talk Programming WebGL canvas and pretty things.
105 guests
Rough Hits : 2954435
moon and stars
how did u find my site?





 
nature of God





 
Don't worry about what anybody else is going to do. The best way to predict the future is to invent it. -- Alan Kay

L:0 I:0 A:0

WebGL canvas and pretty things.

Thursday, 12 June 2014 22:15

WebGL - OpenGL in yo *modern* browser canvas.

WebGL - Wikipedia
WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES 2.0 API. It stays very close to the OpenGL ES 2.0 specification, with some concessions made for what developers expect out of memory-managed languages such as JavaScript.

WebGL brings plugin-free 3D to the web, implemented right into the browser. Major browser vendors Apple (Safari), Google (Chrome), Mozilla (Firefox), and Opera (Opera) are members of the WebGL Working Group.
WebGL Specification
Chrome Experiments - WebGL Experiments
does your browser support WebGL?


html2canvas - Screenshots with JavaScript - take screenshots of your user's DOM in Javascript!
skorulis/stork - PNG images from dynamic drawing on a HTML canvas
hongru/canvas2image


paper.js

Paper.js - Paper.js - Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph/DOM

Processing || p5.js

lmccart/p5.js A JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
p5js.org/workshop - p5.js examples.
Getting started tutorial for p5.js
p5.js CodePen account for examples
antiboredom/p5-ide an IDE for p5.js, grunt.
antiboredom/waves
processing GUI, controlP5 - A GUI (graphical user interface) library for processing. Sliders, Buttons, Toggles, Knobs, Textfields, RadioButtons, Checkboxes


d3.js

D3.js - Data-Driven Documents
Tutorials · mbostock/d3 Wiki
C2: Clojure(Script) data visualization - inspired by d3.js
Raw
Multi-Attribute Rankings - Harvard's tabular data dynamic ranking; not just sortable columns. combine columns visually.


three.js

three.js - JavaScript 3D library
Making MathBox — Acko.net - Presentation-Quality Math with Three.js and WebGL


Scene.js

SceneJS xeoLabs


Game Engines · bebraw/jswiki Wiki - large list of game engines.


KineticJS

KineticJS HTML5 Canvas Framework
Tango with KineticJS - CodePen


Phaser

Phaser - Desktop and Mobile HTML5 game framework
photonstorm/phaser - Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.


Pixi.js

enjoy the power of hardware acceleration without prior knowledge of webGL. it's also fast.
GoodBoyDigital/pixi.js - Super fast HTML 5 2D rendering engine that uses webGL with canvas fallback
Speaking our brains - goodboy blog — goodboy© - maker of pixi's blog.


not all pretty things are WebGL though..and really everyone should know some canvas primitives right?.

Canvas

Canvas Tutorial - Introduction - build yourself a breakout clone.
EaselJS | A Javascript library that makes working with the HTML5 Canvas element easy. CreateJS/EaselJS - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier. Follow EaselJS Example
okapi JS - Okapi.js is a small library for using Adobe Flash's symbol/instance model with HTML5s canvas tag. okapijs/INTRODUCITON at master · okapijs/okapijs
digitalfruit/limejs


other related content from me, but isn't it all...

Music, sound, visuals, art. - Dave Horner's Website - live coding scene...visual programming, algorithmic music generation, like you do.
David Horner on CodePen



(please excuse the autoplay, I couldn't help myself.)
< Prev  Next >
Last Updated on Friday, 19 September 2014 08:11