GLSL shading in WebGL

Rating: 4 votes, 4.75 average.

My first attempt at WebGL using Three.js libraries. Check it:

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 and
Eye textures from and Lukas Hajka

Images processed with Photoshop and Crazybump

Submit "GLSL shading in WebGL" to Digg Submit "GLSL shading in WebGL" to Submit "GLSL shading in WebGL" to StumbleUpon Submit "GLSL shading in WebGL" to Google

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

Tags: None Add / Edit Tags