![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebGL
凌风子夜
天作棋盘星作子,谁人敢下?
地当琵琶路当丝,哪个能弹?
展开
-
着色器语言(GLSL)基础学习三
内置的常量glsl提供了一些内置的常量,用来说明当前系统的一些特性. 有时我们需要针对这些特性,对shader程序进行优化,让程序兼容度更好.在 vertex Shader 中:1.const mediump int gl_MaxVertexAttribs>=8gl_MaxVertexAttribs 表示在vertex shader(顶点着色器)中可用的最大attributes数.这...原创 2019-07-31 10:26:09 · 1629 阅读 · 0 评论 -
着色器语言(GLSL)基础学习二
函数参数的限定符:函数的参数默认是以拷贝的形式传递的,也就是值传递,任何传递给函数参数的变量,其值都会被复制一份,然后再交给函数内部进行处理。所以,可以为参数添加限定符来达到传递引用的目的。限定符说明< none:default >默认使用in限定符in复制到函数中在函数中可读可写。默认限定符,最终真正传入函数形参的其实是实参的一份拷贝,在函数中,修...原创 2019-05-23 16:10:43 · 888 阅读 · 0 评论 -
着色器语言(GLSL)基础学习一
文章地址原创 2019-05-06 15:04:03 · 3359 阅读 · 0 评论 -
WebGL编程(5)-矩阵与图形变换的关系(平移、旋转、缩放)
变换矩阵(Transformation matrix):一个mat4类型的变量 <script id="vShader" type="x-shader/x-vertex"> attribute vec4 a_Position; uniform mat4 u_MatrixFour; void main(){ gl_Position=u_MatrixFour*a_Position; } </script>新坐标 = 变换矩阵 * 旧坐标(因为原创 2020-07-07 11:49:01 · 538 阅读 · 0 评论 -
WebGL -矩阵及其变换
1.模型矩阵——模型变换局部(物体)坐标系或者局部(物体)空间:物体空间比较容易理解,就是需要绘制的3D物体所在的原始坐标系代表的空间。例如在进行设计时,物体的几何中心是摆放到坐标系原点的,这个坐标系代表的就是物体空间。世界坐标系或者世界空间:世界空间也不难理解,就是物体在最终3D场景中的摆放位置对应的坐标所属的坐标系代表的空间。模型变换是将物体坐标系下的物体变换到世界坐标系下。模型变...原创 2019-08-06 15:02:01 · 670 阅读 · 1 评论 -
WebGL编程(1)-学习总结之WebGL常用方法
WebGL简介:WebGL,是一项使用canvas在网页上绘制和渲染复杂三维图形(3D图形),并允许用户与之进行交互的技术,WebGL的技术规范继承自免费和开源的OpenGL标准,而后者在计算机图形学、电子游戏、计算机辅助设计等领域已被广泛使用多年。例子:<canvas id="canvas" height="400" width="400">该浏览器不支持canvas!<...原创 2019-08-22 09:52:28 · 848 阅读 · 0 评论 -
WebGL编程(2)-学习总结之着色器
着色器语言类似于C语言,必须包含一个main函数,void 表示这个函数不会有返回值,并且不能为main函数指定参数。两种着色器:1.顶点着色器(vertext shader):用于描述顶点特性(位置,大小)。2.片元着色器(fragment shader):用于逐片元处理,显示在屏幕上,如处理光照,颜色等,片元可以理解为像素。顶点着色器内置变量变量名说明类型g...原创 2019-08-22 11:26:50 · 522 阅读 · 0 评论 -
WebGL编程(3)-缓冲区对象和类型化数组
什么是缓冲区对象?普通方式一次只能向顶点着色器写入一个点,而缓冲区对象可以向着色器一次性传入多个顶点数据。它是WebGL系统中的一块内存区域,可以填充大量的顶点数据,保存在其中,供顶点着色器使用。三角形的顶点示例:方法:#.createBuffer()创建缓冲区对象返回值 : 非null,新创建的建缓冲区对象; null,创建缓冲区对象失败。 错误: 无...原创 2019-08-29 11:11:26 · 779 阅读 · 0 评论 -
WebGL编程(4)-基本图形和基本变换
基本图形的绘制和顶点的绘制差不多,只需要设置gl.drawArrays()的mode参数对应的值。gl.drawArrays(mode, first, count)mode的可选参数详解基本图形mode参数描述点gl.POINTS一系列点,绘制在v0,v1,v2…处线段gl.LINES一系列单独的线段,绘制在(v0,v1)、(v2,v3)、(v4,v5)…...原创 2019-08-29 16:59:34 · 261 阅读 · 0 评论