webgl
关注
分享
扫一扫
webgl编程指南笔记
「已注销」
骐骥一跃，不能十步；驽马十驾，功在不舍
展开
-
WebGL - 概述和 canvas 基础示例
1、webgl概述1、概述是一项用来在网页上绘制和渲染辅助三维图形，并允许用户交互的技术，它结合js和h5能更容易和直接的在互联网上展示产品和示例。开发者不需要具备C或者C++编程语言，仅仅需要会简单的HTML和JS脚本知识就可以上手。webgl基于浏览器不是基于操作系统，因此不需要安装插件和库，就可以运行webgl程序。2、起源webgl起源与OpenGL ES 2.0，OpenGL...翻译 2019-04-24 10:51:32 · 822 阅读 · 0 评论 -
WebGL - 清空 canvas 绘图区域(颜色缓存区)
1、canvas 的坐标系统canvas坐标系统横轴是x轴，纵轴是y轴，原点是在左上角，绘图区域是指定的width和height单位是 像素注意：绘制三维图形的单位也是 像素2、创建一个宽高512的canvas<canvas id="webgl" width="512" height="512"></canvas>3、获取 webgl 绘图上下文对象va...翻译 2019-04-24 13:08:48 · 4139 阅读 · 1 评论 -
WebGL - 着色器 简单使用
1、着色器webgl绘图必须依赖于 着色器，这是一种新的绘图机制，它可以灵活而且强大的绘制二维和三维图形。首先，需要了解以下什么是着色器着色器代码写在javaScript中，以字符串的形式存在。webgl需要两种着色器代码：顶点着色器片元着色器1.1 顶点着色器首先来看一下代码// 顶点着色器var vertex_shader_source = 'void main...翻译 2019-04-24 15:30:45 · 3537 阅读 · 0 评论 -
WebGL - 将着色器代码写在 script 标签中
写 着色器 的时候以字符串的形式去写的话，没有颜色，而且很容易写错，下面我们可以将着色器代码写在script标签中，然后再获取标签中的text字符串就可以获取着色器程序如下所示，如果你的编辑器装了支持GLSL语言的插件的话，也许会有颜色显示，如果没有的话可能没有颜色提示<!-- 顶点着色器代码 --><script id="vertexShader" type="x-sha...翻译 2019-04-24 15:46:26 · 1648 阅读 · 0 评论 -
WebGL - 通过 js 程序向 attribute 和 uniform 变量赋值
有两种方式可以通过js程序向着色器传递数据通过 attribute变量 – 传输的是于顶点相关的数据；通过 uniform变量 – 传输的是对所有顶点都相同或者于顶点无关的数据；通过上一个程序，在webgl中绘制了一个顶点，但是顶点的位置不能通过js程序来控制，下面通过js给顶点着色器传递数据来控制顶点的位置。1、在顶点着色器中生命 attribute 变量// 顶点着色器// 声...翻译 2019-04-25 11:01:01 · 2431 阅读 · 1 评论 -
WebGL - 通过缓冲区对象绘制多个点的过程
1、绘制多个点的过程绘制一个点的时候，webgl程序的执行过程是这样的：获取 webgl 绘图上下文初始化着色器设置 canvas 背景色清空 canvas开始绘制上面是绘制一个点的过程，但是如果想要绘制多个点话，就需要多次重复上面的步骤吗？webgl提供了一种机制可以向缓存中一次存储多个顶点的信息，然后只需要循环的调用 着色器程序即可，而不需要循环重复上面的步骤。因此上面的...翻译 2019-04-25 16:29:40 · 755 阅读 · 0 评论 -
WebGL - 七种基本图形的绘制
1、七种基本绘制方式通过gl.drawArrays(mode, girst,count)方法，可以绘制七种基本图形，如下表所示基本图形参数描述点gl.POINTS一系列的点，绘制在 v0 ,v1,v2....线段gl.LINES一系列单独的线段，绘制在(v0, v1),(v2,v3)...，若点个数使奇数，则最后一个点被忽略线条gl.LINE_STR...翻译 2019-04-25 17:29:31 · 6860 阅读 · 0 评论 -
WebGL - 简单的移动旋转变换
1、平移例如将一个顶点(x0, y0, z0 )进行平移到(0.5, 0.5, 0.5)的话，就只需要整个顶点的三个方向同时加上另外一个顶点；最终位置 = (x0 + 0.5, y0 + 0.5, z0 + 0.5)所以如果将一个三角形进行平移的话，就需要逐个顶点进行操作，加上一个平移的值；只需要在顶点着色器中为顶点坐标的每个分量加上一个常量就可以平移的操作；1. 具体着色器代码//...翻译 2019-04-26 14:46:42 · 582 阅读 · 0 评论 -
WebGL - 顶点数据矩阵变换
1、Matrix4函数库此处需要了解一个矩阵函数库cuon-matrix.js这是 《webgl编程指南》作者写的一个库，它封装了一些简单易用的方法，来实现一些复杂繁琐的矩阵计算操作；代码地址：https://gitee.com/ithanmang/webgl-notes具体方法如下表：Matrix4对象有两种方法，一种是名称中带有set和一种不带set的；包含set的 – 会根据...翻译 2019-04-26 16:47:25 · 1224 阅读 · 0 评论 -
WebGL - 颜色和纹理
首先，将顶点坐标传入着色器，需要遵循以下几步1、创建缓冲区对象；2、将缓冲区对象绑定到target上；3、将顶点坐标数据写入缓冲区对象；4、将缓冲区对象分配给对应得 attribute变量；5、开启 attribute变量；1、非坐标数据传入顶点着色器所以将多个顶点相关得数据通过传冲去对象传入顶点着色器，其实只需要每种数据重复以上步骤即可；首先，需要再顶点着色器中定义可以接收顶...翻译 2019-05-16 13:27:34 · 862 阅读 · 0 评论 -
WebGL - 纹理映射
1、纹理映射纹理映射：纹理映射就是将一张图像映射大盘几何体表面上去，此时这样图片就称为纹理贴图；纹理映射的作用，就是根据纹理图像，为之前光栅化后的每一个片元涂上合适的颜色，组成纹理图像的像素又被称为 纹素，每一个纹素的颜色都使用 RGB或者 RGBA格式编码纹素可以简单的理解为一个像素2、纹理映射四步1、准备纹理图像2、配置集合图形纹理映射方式3、加载和配置纹理图像4、从纹理...翻译 2019-05-30 09:27:23 · 3030 阅读 · 2 评论 -
WebGL - GLSL_ES 着色器语言
1、概述着色器语言和C/C++很类似，拥有C语言的语法规范，还有C++的结构类型，GLSL ES语言是在OpenGL的着色器语言GLSL基础上，删减一部分后形成的，GLSL ES的目标平台是电子产品和嵌入式设备。着色器语言开头必须有一个入口main()函数；2、数据类型支持两种数据类型数值类型：整数、浮点数，没有小数点的是整数，有的则是浮点数；布尔值类型：true和false；...翻译 2019-06-11 14:28:08 · 1158 阅读 · 0 评论 -
WebGL - 可视空间，深度处理，顶点索引
研究内容大概如下：以用户视角进入三围世界控制三围可视空间裁剪处理物体的前后关系绘制三围的立方体上面会讲到如何使用模型矩阵、视图矩阵、以及该投影矩阵的使用，并且最后会绘制一个三维的立方体；1、立方体由三角形构成如图所示，三维物体都是由三角面构成的，因此逐个的去绘制三角形就能绘制出三维物体。但是三维跟二维有一个显著的区别，绘制二维只需要考虑x,y轴，而绘制三维物体的时候，需要考虑...翻译 2019-06-21 16:37:23 · 2418 阅读 · 0 评论 -
WebGL - 光照原理
1、光照原理现实世界中，依据光源和方向，光源照射到物体上时，发生了两个重要的现象；物体不同的表面明暗程度不一致；物体向地面投下了影子；三围图形学术语中 着色的真正含义是：根据光照条件重建 “物体各表面明暗不一的效果”的过程，着色器最初被发明出来就是为了重建光照产生的明暗现象；在讨论着色之前需要考虑一下两件事：发出光线的光源的类型；物体表面如何反射光线；2、光源类型平行光：...翻译 2019-06-27 18:47:34 · 1128 阅读 · 0 评论 -
WebGL - 着色器初始化流程
之前对着色器的初始化都是使用的initShaders()这个方法，这个的代码在最后，其内部分执行细节没有去清晰的了解过，下面做进一步的了解和分析，才能更深入的了解webgl的原理initShaders()方法的主要作用是编译GLSL ES代码，创建和初始化着色器，以便供WebgGL使用，具体初始化分为以下七步；1、创建着色器对象gl.createShader()2、向着色器对象中填充着色器...翻译 2019-07-01 17:44:43 · 1341 阅读 · 0 评论 -
WebGL - 示例 通过鼠标操作物体
案例实现功能如下：鼠标左右键点击实现旋转滑动滑轮实现缩放首先物体的旋转是通过对模型矩阵的旋转计算modelMatrix.rotate(angle, x, y, z)这个方法可以让物体绕某个轴进行旋转多少度，进而变换顶点坐标，normalMatrix、mvpMatrix...都是可以进行一些列的矩阵变换的，计算过后在清空颜色缓存以及深度缓存，重新绘制页面；因此使用鼠标去控制物体就是通过监...翻译 2019-07-03 11:05:55 · 2616 阅读 · 0 评论 -
WebGL - 示例 点击物体改变背景色
再threejs中是通过射线检测THREE.Raycaster()这个对象，来获取点击的对象，这个示例是走了个捷径，通过对比物体的颜色和点击处的像素值，来检测是否点击了物体，下面是示例效果示例：点击物体改变背景色，并实时检测旋转角度主要示例代码<!DOCTYPE html><html lang="en"><head> <meta cha...翻译 2019-07-04 17:55:14 · 1405 阅读 · 0 评论 -
WebGL - 示例 添加雾化效果
在三维图形学中， 雾化用来描述远处的物体看上去较为模糊的现象。示例：雾化效果实现雾化的方式有很多种，这里最简单的一种就是 线性雾化，在线性雾化中，某一点的雾化程度取决于它与视点之间的距离，距离越远雾化程度越高，线性雾化有起点和终点，起点表示雾化开始之处，终点表示完全雾化之处，两点之间某一点的雾化程度与该点的距离呈线性关系比终点更远的点完全雾化了，即完全看不到东西，某一点的雾化的程度可以定义...翻译 2019-07-08 14:27:08 · 1357 阅读 · 0 评论 -
WebGL - 示例 绘制圆形点
之前绘制的点都是正方形的，类似一个像素点，那怎么才能把方点绘制成圆点，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器处理，直接绘制就是方形的点，要绘制圆形的点就需要把多余的片元给削去;将矩形削成圆形需要知道每个片元在光栅化过程中的坐标，在片元着色器中通过 **内置变量 gl_FragCoord**来访问片元的坐标，还可以通过另一个 **内...翻译 2019-07-08 17:05:58 · 2187 阅读 · 3 评论 -
WebGL - 示例 α 混合透明效果
颜色的中的α分量控制着颜色的透明度，在webgl实现透明效果需要用到α混合，因为webgl已经内置了该功能因此开启即可示例：透明混合开启混合开启混合功能 - gl.enable(gl.BLEND)指定混合函数 - gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA)混合函数在进行α混合时，实际上webgl用到了两个颜色，即 源颜色和 ...翻译 2019-07-12 15:37:40 · 1735 阅读 · 0 评论 -
WebGL - 示例 从文件中加载并使用不同着色器
因为对不同的场景以及不同的材质需要使用不同的着色器，因此需要使用多个着色器，而不是单个，单个着色器是无法绘制出很复杂的场景，因为有的物体没有纹理而有的有纹理以及别的效果1、外部文件加载着色器着色器语言就是 GLSL格式的代码，我们可以先把顶点和片元着色器分别写在.glsl后缀名的文件中，如果你的编译器支持这种语法检测，那么代码就会有颜色，而不仅仅是字符串样式显示，尽管着色器代码本身就是字符串...翻译 2019-07-18 13:55:26 · 1793 阅读 · 0 评论