![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgl学习之路
那年我七岁
学徒一个,在学习过程中遇到无数的问题,于是来到这里记录一下。
展开
-
我的webgl学习之路(二) 画一个点
我的webgl学习之路(二) 画一个点 想学webgl那么必须知道shader着色器,这是webgl最核心的部分,也是最难的部分;shader是一系列的指令,它会对屏幕的每个像素同时下达命名,也就是说,你要根据屏幕的每个位置(也就是每个像素)执行不同的操作;为什么shader运行特别快?上节我已经大概的讲过了(它是并行处理); 在这里不得不介绍一下GLSL,GLSL是什么? GLSL全...原创 2018-05-01 23:41:08 · 2070 阅读 · 0 评论 -
webgl 第三人称相机
发现自己越来越懒了。。。基础的我不写了,有很多博客都写了,连w3c都有,瞬间没有心思写下去了,并且也很忙;每天都在研究;别骂我。。。真心没心思;我会考虑写一些难度大点的,这样有动力点;代码如下:看下面需要注意的是向量的计算,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...原创 2018-12-18 17:09:55 · 1010 阅读 · 3 评论 -
我的webgl学习之路(六)变换矩阵
对一个三角形变换有:缩放,移动,旋转;如果每次都向上面那样单独设置变量,做变换操作是很麻烦的一件事,于是就有了矩阵,它能把变换的所有操作放到里面去,这样大大减少了我们的可读性及性能;代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title原创 2018-09-07 00:12:06 · 442 阅读 · 0 评论 -
我的webgl学习之路(六)变换(旋转)
这里就要用到数学公式:x = x1 * cosB – y1 * sinBy = x1 * cosB + y1 * sinB 这里我们先把z 轴设置为0;这样就组成x,y的平面,就像上面一样,它的旋转其实就是sin,cos控制的,初中知识三角函数,那么它的核心代码:gl_Position.x = a_Position.x * u_CosB - a_Position.y * u...原创 2018-09-06 23:53:18 · 1173 阅读 · 0 评论 -
我的webgl学习之路(六)变换(移动)
要想移动模型,就得用到uniform ;Uniform 表示在绘制过程中它的数据是不变的;你要移动一个三角形,是不是每个点加上他的移动距离得到它最终的位置,你可以在js中进行计算,但这样就消耗性能和增加复杂度,毕竟cpu的计算量没有gpu大,a_Position 是告诉着色器顶点; 代码如下:<!DOCTYPE html><html lang="en">...原创 2018-09-06 23:52:06 · 451 阅读 · 0 评论 -
webgl 学习心得
我本是搞Android 的,公司需要就搞3D展示了,刚开始找了很多资料,觉得threejs最为适合我,原因是我会点前端的东西,threejs也比较简单,demo也齐全;但是,由于公司没有真正的UI,全凭老板一句话,你们懂得,修修改改,晚上学习,白天实现功能,搞了几个月,实现的功能有,导入3d文件,展示楼层,设备参数展示,报警,位置提醒这些主要的功能,又感觉不满意,想要bim功能,又想要游戏效果,其...原创 2018-09-09 13:42:35 · 1310 阅读 · 3 评论 -
我的webgl学习之路(九)光栅化
着色器渲染的整个过程如下图:图形装配过程:这一步的任务是,将孤立的顶点坐标装配成几何图形,几何图形的类别由gl.drawArrays()函数的第一参数决定的,也就是你要绘制线还是三角形;光栅化:就是把组装好的图形,转化成片元;如图:gl_Position实际上是几何图形装配阶段的输入数据。几何图形装配过程又被称为图元装配过程,因为被装配出的基本图形(点,线,面)又被称为...原创 2018-09-09 11:44:42 · 1918 阅读 · 3 评论 -
我的webgl学习之路 (8) 设置各点的颜色
方法与上面一样,唯一的区别就是颜色设置;颜色的设置必须在片元着色器中,gl_FragColor 里我们attribute 只能在顶点着色器中使用;那么怎么办;Varying 用于两个着色器之间通信;如图:如下:<script id="vs" type="x-shader/x-vertex"> attribute vec4 a_Position; ...原创 2018-09-09 11:27:49 · 1943 阅读 · 2 评论 -
我的webgl学习之路(七)设置个点尺寸
比以前就多了一点:创建多个缓冲区,传入到顶点着色器中;attribute float a_PointSize;//传入点的尺寸 gl_Position = a_Position;//设置点的尺寸 用bufferData把数据给a_PointSize如图: 具体代码如下:<!DOCTYPE html><html lang="en"&g...原创 2018-09-09 11:26:52 · 1113 阅读 · 0 评论 -
我的webgl学习之路 (六)动画
在变换中加个过程,也就成了动画了,过程怎么加?就是每个时间达到什么样的效果, 这就要用到requestAnimationFrame ,这是浏览器自带的,他是毎帧执行一次,以后我们用到的动画,都要用到这个;毎帧旋转多少角度;就能到达旋转动画效果;代码如下:(所有的解释都详细记录在注释里) <!DOCTYPE html><html lang="en"&g...原创 2018-09-09 11:23:26 · 332 阅读 · 0 评论 -
我的webgl学习之路(五)用webgl画彩色三角形
要想做彩色三角线必须知道uniform、attribute、varying这三个声明;uniform 表示一次渲染过程中保存不变的attribute 表示是实时在改变的varying 用来着色器之间的通讯,也就是顶点着色器和片段着色去之间的桥梁还需要注意的是varying 在顶点和片元着色器两个中都声明一个一样的变量;那么它就会自动默认,两个有关系,但并不是相同的;片元着色器中得到的varyi...原创 2018-06-19 18:06:53 · 1785 阅读 · 4 评论 -
我的webgl学习之路(四)用webgl画三角形
如何绘制三角形,其实注意观察,你会发现,点变成线,线的多种绘制样式,都是修改gl.drawArrays(gl.LINES, 0, n); 里的第一个参数;它就是绘制方式;把它修改成gl.TRIANGLES;它就变成三角形,它的绘制方式有://开始绘制,显示器显示结果;参数二:从哪个点开始绘制;参数三:绘制几个点TRIANGLES:一系列单独的三角形;绘制方式:(v0,v1,v2),(v2,v1,...原创 2018-06-19 16:02:46 · 2881 阅读 · 0 评论 -
texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible tex
在做渲染到纹理时,出现下面错误texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.这表示纹理尺寸不是2的次方,如:2*2、4*4、256*256;把gl.texParameteri(gl.TEXTURE_2D,gl.TEX...原创 2018-06-22 14:08:29 · 3429 阅读 · 0 评论 -
我的webgl学习之路(三)用webgl画线
我的webgl学习之路(三)用webgl画线 我们都知道两个点决定一条线段;那么我们怎么画两个点呢?甚至是多个点呢?用gl.vertexAttrib3f(a_Position,1.0,0.0,0.0)循环?实在太麻烦了;那么不得不说的缓冲区对象; 缓冲区:它是webgl提供的一种很方便的机制,它可以一次地向着色器传入多个顶点数据。缓冲区对象是webgl系统中的一块内存区域,我们可以一次性地向缓冲区...原创 2018-05-08 23:49:05 · 7511 阅读 · 0 评论 -
我的webgl学习之路(一)
我的webgl学习之路 (一) 做项目中偶然需要移动端3d展示,所以学习了threejs;但是有着各种限制,还有就是项目要达到好的效果肯定是需要后期处理等等,所以展开了我学习webgl之路,我刚开始毫无目的的看了很多关于webgl的博客,但是我总感觉有种没学懂的感觉,并且观看不同的资料我有着不同的感受与理解;所以我觉得,从头一步一步的来是很有必要的;综合我所有的感受,然后在从新复习一遍,尽量能从...原创 2018-05-01 11:47:47 · 5054 阅读 · 1 评论 -
webgl 视锥体剔除不可见的物体
这里新的东西就是 包围盒,就是把物体用盒子装起来,这样只需要计算面到这个是否相交,在外边,减少了很多计算量;这个其实就是计算问题,视锥体求的那个几个面的公式,自己用就可以了,不要问为什么,推导很麻烦;能用就行相机的旋转,使用相机的up,lookat 两个向量的叉积 的到第三个向量 所形成的坐标系,旋转就通过第三向量的移动完成,就这么简单;代码如下:<!DOCTYPE h...原创 2018-12-18 17:18:35 · 1513 阅读 · 0 评论