icg_webgl_hw's Introduction

ICG_WebGL_HW

Demo code of Interactive Computer Graphics 2018 Fall (ICG)

Shading :

Flat shading demo:
https://bigmoumou.github.io/ICG_WebGL_HW/flat_shading/
Gourand shading demo:
https://bigmoumou.github.io/ICG_WebGL_HW/gourand_shading/
Phong shading demo:
https://bigmoumou.github.io/ICG_WebGL_HW/phong_shading/
Toon shading demo:
https://bigmoumou.github.io/ICG_WebGL_HW/toon_shading/
Three objects together with lights:
https://bigmoumou.github.io/ICG_WebGL_HW/three_object/

Transformations :

Rotation:

    function degToRad(degrees) {
        return degrees * Math.PI / 180;
    }
    // rotate on x-axis:
    mat4.rotate(mvMatrix, degToRad(teapotAngle), [1, 0, 0]);
    // // rotate on z-axis:
    // mat4.rotate(mvMatrix, degToRad(teapotAngle), [0, 0, 1]);
    // // rotate on both x and y-axis together:
    // mat4.rotate(mvMatrix, degToRad(teapotAngle), [1, 1, 0]);

Translation:

    // position of z decrease 40 
    mat4.translate(mvMatrix, [0, 0, -40]);
    // // position of x increase 10 and y decrease 20;
    // mat4.translate(mvMatrix, [10, -20, 0]);

Scaling:

    // // without scaling
    // mat4.scale(mvMatrix, [1, 1, 1])
    // scale x-axis double
    mat4.scale(mvMatrix, [2, 1, 1])

Shearing:

    var shearMatrix = mat4.create();
    mat4.identity(shearMatrix);
    // on X-axis
    shearMatrix[1] = 0.5
    // // on Y-axis
    // shearMatrix[4] = 0.5
    // // on Z-axis
    // shearMatrix[8] = 0.5
    mat4.multiply(mvMatrix, shearMatrix, mvMatrix);

Recommend Projects