WebGL教程_Three.js教程_郭隆邦技术博客 郭隆邦_技术博客 注册

WebGL视频教程

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

课程视频链接

腾讯课堂

网易云课堂

WebGL教程

课程介绍

课程形式

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

源码

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

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>
                  
1    <!DOCTYPE html>
                  2    <html lang="en">
                  3    <head>
                  4        <meta charset="UTF-8">
                  5    </head>
                  6    <body>
                  7    <canvas id="webgl" width="500" height="500" style="background-color: #0d72da"></canvas>
                  8    <script>
                  9        var canvasElement=document.getElementById('webgl');
                  10       var gl=canvasElement.getContext('webgl');
                  11       //顶点着色器源码
                  12       var vertexShaderSource = '' +
                  13           //attribute声明vec4类型变量apos
                  14           'attribute vec4 apos;'+
                  15           'void main(){' +
                  16           //设置几何体轴旋转角度为30度,并把角度值转化为浮点值
                  17           'float radian = radians(30.0);'+
                  18           //求解旋转角度余弦值
                  19           'float cos = cos(radian);'+
                  20           //求解旋转角度正弦值
                  21           'float sin = sin(radian);'+
                  22           //引用上面的计算数据,创建绕x轴旋转矩阵
                  23           // 1      0       0    0
                  24           // 0   cosα   sinα   0
                  25           // 0  -sinα   cosα   0
                  26           // 0      0        0   1
                  27           'mat4 mx = mat4(1,0,0,0,  0,cos,-sin,0,  0,sin,cos,0,  0,0,0,1);'+
                  28           //引用上面的计算数据,创建绕y轴旋转矩阵
                  29           // cosβ   0   sinβ    0
                  30           //     0   1   0        0
                  31           //-sinβ   0   cosβ    0
                  32           //     0   0   0        1
                  33           'mat4 my = mat4(cos,0,-sin,0,  0,1,0,0,  sin,0,cos,0,  0,0,0,1);'+
                  34           //两个旋转矩阵、顶点齐次坐标连乘
                  35           '   gl_Position = mx*my*apos;' +
                  36           '}';
                  37       //片元着色器源码
                  38       var fragShaderSource = '' +
                  39           'void main(){' +
                  40           '   gl_FragColor = vec4(1.0,0.0,0.0,1.0);' +
                  41           '}';
                  42       //初始化着色器
                  43       var program = initShader(gl,vertexShaderSource,fragShaderSource);
                  44       //获取顶点着色器的位置变量apos
                  45       var aposLocation = gl.getAttribLocation(program,'apos');
                  46   
                  47       //9个元素构建三个顶点的xyz坐标值
                  48       var data=new Float32Array([
                  49           //z为0.5时,xOy平面上的四个点坐标
                  50            0.5,  0.5,  0.5,
                  51           -0.5,  0.5,  0.5,
                  52           -0.5, -0.5,  0.5,
                  53            0.5, -0.5,  0.5,
                  54           //z为-0.5时,xOy平面上的四个点坐标
                  55            0.5,  0.5, -0.5,
                  56           -0.5,  0.5, -0.5,
                  57           -0.5, -0.5, -0.5,
                  58            0.5, -0.5, -0.5,
                  59           //上面两组坐标分别对应起来组成一一对
                  60           0.5,  0.5,  0.5,
                  61           0.5,  0.5,  -0.5,
                  62   
                  63           -0.5,  0.5,  0.5,
                  64           -0.5,  0.5,  -0.5,
                  65   
                  66           -0.5, -0.5,  0.5,
                  67           -0.5, -0.5,  -0.5,
                  68   
                  69           0.5, -0.5,  0.5,
                  70           0.5, -0.5,  -0.5,
                  71       ]);
                  72   
                  73       //创建缓冲区对象
                  74       var buffer=gl.createBuffer();
                  75       //绑定缓冲区对象
                  76       gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
                  77       //顶点数组data数据传入缓冲区
                  78       gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
                  79       //缓冲区中的数据按照一定的规律传递给位置变量apos
                  80       gl.vertexAttribPointer(aposLocation,3,gl.FLOAT,false,0,0);
                  81       //允许数据传递
                  82       gl.enableVertexAttribArray(aposLocation);
                  83   
                  84       //LINE_LOOP模式绘制前四个点
                  85       gl.drawArrays(gl.LINE_LOOP,0,4);
                  86       //LINE_LOOP模式从第五个点开始绘制四个点
                  87       gl.drawArrays(gl.LINE_LOOP,4,4);
                  88       //LINES模式绘制后8个点
                  89       gl.drawArrays(gl.LINES,8,8);
                  90   
                  91       //声明初始化着色器函数
                  92       function initShader(gl,vertexShaderSource,fragmentShaderSource){
                  93           var vertexShader = gl.createShader(gl.VERTEX_SHADER);
                  94           var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
                  95           gl.shaderSource(vertexShader,vertexShaderSource);
                  96           gl.shaderSource(fragmentShader,fragmentShaderSource);
                  97           gl.compileShader(vertexShader);
                  98           gl.compileShader(fragmentShader);
                  99           var program = gl.createProgram();
                  100          gl.attachShader(program,vertexShader);
                  101          gl.attachShader(program,fragmentShader);
                  102          gl.linkProgram(program);
                  103          gl.useProgram(program);
                  104          return program;
                  105      }
                  106  </script>
                  107  </body>
                  108  </html>
                  109  

购书指南

《WebGL编程指南》

比较适合用来入门,源码英文注释。

《WebGL编程指南》京东链接

《交互式计算机图形学》

课程案例源码也是WebGL编写的,相比较《WebGl编程指南》涉及的内容更多,算法理论更深入,适合作为进阶的图形学书籍阅读。

《交互式计算机图形学》京东链接

WebGL相关文章

本站版权所有,本站任何内容未经允许不得转载   备案号:豫ICP备16004767号 QQ群:187740169 (WebGL-Three.js教程)   邮箱:guolongbang@163.com