Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
327 lines (261 sloc) 7.95 KB
<html>
<head>
<title>t3d test</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<script src="t3d.js"></script>
<script type="text/javascript">
var image1,image2,image3;
var drawObject1, drawObject2, drawObject3;
var projectionMatrix1, projectionMatrix2,projectionMatrix3;
var vertexShaderSource =
" attribute vec3 vertexPos;\n" +
" attribute vec2 tex_coord;\n" +
" varying vec2 v_tex_coord;\n" +
" uniform mat4 projectionMatrix;\n" +
" void main(void) {\n" +
" // Return the transformed and projected vertex value\n" +
" gl_Position = projectionMatrix * vec4(vertexPos, 1.0);\n" +
" v_tex_coord = tex_coord;\n" +
" }\n";
var fragmentShaderSource =
" precision mediump float;\n" +
" uniform vec4 ccolor;\n" +
" varying vec2 v_tex_coord;\n" +
" uniform sampler2D texi;\n" +
" void main(void) {\n" +
" // Return the pixel color: always output white\n" +
" gl_FragColor = 0.8*texture2D(texi, v_tex_coord) + 0.0001*ccolor;\n" +
"}\n";
function draw() {
t3d.startDraw();
var gl = t3d.getGL();
drawObject1.draw();
drawObject2.draw();
//drawObject3.draw();
}
function initObj1() {
projectionMatrix1 = (new Matrix()).translate(-2,0,0).lookAt(0,0,4).frustum(-1,1,-1,1,1,100);
drawObject1 = new DrawObject();
drawObject1.setupProgram(vertexShaderSource, fragmentShaderSource);
var verts = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0 ];
var texPos = [
// Front
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Back
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Top
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Bottom
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Right
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Left
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0
];
drawObject1.addVertexData("vertexPos", 3, verts);
drawObject1.addVertexData("tex_coord", 2, texPos);
var indice = [0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // back
8, 9, 10, 8, 10, 11, // top
12, 13, 14, 12, 14, 15, // bottom
16, 17, 18, 16, 18, 19, // right
20, 21, 22, 20, 22, 23 // left
];
drawObject1.addVertexIndex(indice);
drawObject1.addUniform("projectionMatrix", "matrix", 4, projectionMatrix1);
drawObject1.addUniform("ccolor", "float", 4, [0, 1.0, 0, 0.5]);
drawObject1.addTexture("texi", image1);
}
function initObj2() {
projectionMatrix2 = (new Matrix()).translate(2,0,0).lookAt(0,0,4).frustum(-1,1,-1,1,1,100);
drawObject2 = new DrawObject();
drawObject2.setupProgram(vertexShaderSource, fragmentShaderSource);
var verts = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
// Top face
-1.0, 1.0, -1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
1.0, 1.0, -1.0,
// Bottom face
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
1.0, -1.0, 1.0,
-1.0, -1.0, 1.0,
// Right face
1.0, -1.0, -1.0,
1.0, 1.0, -1.0,
1.0, 1.0, 1.0,
1.0, -1.0, 1.0,
// Left face
-1.0, -1.0, -1.0,
-1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
-1.0, 1.0, -1.0 ];
var texPos = [
// Front
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Back
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Top
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Bottom
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Right
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
// Left
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0
];
drawObject2.addVertexData("vertexPos", 3, verts);
drawObject2.addVertexData("tex_coord", 2, texPos);
var indice = [0, 1, 2, 0, 2, 3, // front
4, 5, 6, 4, 6, 7, // back
8, 9, 10, 8, 10, 11, // top
12, 13, 14, 12, 14, 15, // bottom
16, 17, 18, 16, 18, 19, // right
20, 21, 22, 20, 22, 23 // left
];
drawObject2.addVertexIndex(indice);
drawObject2.addUniform("projectionMatrix", "matrix", 4, projectionMatrix2);
drawObject2.addUniform("ccolor", "float", 4, [0, 1.0, 0, 0.5]);
drawObject2.addTexture("texi", image2);
}
function initObj3() {
projectionMatrix3 = (new Matrix()).lookAt(0,0,2.5).frustum(-1,1,-1,1,1,100);
drawObject3 = new DrawObject();
drawObject3.setupProgram(vertexShaderSource, fragmentShaderSource);
var verts = [
0, .5, 0.0,
-.5, -.5, 0.0,
.5, -.5, 0.0,
];
drawObject3.addVertexData("vertexPos", 3, verts);
var indice = [0,1,2];
drawObject3.addVertexIndex(indice);
drawObject3.addUniform("projectionMatrix", "matrix", 4, projectionMatrix1);
drawObject3.addUniform("ccolor", "float", 4, [0, 0, 1.0, 0.5]);
}
function onLoad() {
image1 = new Image();
image2 = new Image();
image1.onload = function(){
image2.onload = function(){onImgLoad()};
image2.src = "test2.jpg"
};
image1.src = "test1.png";
}
function onImgLoad() {
var canvas = document.getElementById("webglcanvas");
try {
var gl = t3d.init(canvas);
initObj1();
initObj2();
// initObj3();
draw();
var colorStep = 1.0;
var xD = 0;
var yD = 0;
var zD = 0;
window.setInterval(function(){
xD += 2;
yD += 3
zD += 4;
xD = (xD>180)?-180:xD;
yD = (yD>180)?-180:yD;
zD = (zD>180)?-180:zD;
projectionMatrix1 = (new Matrix()).rotate(xD, yD, zD).translate(-2,0,0).lookAt(0,0,4).frustum(-1,1,-1,1,1,100);
drawObject1.addUniform("projectionMatrix", "matrix", 4, projectionMatrix1);
projectionMatrix2 = (new Matrix()).rotate(-yD, -zD, -xD).translate(2,0,0).lookAt(0,0,4).frustum(-1,1,-1,1,1,100);
drawObject2.addUniform("projectionMatrix", "matrix", 4, projectionMatrix2);
/*
projectionMatrix3 = (new Matrix()).rotate(0, -yD, -zD).lookAt(0,0,2.5).frustum(-1,1,-1,1,1,100);
drawObject3.addUniform("projectionMatrix", "matrix", 4, projectionMatrix3);
*/
draw()
}, 30);
}
catch(e) {
alert("Error" + e.toString() + " line:" +e.lineNumber);
}
}
</script>
</head>
<body onload="onLoad();">
<canvas id="webglcanvas" style="border: none;" width="500" height="500"></canvas>
</body>
</html>