ElemarJR/webgl_parte2.html

## webgl_parte2.html
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>My first WebGL project (revisited)!</title>
</head>
<body onload="start();">
    <canvas id="WebGLCanvas" width="640" height="480"></canvas>

    <script id="shader-fs" type="x-shader/x-fragment">
        precision mediump float;
        void main() {
            gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
        }
    </script>

    <script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 aVertexPosition;
        void main() {
            gl_Position = vec4(aVertexPosition, 1.0);
        }

    </script>

    <script type="text/javascript">

        var gl;
        var canvas;
        var shader;
        var vertexBuffer;

        var getContext = function (canvas, name) {
            var result = null;

            try {
                result = canvas.getContext(name)
            } catch (e) { }

            return result;
        };

        var createWebGLContext = function (canvas) {
            var result = getContext(canvas, "webgl");
            if (!result) result = getContext(canvas, "experimental-webgl");

            if (result) {
                result.viewportHeight = canvas.height;
                result.viewportWidth = canvas.width;
            }
            else {
                alert("Failed to create WebGL context!");
            }

            return result;
        }

        var getShader = function(gl, id) {
            var shaderScript = document.getElementById(id);
            if (!shaderScript) {
                return null;
            }

            var str = "";
            var k = shaderScript.firstChild;
            while (k) {
                if (k.nodeType == 3)
                    str += k.textContent;
                k = k.nextSibling;
            }

            var shader;
            if (shaderScript.type == "x-shader/x-fragment") {
                shader = gl.createShader(gl.FRAGMENT_SHADER);
            } else if (shaderScript.type == "x-shader/x-vertex") {
                shader = gl.createShader(gl.VERTEX_SHADER);
            } else {
                return null;
            }

            gl.shaderSource(shader, str);
            gl.compileShader(shader);

            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
                alert(gl.getShaderInfoLog(shader));
                return null;
            }

            return shader;
        }

        function setupShaders() {
            var vertexShader = getShader(gl, "shader-vs");
            var fragmentShader = getShader(gl, "shader-fs");

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

            if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
                alert("Failed to setup shaders");
            }

            gl.useProgram(shaderProgram);
            shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
        }

        function setupBuffers() {
            vertexBuffer = gl.createBuffer();
            gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
            var triangleVertices = [
                    0.0, 0.5, 0.0,
                    -0.5, -0.5, 0.0,
                    0.5, -0.5, 0.0
            ];

            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
            vertexBuffer.itemSize = 3;
            vertexBuffer.numberOfItems = 3;
        }

        function draw() {
            gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
            gl.clear(gl.COLOR_BUFFER_BIT);

            gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
                                    vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
            gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
            gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
        }

        function start() {
            canvas = document.getElementById("WebGLCanvas");
            gl = createWebGLContext(canvas);
            setupShaders();
            setupBuffers();
            gl.clearColor(0.0, 0.0, 1.0, 1.0);
            draw();
        }
    </script>
</body>
</html>
	<!DOCTYPE html>

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	<title>My first WebGL project (revisited)!</title>
	</head>
	<body onload="start();">
	<canvas id="WebGLCanvas" width="640" height="480"></canvas>

	<script id="shader-fs" type="x-shader/x-fragment">
	precision mediump float;
	void main() {
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
	}
	</script>

	<script id="shader-vs" type="x-shader/x-vertex">
	attribute vec3 aVertexPosition;
	void main() {
	gl_Position = vec4(aVertexPosition, 1.0);
	}

	</script>

	<script type="text/javascript">

	var gl;
	var canvas;
	var shader;
	var vertexBuffer;

	var getContext = function (canvas, name) {
	var result = null;

	try {
	result = canvas.getContext(name)
	} catch (e) { }

	return result;
	};

	var createWebGLContext = function (canvas) {
	var result = getContext(canvas, "webgl");
	if (!result) result = getContext(canvas, "experimental-webgl");

	if (result) {
	result.viewportHeight = canvas.height;
	result.viewportWidth = canvas.width;
	}
	else {
	alert("Failed to create WebGL context!");
	}

	return result;
	}

	var getShader = function(gl, id) {
	var shaderScript = document.getElementById(id);
	if (!shaderScript) {
	return null;
	}

	var str = "";
	var k = shaderScript.firstChild;
	while (k) {
	if (k.nodeType == 3)
	str += k.textContent;
	k = k.nextSibling;
	}

	var shader;
	if (shaderScript.type == "x-shader/x-fragment") {
	shader = gl.createShader(gl.FRAGMENT_SHADER);
	} else if (shaderScript.type == "x-shader/x-vertex") {
	shader = gl.createShader(gl.VERTEX_SHADER);
	} else {
	return null;
	}

	gl.shaderSource(shader, str);
	gl.compileShader(shader);

	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
	alert(gl.getShaderInfoLog(shader));
	return null;
	}

	return shader;
	}

	function setupShaders() {
	var vertexShader = getShader(gl, "shader-vs");
	var fragmentShader = getShader(gl, "shader-fs");

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

	if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
	alert("Failed to setup shaders");
	}

	gl.useProgram(shaderProgram);
	shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
	}

	function setupBuffers() {
	vertexBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
	var triangleVertices = [
	0.0, 0.5, 0.0,
	-0.5, -0.5, 0.0,
	0.5, -0.5, 0.0
	];

	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
	vertexBuffer.itemSize = 3;
	vertexBuffer.numberOfItems = 3;
	}

	function draw() {
	gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
	gl.clear(gl.COLOR_BUFFER_BIT);

	gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,
	vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
	gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
	gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
	}

	function start() {
	canvas = document.getElementById("WebGLCanvas");
	gl = createWebGLContext(canvas);
	setupShaders();
	setupBuffers();
	gl.clearColor(0.0, 0.0, 1.0, 1.0);
	draw();
	}
	</script>
	</body>
	</html>
No results found