Many Things are shaping up.
The HTML File
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex" >
attribute vec4 aPosition;
attribute vec3 aBC;
uniform mat4 uTransform;
varying vec3 vBC;
void main() {
gl_Position = uTransform * aPosition;
vBC = aBC;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#extension GL_OES_standard_derivatives : enable
precision mediump float;
varying vec3 vBC;
float edgeFactor(){
vec3 d = fwidth(vBC);
vec3 a3 = smoothstep(vec3(0.0), d*1.5, vBC);
return min(min(a3.x, a3.y), a3.z);
}
void main(){
if (gl_FrontFacing) {
gl_FragColor = vec4(0.0, 0.0, 0.0, (1.0-edgeFactor())*0.95);
} else {
discard;
}
}
</script>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="../Models/cone.js"></script>
<script type="text/javascript" src="../Models/cube.js"></script>
<script type="text/javascript" src="../Models/dragon.js"></script>
<script type="text/javascript" src="../Models/epcot.js"></script>
<script type="text/javascript" src="../Models/lizard.js"></script>
<script type="text/javascript" src="../Models/tank.js"></script>
<script type="text/javascript" src="../Models/teapot.js"></script>
<script type="text/javascript" src="modelDisplay.js"></script>
<script type="text/javascript" src="step1.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
input {
text-align: right;
}
</style>
</head>
<body>
<h1>Many Things are shaping up.</h1>
<script>
// set up the canvas
var canvas = new Canvas(500, 500);
var models = [];
//add a callback for keypresses
canvas.disp.addEventListener("keypress",
function(evnt) {
KeyFunc(evnt, canvas, models);
}
);
// build the scene
MakeScene(models);
// redisplay it.
DoRedisplay(canvas, models);
</script>
</body>
main.js
'use strict';
// counts on canvas and models being global.
function DoRedisplay(canvas, models) {
var i;
canvas.Redisplay();
for (i = 0; i< models.length; i++) {
models[i].Display();
}
};
function KeyFunc(evnt, canvas, models) {
switch(evnt.key) {
case 'X': canvas.Rotate('x', 'r'); break;
case 'Y': canvas.Rotate('y', 'r'); break;
case 'Z': canvas.Rotate('z', 'r'); break;
case 'x': canvas.Rotate('x', 'f'); break;
case 'y': canvas.Rotate('y', 'f'); break;
case 'z': canvas.Rotate('z', 'f'); break;
case 'r': canvas.Reset(); break;
}
DoRedisplay(canvas, models);
};
function MakeScene(modelList) {
var cone = new coneModel();
var teapot= new teapotModel();
var lizard= new lizardModel();
var model1 = new ModelDisplay(canvas, cone);
modelList.push(model1);
var model2 = new ModelDisplay(canvas, teapot);
modelList.push(model2);
var model3 = new ModelDisplay(canvas, lizard);
modelList.push(model3);
return;
}
step1.js
'use strict';
function MakeCanvas(width, height, locID) {
if (width == undefined || width < 0) {
width = 300;
}
if (height == undefined || height < 0) {
height = 300;
}
var canvas = document.createElement('canvas')
canvas.tabIndex = 0;
canvas.height = height;
canvas.width = width;
canvas.style.border = "1px solid #0000FF";
if(locID == undefined) {
document.body.appendChild(canvas);
} else {
div = document.getElementById(locID);
if (null == div) {
document.body.appendChild(canvas);
} else {
div.appendChild(canvas);
}
}
document.body.appendChild(canvas);
return canvas;
}
function InitGL(canvas) {
var gl = WebGLUtils.setupWebGL(canvas,'OES_standard_derivatives');
if (!gl) {
alert ("WebGL isn't available");
}
// required to turn on fwidth and such.
gl.getExtension('OES_standard_derivatives');
return gl;
}
function Canvas(width, height, locID) {
this.disp = MakeCanvas(width, height, locID);
var gl = InitGL(this.disp);
this.gl = gl;
var tmpCanvas = this;
this.x = this.disp.offsetLeft;
this.y = this.disp.offsetTop;
gl.viewport(0,0, width, height);
this.program = initShaders(gl, "vertex-shader","fragment-shader");
gl.useProgram(this.program);
this.transformLoc = gl.getUniformLocation(this.program, "uTransform");
this.Init();
return this;
}
Canvas.prototype = {
Init: function() {
this.gl.clearColor(1.0, 1.0, 1.0, 1.0);
this.gl.enable(this.gl.BLEND);
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
this.gl.enable(this.gl.DEPTH_TEST);
this.gl.depthFunc(this.gl.LESS);
this.gl.depthMask(this.gl.TRUE);
this.shaderChoice = false;
this.gl.uniform1f(this.shaderLoc, 0.0);
this.gl.enable(this.gl.CULL_FACE);
this.gl.frontFace(this.gl.CCW);
this.gl.cullFace(this.gl.BACK);
this.Reset();
},
Rotate: function(axis, dir) {
var change = 5;
if (dir =='r') {
change = -5;
}
switch(axis) {
case 'x': this.xr += change; break;
case 'y': this.yr += change; break;
case 'z': this.zr += change; break;
}
},
Reset: function() {
this.xr = 0;
this.yr = 0;
this.zr = 0;
},
Redisplay: function() {
var transform = mat4(1);
// this probably doesn't belong here
transform = mult(transform, rotate(this.xr, [1,0,0]));
transform = mult(transform, rotate(this.yr, [0,1,0]));
transform = mult(transform, rotate(this.zr, [0,0,1]));
this.gl.uniformMatrix4fv(this.transformLoc,false, flatten(transform ));
this.gl.clear(this.gl.COLOR_BUFFER_BIT | this.gl.DEPTH_BUFFER_BIT);
return;
}
};
modelDisplay.js
'use strict';
/*
ModelDisplay is responsible for
Maintaining a connection between the vertex buffer and the model
Displaying the model when called.
*/
function ModelDisplay(canvas, model) {
this.gl = canvas.gl;
var gl = canvas.gl;
this.vboTriangles = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vboTriangles);
this.pointCount = model.Triangles.length;
this.vPos = gl.getAttribLocation(canvas.program, "aPosition");
gl.vertexAttribPointer(this.vPos,3,gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(this.vPos);
gl.bufferData(gl.ARRAY_BUFFER,flatten(model.Triangles),gl.STATIC_DRAW);
this.vboBC = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, this.vboBC);
this.vBC = gl.getAttribLocation(canvas.program, "aBC");
gl.vertexAttribPointer(this.vBC,3,gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(this.vBC);
gl.bufferData(gl.ARRAY_BUFFER,flatten(model.BC),gl.STATIC_DRAW);
};
ModelDisplay.prototype= {
Display() {
var gl = this.gl;
gl.bindBuffer(gl.ARRAY_BUFFER, this.vboTriangles);
gl.vertexAttribPointer(this.vPos,3,gl.FLOAT, false,0,0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.vboBC);
gl.vertexAttribPointer(this.vBC,3,gl.FLOAT, false,0,0);
this.gl.drawArrays(this.gl.TRIANGLES, 0, this.pointCount);
}
};