/skin-alive

Skin Alive! A dynamically-generated flesh UI in WebGL.

Primary LanguageJavaScript

Skin Alive!

A dynamically-generated flesh UI in WebGL.

🏻🏼🏽🏾🏿

The flesh tones available are those provided by the emoji listing.

About the code

twgl.js is used for the syntactic sugar it provides w/r/t WebGL. It is not three.js.

Recommended reading

Veins: lightenberg figures

https://en.wikipedia.org/wiki/Voronoi_diagram
https://lisimba.org/lichtenberg/lichtenberg-live.html

Skin hue variation: perlin/simplex noise

https://en.wikipedia.org/wiki/Perlin_noise
http://asserttrue.blogspot.ca/2012/01/procedural-textures-in-html5-canvas.html
https://github.com/jwagner/simplex-noise.js

Skin crackling: voronoi tesselation

https://en.wikipedia.org/wiki/Voronoi_diagram
http://somethinghitme.com/projects/cell/

3D depth: normal mapping

https://en.wikipedia.org/wiki/Normal_mapping
http://www.fabiensanglard.net/bumpMapping/index.php
http://www.ozone3d.net/tutorials/bump_mapping_p4.php
http://stackoverflow.com/a/2368794
http://learnopengl.com/#!Advanced-Lighting/Normal-Mapping
http://www.pheelicks.com/2014/01/webgl-tombstone-bump-mapping/
https://github.com/mattdesl/lwjgl-basics/wiki/ShaderLesson6
http://math.hws.edu/graphicsbook/source/webgl/bumpmap.html
http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-13-normal-mapping/
http://www.damix.it/public/webgl/normal-mapping.html
http://voxelent.com/html/beginners-guide/chapter_10/ch10_NormalMap.html