/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1

« back to all changes in this revision

Viewing changes to trunk/WebGL and Benchmarking/Test1ShaderStartup.html

  • Committer: a11vikob
  • Date: 2013-03-28 15:33:33 UTC
  • mto: (4.2.2 hitlerhorabajs)
  • mto: This revision was merged to the branch mainline in revision 5.
  • Revision ID: a11vikob@student.his.se-20130328153333-2jf1mut7h63n28ra
Indentation etc fixed

Show diffs side-by-side

added added

removed removed

Lines of Context:
trunk/WebGL and Benchmarking/Test1ShaderStartup.html
1
 
<!DOCTYPE html>
2
 
<html>
3
 
 
4
 
<head>
5
 
        <title>Shader Startup Benchmark</title>
6
 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
7
 
 
8
 
        <script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
9
 
        <script type="text/javascript" src="webgl-utils.js"></script>
10
 
        <script type="text/javascript" src="webgl-helpers.js"></script>
11
 
        <script type="text/javascript" src="httpAjax.js"></script>
12
 
 
13
 
        <script id="shader-fs" type="x-shader/x-fragment">
14
 
                precision mediump float;
15
 
 
16
 
                uniform vec2 iResolution;
17
 
                uniform float iGlobalTime;
18
 
 
19
 
                void main(void) {
20
 
                        vec2 uv = gl_FragCoord.xy / iResolution.xy;
21
 
                        gl_FragColor = vec4(uv, 0.5 + 0.5 * sin(iGlobalTime), 1.0);
22
 
                }
23
 
 
24
 
        </script>
25
 
 
26
 
        <script id="shader-vs" type="x-shader/x-vertex">
27
 
                attribute vec3 aVertexPosition;
28
 
 
29
 
                uniform mat4 uMVMatrix;
30
 
                uniform mat4 uPMatrix;
31
 
 
32
 
                varying vec4 vColor;
33
 
 
34
 
                void main(void) {
35
 
                        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
36
 
                }
37
 
        </script>
38
 
 
39
 
 
40
 
        <script type="text/javascript">
41
 
 
42
 
                function initShaders() {
43
 
                        var fragmentShader = getShader(gl, "shader-fs");
44
 
                        var vertexShader = getShader(gl, "shader-vs");
45
 
 
46
 
                        shaderProgram = gl.createProgram();
47
 
                        gl.attachShader(shaderProgram, vertexShader);
48
 
                        gl.attachShader(shaderProgram, fragmentShader);
49
 
                        gl.linkProgram(shaderProgram);
50
 
 
51
 
                        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
52
 
                                alert("Could not initialise shaders");
53
 
                        }
54
 
 
55
 
                        gl.useProgram(shaderProgram);
56
 
 
57
 
                        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
58
 
                        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
59
 
 
60
 
                        shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
61
 
                        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
62
 
 
63
 
                        shaderProgram.iResolutionUniform = gl.getUniformLocation(shaderProgram, "iResolution");
64
 
                        shaderProgram.iGlobalTimeUniform = gl.getUniformLocation(shaderProgram, "iGlobalTime");
65
 
 
66
 
                }
67
 
 
68
 
                var squareVertexPositionBuffer;
69
 
 
70
 
                function initBuffers() {
71
 
                        squareVertexPositionBuffer = gl.createBuffer();
72
 
                        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
73
 
                        vertices = [
74
 
                                1.0,  1.0,  0.0,
75
 
                                -1.0,  1.0,  0.0,
76
 
                                1.0, -1.0,  0.0,
77
 
                                -1.0, -1.0,  0.0
78
 
                        ];
79
 
                        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
80
 
                        squareVertexPositionBuffer.itemSize = 3;
81
 
                        squareVertexPositionBuffer.numItems = 4;
82
 
                }
83
 
 
84
 
                function drawScene() {
85
 
                        gl.uniform2f(shaderProgram.iResolutionUniform, gl.viewportWidth, gl.viewportHeight);
86
 
                        gl.uniform1f(shaderProgram.iGlobalTimeUniform, timecount);
87
 
 
88
 
                        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
89
 
                        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
90
 
 
91
 
                        mat4.ortho(-1, 1, -1, 1, -1, 1, pMatrix);
92
 
                        mat4.identity(mvMatrix);
93
 
 
94
 
                        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
95
 
                        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
96
 
 
97
 
                        gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
98
 
                        gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
99
 
 
100
 
                        gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
101
 
                }
102
 
 
103
 
 
104
 
                var lastTime = 0;
105
 
 
106
 
                function animate() {
107
 
                        var timeNow = new Date().getTime();
108
 
                        if (lastTime != 0) {
109
 
                                var elapsed = timeNow - lastTime;
110
 
                        }
111
 
                        lastTime = timeNow;
112
 
 
113
 
                        updatefps(elapsed, "fps");
114
 
                        sendbenchmark(8.0, "Startup Screenaligned");
115
 
                }
116
 
 
117
 
                function tick() {
118
 
                        requestAnimFrame(tick);
119
 
                        drawScene();
120
 
                        animate();
121
 
                }
122
 
 
123
 
                function webGLStart(canvas) {
124
 
                        var canvas = document.getElementById(canvas);
125
 
                        initGL(canvas);
126
 
                        initShaders();
127
 
                        initBuffers();
128
 
 
129
 
                        gl.clearColor(0.0, 0.0, 0.0, 1.0);
130
 
                        gl.enable(gl.DEPTH_TEST);
131
 
 
132
 
                        tick();
133
 
                }    
