Skip to content

Commit d5dc911

Browse files
FlayaNFlayaN
committed
Initial commit with a basic triangle demo
0 parents  commit d5dc911

File tree

8 files changed

+13903
-0
lines changed

8 files changed

+13903
-0
lines changed

‎.project

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<projectDescription>
3+
<name>WebScroller</name>
4+
<comment></comment>
5+
<projects>
6+
</projects>
7+
<buildSpec>
8+
<buildCommand>
9+
<name>com.aptana.ide.core.unifiedBuilder</name>
10+
<arguments>
11+
</arguments>
12+
</buildCommand>
13+
</buildSpec>
14+
<natures>
15+
<nature>com.aptana.projects.webnature</nature>
16+
</natures>
17+
</projectDescription>

‎index.html

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2+
"http://www.w3.org/TR/html4/loose.dtd">
3+
<html xmlns="http://www.w3.org/1999/xhtml">
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<script type="text/javascript" src="scripts/utilities/gl-matrix.js"></script>
7+
<script type="text/javascript" src="scripts/utilities/jquery-1.9.1.js"></script>
8+
<script type="text/javascript" src="scripts/utilities/utils.js"></script>
9+
<script type="text/javascript" src="scripts/main.js"></script>
10+
<title>2DGame</title>
11+
</head>
12+
<body onload="startGL();">
13+
<canvas id="canvas" style="border: none;" width="800" height="600"> </canvas>
14+
</body>
15+
</html>

‎scripts/main.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
var gl;
2+
function initGL(canvas) {
3+
try {
4+
gl = canvas.getContext("experimental-webgl");
5+
gl.viewportWidth = canvas.width;
6+
gl.viewportHeight = canvas.height;
7+
} catch (e) {
8+
}
9+
if (!gl) {
10+
alert("Could not initialise WebGL, sorry :-(");
11+
}
12+
}
13+
14+
var shaderProgram;
15+
16+
function initShaders() {
17+
shaderProgram = utils.addShaderProg(gl, 'main.vert', 'main.frag');
18+
19+
gl.useProgram(shaderProgram);
20+
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
21+
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
22+
23+
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
24+
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
25+
}
26+
27+
var triangleVertexPositionBuffer;
28+
29+
function initBuffers() {
30+
triangleVertexPositionBuffer = gl.createBuffer();
31+
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
32+
var vertices = [
33+
0.0, 1.0, 0.0,
34+
-1.0, -1.0, 0.0,
35+
1.0, -1.0, 0.0];
36+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
37+
triangleVertexPositionBuffer.itemSize = 3;
38+
triangleVertexPositionBuffer.numItems = 3;
39+
}
40+
41+
var mvMatrix = mat4.create();
42+
var pMatrix = mat4.create();
43+
44+
function drawScene() {
45+
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
46+
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
47+
48+
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
49+
50+
mat4.identity(mvMatrix);
51+
52+
mat4.scale(mvMatrix, mvMatrix, [0.5, 0.5, 0.5]);
53+
mat4.translate(mvMatrix, mvMatrix, [-0.5, 0.0, 0.0]);
54+
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
55+
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
56+
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
57+
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
58+
59+
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
60+
}
61+
62+
function startGL() {
63+
var canvas = document.getElementById("canvas");
64+
initGL(canvas);
65+
initShaders();
66+
initBuffers();
67+
68+
gl.clearColor(1.0, 0.0, 0.0, 1.0);
69+
gl.enable(gl.DEPTH_TEST);
70+
71+
drawScene();
72+
}

0 commit comments

Comments
 (0)