Artur

GLSL shading in WebGL

Rate this Entry

My first attempt at WebGL using Three.js libraries. Check it: http://www.vill.ee/eye

Eye shader main features:
  • Texture raytracing to simulate cornea refractions
  • Loads of parameters to customize the eye
  • Cornea vertex displacement
  • Normal maps
  • Reflections
  • Simple image based 'lighting'

There is still some room for optimization in fragment shader. I feel like, I'm doing too many space transformations at the end. Also, I couldn't figure out how to access gl_ModelViewMatrixInverse in vertex shader so modelViewMatrix gets inverted in the vertex shader. Recalculating normals of displaced vertices is also questionable. I'm planning to add cat eye shape and caustics.

Environments from hdrlabs.com and zbyg.deviantart.com
Eye textures from milesresearch.com and Lukas Hajka

Images processed with Photoshop and Crazybump

Submit "GLSL shading in WebGL" to Digg Submit "GLSL shading in WebGL" to del.icio.us Submit "GLSL shading in WebGL" to StumbleUpon Submit "GLSL shading in WebGL" to Google

Updated 02-24-2014 at 11:36 PM by Artur

Tags: None Add / Edit Tags
Categories
Uncategorized

Comments