134
 
 
135
 
        </script>
136
 
 
137
 
</head>
138
 
 
139
 
 
140
 
<body onload="genID('Startup Screenaligned'); webGLStart('canvas');">
141
 
 
142
 
        <canvas id="canvas" style="border: none;" width="400" height="400"></canvas>
143
 
        <div id="fps"></div>
144
 
 
145
 
</body>
146
 
 
147
 
</html>
 
1
<html>
 
2
 
 
3
<head>
 
4
<title>Shader Startup Benchmark</title>
 
5
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 
6
 
 
7
<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
 
8
<script type="text/javascript" src="webgl-utils.js"></script>
 
9
<script type="text/javascript" src="webgl-helpers.js"></script>
 
10
<script type="text/javascript" src="httpAjax.js"></script>
 
11
 
 
12
<script id="shader-fs" type="x-shader/x-fragment">
 
13
    precision mediump float;
 
14
 
 
15
    uniform vec2 iResolution;
 
16
    uniform float iGlobalTime;
 
17
 
 
18
    void main(void) {
 
19
                                vec2 uv = gl_FragCoord.xy / iResolution.xy;
 
20
                                gl_FragColor = vec4(uv,0.5+0.5*sin(iGlobalTime),1.0);
 
21
    }
 
22
 
 
23
</script>
 
24
 
 
25
<script id="shader-vs" type="x-shader/x-vertex">
 
26
    attribute vec3 aVertexPosition;
 
27
 
 
28
    uniform mat4 uMVMatrix;
 
29
    uniform mat4 uPMatrix;
 
30
    
 
31
    varying vec4 vColor;
 
32
 
 
33
    void main(void) {
 
34
        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
 
35
    }
 
36
</script>
 
37
 
 
38
 
 
39
<script type="text/javascript">
 
40
 
 
41
    function initShaders() {
 
42
        var fragmentShader = getShader(gl, "shader-fs");
 
43
        var vertexShader = getShader(gl, "shader-vs");
 
44
 
 
45
        shaderProgram = gl.createProgram();
 
46
        gl.attachShader(shaderProgram, vertexShader);
 
47
        gl.attachShader(shaderProgram, fragmentShader);
 
48
        gl.linkProgram(shaderProgram);
 
49
 
 
50
        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
 
51
            alert("Could not initialise shaders");
 
52
        }
 
53
 
 
54
        gl.useProgram(shaderProgram);
 
55
 
 
56
        shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
 
57
        gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
 
58
 
 
59
        shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
 
60
        shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
 
61
    
 
62
        shaderProgram.iResolutionUniform = gl.getUniformLocation(shaderProgram, "iResolution");
 
63
        shaderProgram.iGlobalTimeUniform = gl.getUniformLocation(shaderProgram, "iGlobalTime");
 
64
                
 
65
    }
 
66
 
 
67
    var squareVertexPositionBuffer;
 
68
 
 
69
    function initBuffers() 
 
70
    {
 
71
        squareVertexPositionBuffer = gl.createBuffer();
 
72
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
 
73
        vertices = [
 
74
             1.0,  1.0,  0.0,
 
75
            -1.0,  1.0,  0.0,
 
76
             1.0, -1.0,  0.0,
 
77
            -1.0, -1.0,  0.0
 
78
            ];
 
79
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
 
80
        squareVertexPositionBuffer.itemSize = 3;
 
81
        squareVertexPositionBuffer.numItems = 4;
 
82
    }
 
83
 
 
84
    function drawScene()
 
85
    {
 
86
        gl.uniform2f(shaderProgram.iResolutionUniform,gl.viewportWidth,gl.viewportHeight);
 
87
        gl.uniform1f(shaderProgram.iGlobalTimeUniform,timecount);
 
88
            
 
89
        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
 
90
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
91
 
 
92
                                mat4.ortho(-1, 1, -1, 1, -1, 1, pMatrix)
 
93
        mat4.identity(mvMatrix);
 
94
 
 
95
        gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
 
96
        gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
97
 
 
98
        gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
 
99
        gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
 
100
 
 
101
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
 
102
    }
 
103
 
 
104
 
 
105
    var lastTime = 0;
 
106
 
 
107
    function animate()
 
108
    {
 
109
        var timeNow = new Date().getTime();
 
110
        if (lastTime != 0) {
 
111
            var elapsed = timeNow - lastTime;
 
112
        }
 
113
        lastTime = timeNow;
 
114
                                
 
115
                                updatefps(elapsed,"fps");
 
116
                                sendbenchmark(8.0,"Startup Screenaligned");
 
117
    }
 
118
 
 
119
    function tick() {
 
120
        requestAnimFrame(tick);
 
121
        drawScene();
 
122
        animate();
 
123
    }
 
124
    
 
125
    function webGLStart(canvas) {
 
126
        var canvas = document.getElementById(canvas);
 
127
        initGL(canvas);
 
128
        initShaders()
 
129
        initBuffers();
 
130
 
 
131
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
 
132
        gl.enable(gl.DEPTH_TEST);
 
133
 
 
134
        tick();
 
135
    }    
 
136
    
 
137
</script>
 
138
 
 
139
</head>
 
140
 
 
141
 
 
142
<body onload="genID('Startup Screenaligned');webGLStart('canvas');">
 
143
 
 
144
    <canvas id="canvas" style="border: none;" width="400" height="400"></canvas>
 
145
    <div id="fps"></div>
 
146
 
 
147
</body>
 
148
 
 
149
</html>