WebGL视频教程

threejs交流群：763260191 关于课程选择建议问题可以私信群主

高薪Web3D可视化系统课程

视频教程链接

网易云课堂

非常适合入门，不需要你有图形学基础，只要有基本的编程知识就可以。如果已经使用过threejs，再学习WebGL，将非常有助于理解threejs底层的知识。

网易云课堂播放视频的时候，右下角选择超高清，视频会很清晰

如果你没有web前端编程基础，请先学习 Web前端入门视频教程

课程介绍

课程形式

视频+源码+思维导图课件

源码

代码基本行行中文注释，相比较《WebGL编程指南》注释更详细，注释是中文不是英文，方便查看。基础好的可以快进看视频，直接查看源码。

源码案例1

1    <!DOCTYPE html>
2    <html lang="en">
3    <head>
4        <meta charset="UTF-8">
5        <title>使用WebGL绘制一个点</title>
6    </head>
7    <body>
8    <!--canvas标签创建一个宽高均为500像素，背景为蓝色的矩形画布-->
9    <canvas id="webgl" width="500" height="500" style="background-color: blue"></canvas>
10
11
12   <script>
13       //通过getElementById()方法获取canvas画布
14       var canvas=document.getElementById('webgl');
15       //通过方法getContext()获取WebGL上下文
16       var gl=canvas.getContext('webgl');
17
18       //顶点着色器源码
19       var vertexShaderSource = '' +
20           'void main(){' +
21           //给内置变量gl_PointSize赋值像素大小
22           '   gl_PointSize=20.0;' +
23           //顶点位置，位于坐标原点
24           '   gl_Position =vec4(0.0,0.0,0.0,1.0);' +
25           '}';
26
27       //片元着色器源码
28       var fragShaderSource = '' +
29           'void main(){' +
30           //定义片元颜色
31           '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
32           '}';
33
34       //初始化着色器
35       var program = initShader(gl,vertexShaderSource,fragShaderSource);
36       //开始绘制，显示器显示结果
37       gl.drawArrays(gl.POINTS,0,1);
38
39       //声明初始化着色器函数
40       function initShader(gl,vertexShaderSource,fragmentShaderSource){
41           //创建顶点着色器对象
42           var vertexShader = gl.createShader(gl.VERTEX_SHADER);
43           //创建片元着色器对象
44           var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
45           //引入顶点、片元着色器源代码
46           gl.shaderSource(vertexShader,vertexShaderSource);
47           gl.shaderSource(fragmentShader,fragmentShaderSource);
48           //编译顶点、片元着色器
49           gl.compileShader(vertexShader);
50           gl.compileShader(fragmentShader);
51
52           //创建程序对象program
53           var program = gl.createProgram();
54           //附着顶点着色器和片元着色器到program
55           gl.attachShader(program,vertexShader);
56           gl.attachShader(program,fragmentShader);
57           //链接program
58           gl.linkProgram(program);
59           //使用program
60           gl.useProgram(program);
61           //返回程序program对象
62           return program;
63       }
64   </script>
65   </body>
66   </html>