bringhurst · February 28, 2011 17:55
diff --git a/webgl example one b/webgl example one
 <!DOCTYPE html>
 <html lang="en">
    <head>
        <script id="fragmentShader" type="x-shader/x-fragment"> 
            #ifdef GL_ES
                precision highp float;
            #endif

            void main() {
                gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
            }
        </script>
        <script id="vertexShader" type="x-shader/x-vertex">
            uniform float pointSize;
            attribute vec2 vPosition;

            void main() {
                gl_PointSize = pointSize;
                gl_Position = vec4(vPosition, 0, 1);
            }
        </script>
    </head>
    <body>
        <canvas id="canvas-out" width="512" height="512"></canvas>
        <script>
            var EXAMPLE_ONE = {};
            (function(APP) {
                APP.gl = document.getElementById("canvas-out").getContext("experimental-webgl");

                APP.setupShaders = function () {
                    var fragmentShader = APP.gl.createShader(APP.gl.FRAGMENT_SHADER);
                    APP.gl.shaderSource(fragmentShader,
                        document.getElementById("fragmentShader").firstChild.nodeValue);
                    APP.gl.compileShader(fragmentShader);

                    var vertexShader = APP.gl.createShader(APP.gl.VERTEX_SHADER);
                    APP.gl.shaderSource(vertexShader,
                        document.getElementById("vertexShader").firstChild.nodeValue);
                    APP.gl.compileShader(vertexShader);

                    APP.shaderProgram = APP.gl.createProgram();
                    APP.gl.attachShader(APP.shaderProgram, vertexShader);
                    APP.gl.attachShader(APP.shaderProgram, fragmentShader);
                    APP.gl.linkProgram(APP.shaderProgram);

                    APP.gl.useProgram(APP.shaderProgram);

                    APP.vPosition = APP.gl.getAttribLocation(APP.shaderProgram, "vPosition");
                    APP.gl.enableVertexAttribArray(APP.vPosition);
                };

                APP.serpenski = function (n) {
                    var vertices = [[-1,-1],[0,1],[1,-1]],
                        points = [],
                        j,k;

                    points.push([0.25,0.50]);

                    for (k = 1; k < n; k++) {
                        j = Math.floor(Math.random() * 3) % 3;
                        points.push([
                            (points[k-1][0] + vertices[j][0]) / 2.0,
                            (points[k-1][1] + vertices[j][1]) / 2.0
                        ]);
                    }

                    return points;
                };

                APP.flatten = function (m) {
                    var result = [],i,j;

                    for (i=0; i < m.length; i++) {
                        for (j=0; j < m[i].length; j++) {
                            result.push(m[i][j]);
                        }
                    }

                    return result;
                };

                APP.createBuffers = function () {
                    var points = APP.serpenski(APP.N);
                    APP.elemSize = points[0].length;

                    APP.vertexPositionBuffer = APP.gl.createBuffer();
                    APP.gl.bindBuffer(APP.gl.ARRAY_BUFFER, APP.vertexPositionBuffer); 

                    APP.gl.bufferData(APP.gl.ARRAY_BUFFER,
                        new Float32Array(APP.flatten(points)), APP.gl.STATIC_DRAW); 
                };

                APP.setUniforms = function () {
                    APP.gl.uniform1f(
                        APP.gl.getUniformLocation(APP.shaderProgram, "pointSize"), 3.0);
                };

                APP.setup = function () {
                    APP.N = 5000;
                    APP.setupShaders();
                    APP.setUniforms();
                    APP.createBuffers();

                    APP.gl.clearColor(1, 1, 0, 1);
                    APP.gl.clearDepth(1);
                    APP.gl.enable(APP.gl.DEPTH_TEST);
                    APP.gl.enable(0x0B10); //#define GL_POINT_SMOOTH    0x0B10
                    APP.gl.depthFunc(APP.gl.LEQUAL);
                };

                APP.display = function () {
                    APP.gl.clear(APP.gl.COLOR_BUFFER_BIT | APP.gl.DEPTH_BUFFER_BIT);

                    APP.gl.bindBuffer(APP.gl.ARRAY_BUFFER, APP.vertexPositionBuffer);
                    APP.gl.vertexAttribPointer(
                        APP.vPosition, APP.elemSize, APP.gl.FLOAT, false, 0, 0);

                    APP.gl.drawArrays(APP.gl.POINTS, 0, APP.N);
                };
            }(EXAMPLE_ONE));

            EXAMPLE_ONE.setup();

            (function loop() {
                window.setTimeout(function() {
                    EXAMPLE_ONE.display();
                    loop();
                }, 10);
            }());
        </script>
    </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script id="fragmentShader" type="x-shader/x-fragment">
	#ifdef GL_ES
	precision highp float;
	#endif

	void main() {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	}
	</script>
	<script id="vertexShader" type="x-shader/x-vertex">
	uniform float pointSize;
	attribute vec2 vPosition;

	void main() {
	gl_PointSize = pointSize;
	gl_Position = vec4(vPosition, 0, 1);
	}
	</script>
	</head>
	<body>
	<canvas id="canvas-out" width="512" height="512"></canvas>
	<script>
	var EXAMPLE_ONE = {};
	(function(APP) {
	APP.gl = document.getElementById("canvas-out").getContext("experimental-webgl");

	APP.setupShaders = function () {
	var fragmentShader = APP.gl.createShader(APP.gl.FRAGMENT_SHADER);
	APP.gl.shaderSource(fragmentShader,
	document.getElementById("fragmentShader").firstChild.nodeValue);
	APP.gl.compileShader(fragmentShader);

	var vertexShader = APP.gl.createShader(APP.gl.VERTEX_SHADER);
	APP.gl.shaderSource(vertexShader,
	document.getElementById("vertexShader").firstChild.nodeValue);
	APP.gl.compileShader(vertexShader);

	APP.shaderProgram = APP.gl.createProgram();
	APP.gl.attachShader(APP.shaderProgram, vertexShader);
	APP.gl.attachShader(APP.shaderProgram, fragmentShader);
	APP.gl.linkProgram(APP.shaderProgram);

	APP.gl.useProgram(APP.shaderProgram);

	APP.vPosition = APP.gl.getAttribLocation(APP.shaderProgram, "vPosition");
	APP.gl.enableVertexAttribArray(APP.vPosition);
	};

	APP.serpenski = function (n) {
	var vertices = [[-1,-1],[0,1],[1,-1]],
	points = [],
	j,k;

	points.push([0.25,0.50]);

	for (k = 1; k < n; k++) {
	j = Math.floor(Math.random() * 3) % 3;
	points.push([
	(points[k-1][0] + vertices[j][0]) / 2.0,
	(points[k-1][1] + vertices[j][1]) / 2.0
	]);
	}

	return points;
	};

	APP.flatten = function (m) {
	var result = [],i,j;

	for (i=0; i < m.length; i++) {
	for (j=0; j < m[i].length; j++) {
	result.push(m[i][j]);
	}
	}

	return result;
	};

	APP.createBuffers = function () {
	var points = APP.serpenski(APP.N);
	APP.elemSize = points[0].length;

	APP.vertexPositionBuffer = APP.gl.createBuffer();
	APP.gl.bindBuffer(APP.gl.ARRAY_BUFFER, APP.vertexPositionBuffer);

	APP.gl.bufferData(APP.gl.ARRAY_BUFFER,
	new Float32Array(APP.flatten(points)), APP.gl.STATIC_DRAW);
	};

	APP.setUniforms = function () {
	APP.gl.uniform1f(
	APP.gl.getUniformLocation(APP.shaderProgram, "pointSize"), 3.0);
	};

	APP.setup = function () {
	APP.N = 5000;
	APP.setupShaders();
	APP.setUniforms();
	APP.createBuffers();

	APP.gl.clearColor(1, 1, 0, 1);
	APP.gl.clearDepth(1);
	APP.gl.enable(APP.gl.DEPTH_TEST);
	APP.gl.enable(0x0B10); //#define GL_POINT_SMOOTH 0x0B10
	APP.gl.depthFunc(APP.gl.LEQUAL);
	};

	APP.display = function () {
	APP.gl.clear(APP.gl.COLOR_BUFFER_BIT \| APP.gl.DEPTH_BUFFER_BIT);

	APP.gl.bindBuffer(APP.gl.ARRAY_BUFFER, APP.vertexPositionBuffer);
	APP.gl.vertexAttribPointer(
	APP.vPosition, APP.elemSize, APP.gl.FLOAT, false, 0, 0);

	APP.gl.drawArrays(APP.gl.POINTS, 0, APP.N);
	};
	}(EXAMPLE_ONE));

	EXAMPLE_ONE.setup();

	(function loop() {
	window.setTimeout(function() {
	EXAMPLE_ONE.display();
	loop();
	}, 10);
	}());
	</script>
	</body>
	</html>