Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(103)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: experimental/docs/lesson1.html

Issue 1342523002: json based animation toy (Closed) Base URL: https://skia.googlesource.com/skia.git@master
Patch Set: wip whats next? Created 5 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « experimental/docs/jsonbaseddoc.htm ('k') | experimental/docs/svgBackend.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: experimental/docs/lesson1.html
diff --git a/experimental/docs/lesson1.html b/experimental/docs/lesson1.html
new file mode 100644
index 0000000000000000000000000000000000000000..3eb71c31f9003e7b71888da61293d503f5705a9d
--- /dev/null
+++ b/experimental/docs/lesson1.html
@@ -0,0 +1,198 @@
+
+<html>
+
+<head>
+<title>Learning WebGL &mdash; lesson 1</title>
+<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
+
+<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
+
+<script id="shader-fs" type="x-shader/x-fragment">
+ precision mediump float;
+
+ void main(void) {
+ gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+ }
+</script>
+
+<script id="shader-vs" type="x-shader/x-vertex">
+ attribute vec3 aVertexPosition;
+
+ uniform mat4 uMVMatrix;
+ uniform mat4 uPMatrix;
+
+ void main(void) {
+ gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+ }
+</script>
+
+
+<script type="text/javascript">
+
+ var gl;
+ function initGL(canvas) {
+ try {
+ gl = canvas.getContext("webgl");
+ gl.viewportWidth = canvas.width;
+ gl.viewportHeight = canvas.height;
+ } catch (e) {
+ }
+ if (!gl) {
+ alert("Could not initialise WebGL, sorry :-(");
+ }
+ }
+
+
+ function getShader(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;
+ }
+
+
+ var shaderProgram;
+
+ function initShaders() {
+ var fragmentShader = getShader(gl, "shader-fs");
+ var vertexShader = getShader(gl, "shader-vs");
+
+ shaderProgram = gl.createProgram();
+ gl.attachShader(shaderProgram, vertexShader);
+ gl.attachShader(shaderProgram, fragmentShader);
+ gl.linkProgram(shaderProgram);
+
+ if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+ alert("Could not initialise shaders");
+ }
+
+ gl.useProgram(shaderProgram);
+
+ shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+ gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
+
+ shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+ shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+ }
+
+
+ var mvMatrix = mat4.create();
+ var pMatrix = mat4.create();
+
+ function setMatrixUniforms() {
+ gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
+ gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
+ }
+
+
+
+ var triangleVertexPositionBuffer;
+ var squareVertexPositionBuffer;
+
+ function initBuffers() {
+ triangleVertexPositionBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
+ var vertices = [
+ 117.0, 167.0, 0.0,
+ 33.0, 333.0, 0.0,
+ 200.0, 333.0, 0.0
+ ];
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+ triangleVertexPositionBuffer.itemSize = 3;
+ triangleVertexPositionBuffer.numItems = 3;
+
+ squareVertexPositionBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
+ vertices = [
+ 300.0, 167.0, 0.0,
+ 467.0, 167.0, 0.0,
+ 300.0, 333.0, 0.0,
+ 467.0, 333.0, 0.0
+ ];
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+ squareVertexPositionBuffer.itemSize = 3;
+ squareVertexPositionBuffer.numItems = 4;
+ }
+
+
+ function drawScene() {
+ gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 1000.0, pMatrix);
+ mat4.ortho(-250.0, 250.0, -250.0, 250.0, 0.1, 1000, pMatrix);
+ mat4.identity(mvMatrix);
+ mat4.scale(mvMatrix, [1, -1, 1]);
+ mat4.translate(mvMatrix, [-250, -250, -1]);
+ gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
+ gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+ setMatrixUniforms();
+ gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);
+
+
+ // mat4.translate(mvMatrix, [300, 0.0, 0.0]);
+ gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
+ gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
+ setMatrixUniforms();
+ gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
+ }
+
+
+
+ function webGLStart() {
+ var canvas = document.getElementById("lesson01-canvas");
+ initGL(canvas);
+ initShaders();
+ initBuffers();
+
+ gl.clearColor(0.0, 0.0, 0.0, 1.0);
+ gl.enable(gl.DEPTH_TEST);
+
+ drawScene();
+ }
+
+
+</script>
+
+
+</head>
+
+
+<body onload="webGLStart();">
+ <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt; Back to Lesson 1</a><br />
+
+ <canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
+
+ <br/>
+ <a href="http://learningwebgl.com/blog/?p=28">&lt;&lt; Back to Lesson 1</a><br />
+</body>
+
+</html>
« no previous file with comments | « experimental/docs/jsonbaseddoc.htm ('k') | experimental/docs/svgBackend.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698