herukurniawann/GrafkomTriangel_Cube

Tugas 3 Grafika Komputer

Nama : Heru Dwi Kurniawan

NRP : 5025211055

Kelas : Grafika Komputer A

SIMPLE WEB-GL 2D AND 3D

2D Square from Two Triangle

Before

After

 function draw() {
        gl.clearColor(0, 0, 0, 1); // specify the color to be used for clearing
        gl.clear(gl.COLOR_BUFFER_BIT); // clear the canvas (to black)

        /* SEGITIGA KE-1 */

        /* Koordinat segitiga ke-1 : */
        /* Set up values for the "coords" attribute */

        let coords1 = new Float32Array([-0.5, -0.5, 0.5, 0.5, -0.5, 0.5]);

        gl.bindBuffer(gl.ARRAY_BUFFER, bufferCoords);
        gl.bufferData(gl.ARRAY_BUFFER, coords1, gl.STREAM_DRAW);
        gl.vertexAttribPointer(attributeCoords, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(attributeCoords);

        /* Warna segitiga ke-1 : */
        /* Set up values for the "color" attribute */

        let color = new Float32Array([0, 1, 0, 1, 0, 0, 0, 0, 1]);

        gl.bindBuffer(gl.ARRAY_BUFFER, bufferColor);
        gl.bufferData(gl.ARRAY_BUFFER, color, gl.STREAM_DRAW);
        gl.vertexAttribPointer(attributeColor, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(attributeColor);

        /* Gambar segitiga ke-1 :*/
        /* Draw the triangle. */

        gl.drawArrays(gl.TRIANGLES, 0, 3);

        /* Set Up Coords triangel ke-2*/

        let coords2 = new Float32Array([-0.5, -0.5, 0.5, 0.5, 0.5, -0.5]);

        gl.bindBuffer(gl.ARRAY_BUFFER, bufferCoords);
        gl.bufferData(gl.ARRAY_BUFFER, coords2, gl.STREAM_DRAW);
        gl.vertexAttribPointer(attributeCoords, 2, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(attributeCoords);

        /* Set Up Color triangel ke-2 : */

        let color2 = new Float32Array([0, 1, 0, 1, 0, 0, 1, 1, 1]);

        gl.bindBuffer(gl.ARRAY_BUFFER, bufferColor);
        gl.bufferData(gl.ARRAY_BUFFER, color2, gl.STREAM_DRAW);
        gl.vertexAttribPointer(attributeColor, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(attributeColor);

        /* Draw the triangle. */
        /*  Triangel ke-2 :*/

        gl.drawArrays(gl.TRIANGLES, 0, 3);
      }

3D Cube

Before

After

Warna Biru Bagian Depan

 drawPrimitive(
          gl.TRIANGLE_FAN,
          [0, 0, 1, 1],
          [-0.5, -0.3, -0.4, -0.5, 0.3, -0.5, 0.2, 0.3, -0.5, 0.2, -0.3, -0.5]
        ); // Warna Biru Depan

Warna Hijau Bagian Belakang

  drawPrimitive(
          gl.TRIANGLE_FAN,
          [0, 1, 0, 1],
          [-0.2, -0.1, 0.4, 0.4, -0.1, 0.4, 0.4, 0.5, 0.4, -0.2, 0.5, 0.4]
        ); // Warna Hijau Belakang

Warna Cyan Bagian Atas

 drawPrimitive(
          gl.TRIANGLE_FAN,
          [0, 1, 1, 1],
          [-0.2, 0.5, -0.4, -0.5, 0.3, 0.4, 0.2, 0.3, 0.4, 0.4, 0.5, -0.5]
        ); // Warna Cyan Bagian Atas

Warna Fuchsia Bagian Bawah

drawPrimitive(
          gl.TRIANGLE_FAN,
          [1, 0, 1, 1],
          [-0.2, -0.1, -0.4, 0.4, -0.1, -0.4, 0.2, -0.3, 0.4, -0.5, -0.3, 0.4]
        ); // Warna Fuchsia Bagian Bawah

Warna Kuning Bagian Sisi Kanan

          gl.TRIANGLE_FAN,
          [1, 1, 0, 1],
          [0.4, -0.1, -0.4, 0.4, 0.5, -0.5, 0.2, 0.3, 0.4, 0.2, -0.3, 0.4]
        ); // Warna Kuning Bagian Sisi kanan

Warna Merah Bagian Sisi Kiri

 drawPrimitive(
          gl.TRIANGLE_FAN,
          [1, 0, 0, 1],
          [-0.2, -0.1, -0.4, -0.5, -0.3, 0.4, -0.5, 0.3, 0.4, -0.2, 0.5, -0.5]
        ); // Warna Merah Bagian Sisi Kiri