webgl
飞猪001
这个作者很懒,什么都没留下…
展开
-
WEBGL学习之三角形的旋转、平移、缩放
/** * 顶点着色器 */var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+//接收顶点坐标信息'attribute vec4 a_Color;\n'+//接收顶点颜色信息'uniform mat4 u_xformMatrix;\n'+//接收模型矩阵'varying vec4 v_Color;\n'+//内插颜色信息'void main() {\n'+'gl_Position = u_xformMatrix * a_Positi.原创 2021-10-31 16:39:28 · 238 阅读 · 0 评论 -
WEBGL学习笔记记录之画三角形
/** * 顶点着色器 定义一个vec4变量接受顶点信息 */var VSHADER_SOURCE = 'attribute vec4 a_Position;\n'+'void main() {\n'+'gl_Position = a_Position;\n'+'}\n'/** * 片元着色器 默认返回颜色 */var FSHEADER_SOURCES = 'void main() {\n'+'gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n'.原创 2021-10-31 10:27:15 · 76 阅读 · 0 评论 -
webgl学习之认识webgl
1.什么是webgl webgl是一项用来在网页上面绘制和渲染复杂三维图形,并允许用户与之进行交互的技术。它实际上是从opengl的一个特殊版本OpenGL ES 2.0中派生出来的。关系见下图(摘自WebGL 编程指南)webgl包含了三种语言。HTML5(超文本标记语言)、JavaScript和GLSL ES。下图展示了传统网页(左侧)和webgl网页(右侧)的软件结构。2.如何利用webgl绘制一个点...原创 2021-10-25 23:32:48 · 903 阅读 · 0 评论 -
WEBGL学习之图片的显示
在webgl中显示图片,第一点需要注意图片的是像素必须是2的n次幂,第二点需要注意的是由于坐标系的不同需要将图片进行Y轴反转处理。剩下的显示流程与多顶点传入的流程基本一致。(Y轴反转->打开存储单元->绑定存储单元->配置纹理的参数->配置显示的图片与图片的参数->传递着色器)/** * 顶点着色器 */var VSHADER_SOURCE = 'attribute vec4 a_Position;\n' +//接收顶点坐标信息 '...原创 2021-11-06 13:19:57 · 718 阅读 · 0 评论