<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>WebGL monkey</title> <style type="text/css"> <!-- body {background-color:black; color:white} canvas {float:left;} --> </style> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec3 a_position; attribute vec3 a_normal; uniform mat4 u_proj; varying mediump vec3 v_position; varying mediump vec3 v_normal; void main() { vec4 pos = u_proj * vec4(a_position,1); vec4 norm = u_proj * vec4(a_normal,1); v_position = pos.xyz; v_normal = norm.xyz; gl_Position = pos; } </script> <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; varying vec3 v_position; varying vec3 v_normal; uniform vec3 u_lightPos; uniform vec3 u_ambientLight; void main() { vec3 lightDirection = normalize(u_lightPos - v_position); float lighting = max(dot(normalize(v_normal), lightDirection), 0.); vec3 col = vec3(1,1,1); gl_FragColor = vec4( col * lighting + u_ambientLight, 1); } </script> <script type="text/javascript" src="webgl.js"></script> </head> <body> <canvas id="canvas" height="400" width="400"></canvas> <div><span id="fps"></span> frames per second</div> </body> </html>