WebGL入门课程01-基本概念

[TOC]

一、3D图形学入门

3D坐标系

image-20200222223820524

网格、多边形和顶点

image-20200222224036318

材质、纹理和光源

image-20200222224247759

变换与矩阵

相机、透视、视口和投影

image-20200222224548846

着色器

二、WebGL概述

WebGL的定义

WebGL的起源

image-20200222225256959

WebGL程序的结构

image-20200222225351237

三、第一个WebGL程序

用背景色情况canvas标签的绘图区

操作步骤:

关键函数:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WEBBL第一个小程序</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #web01{
            height: 500px;
            width: 800px;
        }
    </style>
</head>
<body>
<canvas id="web01"></canvas>
<script>
    const canvas=document.querySelector('#web01');
    const gl=canvas.getContext('webgl');
    gl.clearColor(0.0,1.0,1.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
</script>
</body>
</html>

四、着色器

绘制一个点

image-20200222230346826

操作步骤:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #web02{
            width: 750px;
            height: 500px;
        }
    </style>
</head>
<body>
<canvas id="web02"></canvas>
<script>
    let canvas=document.querySelector("#web02");
    let gl=canvas.getContext('webgl');
    let VERTEX_SHADER=''+
            'void main(){'+
            'gl_Position=vec4(0.0,-0.5,1.0,1.0);'+
            'gl_PointSize=20.0;'+
            '}';
    let FRAG_SHADER=''+
            'void main(){'+
            'gl_FragColor=vec4(1.0,0.3,0.0,1.0);'+
            '}';
    let vertex=gl.createShader(gl.VERTEX_SHADER);
    let frag=gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertex,VERTEX_SHADER);
    gl.shaderSource(frag,FRAG_SHADER);

    gl.compileShader(vertex);
    gl.compileShader(frag);

    let program=gl.createProgram();
    gl.attachShader(program,vertex);
    gl.attachShader(program,frag);

    gl.linkProgram(program);
    gl.useProgram(program);
    gl.clearColor(0.0,0.0,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    gl.drawArrays(gl.POINTS,0,1);
</script>
</body>
</html>

五、Attrbute、Uniform变量

使用attribute绘制一个点

使用uniform改变点的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>L03-使用属性绘制点</title>
    <style>
        #web03{
            height: 500px;
            width: 500px;
        }
    </style>
</head>
<body>
<canvas id="web03"></canvas>
<script>
    let canvas=document.querySelector("#web03");
    let gl=canvas.getContext('webgl');
    let VERTEX_SHADER='' +
        'attribute vec4 a_pos;' +
        'void main(){' +
        'gl_Position=a_pos;' +
        'gl_PointSize=25.0;' +
        '}';
    let FRAG_SHADER='' +
        'precision lowp float;' +
        'uniform vec4 u_color;' +
        'void main(){' +
        'gl_FragColor=u_color;' +
        '}';

    let vertex=gl.createShader(gl.VERTEX_SHADER);
    let frag=gl.createShader(gl.FRAGMENT_SHADER);

    gl.shaderSource(vertex,VERTEX_SHADER);
    gl.shaderSource(frag,FRAG_SHADER);

    gl.compileShader(vertex);
    gl.compileShader(frag);

    let program=gl.createProgram();
    gl.attachShader(program,vertex);
    gl.attachShader(program,frag);

    gl.linkProgram(program);
    gl.useProgram(program);
    gl.clearColor(0.0,0.1,0.0,1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    let a_position=gl.getAttribLocation(program,'a_pos');
    let u_color=gl.getUniformLocation(program,'u_color');

    gl.vertexAttrib4f(a_position,0.0,0.3,1.0,1.0);
    gl.uniform4f(u_color,0.0,1.0,0.0,1.0);
    gl.drawArrays(gl.POINTS,0,1);
</script>
</body>
</html>