diff options
[WGL/H03] Implemented very roughly general shape generation
1 files changed, 135 insertions, 0 deletions
| -rw-r--r-- | Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html | 135 |
diff --git a/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html new file mode 100644 index 0000000..9fe1d56 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Homework 03 - The wall/Homework.html @@ -0,0 +1,135 @@ +<!DOCTYPE html>
+
+<head>
+ <meta charset="utf-8"/>
+ <title>Стената</title>
+
+ <script src="webgl-fmi.js"></script>
+
+ <script id="vshader" type="x-shader/x-vertex">
+ uniform mat4 uProjectionMatrix;
+ uniform mat4 uViewMatrix;
+ uniform mat4 uModelMatrix;
+ attribute vec3 aXYZ;
+ void main ()
+ {
+ gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aXYZ,1);
+ }
+ </script>
+
+ <script id="fshader" type="x-shader/x-fragment">
+ precision mediump float;
+ uniform vec3 uColor;
+ void main( )
+ {
+ gl_FragColor = vec4(uColor,1);
+ }
+ </script>
+
+ <script>
+ function start( )
+ {
+ gl = getContext("picasso");
+ glprog = getProgram("vshader","fshader");
+
+ aXYZ = gl.getAttribLocation(glprog,"aXYZ");
+ uColor = gl.getUniformLocation(glprog,"uColor");
+ uProjectionMatrix = gl.getUniformLocation(glprog,"uProjectionMatrix");
+ uViewMatrix = gl.getUniformLocation(glprog,"uViewMatrix");
+ uModelMatrix = gl.getUniformLocation(glprog,"uModelMatrix");
+
+ gl.clearColor(1,1,1,1);
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ var proj = perspMatrix(30,gl.canvas.width/gl.canvas.height,1,40000);
+ gl.uniformMatrix4fv(uProjectionMatrix,false,proj);
+
+ var view = viewMatrix([1, 60, 1], [0,0,-7], [0,0,1]);
+ gl.uniformMatrix4fv(uViewMatrix,false,view);
+ gl.viewport(0, 0, 600, 400);
+
+ // куб 1x1x1
+ var data = [ 0.5,-0.5,0.5, // предна стена
+ 0.5,0.5,0.5,
+ -0.5,0.5,0.5,
+ -0.5,-0.5,0.5,
+ 0.5,-0.5,-0.5, // задна стена
+ 0.5,0.5,-0.5,
+ -0.5,0.5,-0.5,
+ -0.5,-0.5,-0.5,
+
+ 0.5,-0.5,0.5, // десни хоризонтални ръбове
+ 0.5,-0.5,-0.5,
+ 0.5,0.5,0.5,
+ 0.5,0.5,-0.5,
+ -0.5,0.5,0.5, // леви хоризонтални ръбове
+ -0.5,0.5,-0.5,
+ -0.5,-0.5,0.5,
+ -0.5,-0.5,-0.5
+ ];
+ var buf = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER,buf);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
+
+ gl.enableVertexAttribArray(aXYZ);
+ gl.vertexAttribPointer(aXYZ,3,gl.FLOAT,false,0,0);
+
+ gl.uniform3f(uColor,127,0,0);
+
+ // Вместо единичен куб, да се нарисува стена под формата на сърце
+ // от 20 реда застъпващи се тухли, използвайки трансформиран куб
+ var brickScale = [1, 0.5, 1.5];
+
+ function drawBrick() {
+ useMatrix();
+ gl.drawArrays(gl.LINE_LOOP,0,4);
+ gl.drawArrays(gl.LINE_LOOP,4,4);
+ gl.drawArrays(gl.LINES,8,8);
+ }
+
+ const ROWS = 1;
+ const BRICKS = 20;
+
+ const RADIUS = 6;
+ const FREQ = 0.6;
+ const GAP = 1.4;
+ const WIDTH = 3;
+ var degreeStep = Math.PI / (Math.PI * RADIUS / (1.5 + GAP));
+ var bottomLen = 1.2 * RADIUS * 3 - GAP - 1.5 / 2;
+ function drawHalfCircle(xOffset) {
+ for (var i = 0; i < Math.PI + 0.1; i += degreeStep) {
+ identity();
+ translate([Math.cos(i) * RADIUS + xOffset, 0, Math.sin(i) * RADIUS]);
+ yRotate((Math.PI - i) * 180 / Math.PI);
+ scale(brickScale); drawBrick();
+ }
+ }
+ function drawBodyLine(xOffset, degreeOffset, rotationCoefficient) {
+ for (var z = 1; z < bottomLen; z += 1.5 + GAP) {
+ identity();
+ translate([Math.sin(Math.PI * degreeOffset + Math.PI * z / bottomLen) * RADIUS - xOffset, 0, z - bottomLen - GAP - 1.5 / 2]);
+ yRotate(Math.sin(Math.PI * z / bottomLen) * rotationCoefficient);
+ scale(brickScale); drawBrick();
+ }
+ }
+ for (var row = 0; row < ROWS; row++) {
+ drawHalfCircle(RADIUS);
+ drawHalfCircle(-RADIUS);
+ drawBodyLine(RADIUS, 0.5, -40);
+ drawBodyLine(-RADIUS, 1.5, 40);
+ }
+ }
+ </script>
+</head>
+
+<body onload="start()">
+ <h2>Стената</h2>
+
+ <noscript>
+ Искаме JavaScript, но няма!
+ </noscript>
+
+ <canvas id="picasso" width="600" height="400" style="border: solid;">
+ Искаме canvas, но няма!
+ </canvas>
+</body>
|