WebGL学习笔记七点一

【WebGL学习笔记七点一】的更多相关文章

WebGL学习笔记七点一

第六章讲的是一些GL的一些语法,前面已经涉及,学习时直接跳过,来看第七章,第七章是真正意义的三维立体的出现,其实图形绘制方法是差不多的,就是Z坐标此时不再为0,所以很容易能构造出一些立体图形,但是立体图形涉及了一些其它概念. 正射投影:就是没有那种越远越小的效果,立体感没有那么强. 其中涉及的知识有:视点,就是相当于你的眼睛坐标位置,当然实际上你的眼睛看屏幕时时不经常动的,在这里说成眼睛原理上说的过去也容易理解所以不较真了.观察目标点:这个看书上概念没看懂,推断出是这个意思,就是将被观察物体看成…

webgl学习笔记五-纹理

写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放术语 : 纹理 :图像图形装配区域 :顶点着色器顶点坐标信息装配图形 : 片元着色器装配光栅化 :显示在屏幕上的三角形是由片元(像素)组成的,所以还需要将图形转化为片元,这个过程被称为光栅化. 纹理图像:映射的这个图像称为纹理图像纹素 : 组成纹理图像的像素称为纹素纹理坐标 : 是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 纹理…

webgl学习笔记四-动画

写在前面建议先阅读下前面我的三篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点 webgl学习笔记三-平移旋转缩放下面我们将讲解下如何让一个正方形动起来~不断擦除和重绘正方形,并且每次重绘时轻微地改变其角度. demo 吊下胃口 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>…

webgl学习笔记三-平移旋转缩放

写在前面建议先阅读下前面我的两篇文章. webgl学习笔记一-绘图单点 webgl学习笔记二-绘图多点平移 1.关键点说明顶点着色器需要加上 uniform vec4 u_Translation, 存储平移的坐标矢量. 顶点坐标位置 : gl_Position = a_Position + u_Translation 平移API : gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0); 2.demo html <!DOCTYPE html> <…

webgl学习笔记二-绘图多点

写在前面建议先看下第一篇webgl学习笔记一-绘图单点第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象,可以一次性地向着色器传入多个顶点的数据.缓存区对象是webgl系统的一块内存区域. 绘制多个点的流程这里重点介绍缓冲区对象使用步骤创建缓冲区对象 gl.createBuffer() 绑定缓冲区对象 gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); 将数据写…

WebGL学习笔记二——绘制基本图元

webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代表图元类型. (1)gl.POINTS——点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona…

WebGL学习笔记（2）

根据上一篇学习笔记,理解WebGL的工作原理及基本调用代码后,可以开始研究3D顶点对象的缩放.旋转.以及对对象进行可交互(鼠标或键盘控制)的旋转或者缩放. 要理解对象的旋转/缩放需要首先学习矩阵的计算原理,关于矩阵变换参考这两篇文章:https://blog.csdn.net/jscese/article/details/52065628https://blog.csdn.net/u012501459/article/details/12945149#transform 其中还涉及到了Math函…