machine.js
author Eugen Sawin <sawine@me73.com>
Sun, 18 Dec 2011 19:15:59 +0100
changeset 76 681b1d7dc3a9
permissions -rw-r--r--
Prettier lines.
sawine@73
     1
function main()
sawine@73
     2
{
sawine@73
     3
    var canvas = document.getElementById("machine");
sawine@73
     4
    var context = new Context(canvas);
sawine@73
     5
    var gl = context.gl;
sawine@73
     6
    context.object = new Box(1, context);
sawine@73
     7
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
sawine@73
     8
    gl.enable(gl.DEPTH_TEST);
sawine@73
     9
    draw(context);
sawine@73
    10
}
sawine@73
    11
sawine@73
    12
function Context(canvas)
sawine@73
    13
{
sawine@73
    14
    try 
sawine@73
    15
    {
sawine@73
    16
	this.gl = canvas.getContext("experimental-webgl");
sawine@73
    17
	this.viewport = {'width': canvas.width,
sawine@73
    18
			 'height': canvas.height};
sawine@73
    19
    } 
sawine@73
    20
    catch(e) 
sawine@73
    21
    {
sawine@73
    22
	alert(e);
sawine@73
    23
    }
sawine@73
    24
    if (!this.gl) alert("Failed: WebGL init.");
sawine@73
    25
    this.mvMatrix = mat4.create();
sawine@73
    26
    this.pMatrix = mat4.create();
sawine@73
    27
    this.shader = new Shader(this);    
sawine@73
    28
}
sawine@73
    29
Context.prototype.updateMatrixUniforms = function()
sawine@73
    30
{
sawine@73
    31
    var gl = this.gl;
sawine@73
    32
    var program = this.shader.program;
sawine@73
    33
    var pMatrix = this.pMatrix;
sawine@73
    34
    var mvMatrix = this.mvMatrix;
sawine@73
    35
    gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
sawine@73
    36
    gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
sawine@73
    37
}
sawine@73
    38
sawine@73
    39
function Shader(context)
sawine@73
    40
{
sawine@73
    41
    var gl = context.gl;
sawine@73
    42
    var fragment = loadShader(gl, "shader-fs");
sawine@73
    43
    var vertex = loadShader(gl, "shader-vs");
sawine@73
    44
    this.program = gl.createProgram();
sawine@73
    45
    gl.attachShader(this.program, vertex);
sawine@73
    46
    gl.attachShader(this.program, fragment);
sawine@73
    47
    gl.linkProgram(this.program);
sawine@73
    48
sawine@73
    49
    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
sawine@73
    50
    {
sawine@73
    51
	alert("Failed: Shader init.");
sawine@73
    52
    }
sawine@73
    53
sawine@73
    54
    gl.useProgram(this.program);
sawine@73
    55
    this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
sawine@73
    56
    gl.enableVertexAttribArray(this.vertexPosition);
sawine@73
    57
    this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
sawine@73
    58
    this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
sawine@73
    59
sawine@73
    60
    function loadShader(gl, id)
sawine@73
    61
    {
sawine@73
    62
	var script = document.getElementById(id);
sawine@73
    63
	if (!script) return null;
sawine@73
    64
	
sawine@73
    65
	var str = "";
sawine@73
    66
	var child = script.firstChild;
sawine@73
    67
	while (child)
sawine@73
    68
	{
sawine@73
    69
	    if (child.nodeType == 3) str += child.textContent;
sawine@73
    70
	    child = child.nextSibling;
sawine@73
    71
	}
sawine@73
    72
	
sawine@73
    73
	var shader;
sawine@73
    74
	var common = "x-shader/x-";
sawine@73
    75
	if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);
sawine@73
    76
	else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER);
sawine@73
    77
	else return null;
sawine@73
    78
sawine@73
    79
	gl.shaderSource(shader, str);
sawine@73
    80
	gl.compileShader(shader);
sawine@73
    81
sawine@73
    82
	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
sawine@73
    83
        {
sawine@73
    84
	    alert(gl.getShaderInfoLog(shader));
sawine@73
    85
	    return null;
sawine@73
    86
	}
sawine@73
    87
sawine@73
    88
	return shader;
sawine@73
    89
    }
sawine@73
    90
}
sawine@73
    91
sawine@73
    92
sawine@73
    93
function Box(size, context)
sawine@73
    94
{
sawine@73
    95
    var gl = context.gl;
sawine@73
    96
    this.size = size || 1;
sawine@73
    97
    this.buffer = gl.createBuffer();
sawine@73
    98
    gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
sawine@73
    99
    var vertices = [1.0, 1.0, 0.0,
sawine@73
   100
		    -1.0, 1.0, 0.0,
sawine@73
   101
		    1.0, -1.0, 0.0,
sawine@73
   102
		    -1.0, -1.0, 0.0];
sawine@73
   103
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
sawine@73
   104
    this.itemSize = 3;
sawine@73
   105
    this.numItems = 4;
sawine@73
   106
}
sawine@73
   107
sawine@73
   108
function draw(context)
sawine@73
   109
{
sawine@73
   110
    var gl = context.gl;
sawine@73
   111
    var viewport = context.viewport;
sawine@73
   112
    var shader = context.shader;
sawine@73
   113
    var mvMatrix = context.mvMatrix;
sawine@73
   114
    var pMatrix = context.pMatrix;
sawine@73
   115
    var object = context.object;
sawine@73
   116
    gl.viewport(0, 0, viewport.width, viewport.height);
sawine@73
   117
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
sawine@73
   118
    mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
sawine@73
   119
    mat4.identity(mvMatrix);
sawine@73
   120
    mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
sawine@73
   121
    gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer);
sawine@73
   122
    gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0); 
sawine@73
   123
    gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
sawine@73
   124
    gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix);
sawine@73
   125
    //context.updateMatrixUniforms();
sawine@73
   126
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems);
sawine@73
   127
    return context;
sawine@73
   128
} 
sawine@73
   129
sawine@73
   130
function drawScene(context) {
sawine@73
   131
        gl.viewport(0, 0, viewport.width, viewport.height);
sawine@73
   132
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
sawine@73
   133
 
sawine@73
   134
        mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
sawine@73
   135
 
sawine@73
   136
        mat4.identity(mvMatrix); 
sawine@73
   137
        mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
sawine@73
   138
  
sawine@73
   139
        gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer);
sawine@73
   140
        gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0);
sawine@73
   141
        gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
sawine@73
   142
	gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix);
sawine@73
   143
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems);
sawine@73
   144
    }
sawine@73
   145