WebGL学习笔记（四）：绘图
图元 WebGL可以绘制非常复杂的3D模型，这些模型都是由下面3种基本几何图元构成的，下面我们来详细的看看。 三角形 WebGL中任何复杂的模型，都是由三角形组合而成的，可以说三角形是任意形状的最小构成单位。 WebGL可以绘制下面几种三角形： 独立的三角形（gl.TRIANGLES ...
原文：WebGL学习笔记（一）
目录 绘制二维图形 D图形 经过一下三个步骤 简单js程序代码 简单html文件代码 绘制实例 一个点 着色器分为以下两种： . 顶点着色器 . 片元着色器 初始化着色器 绘制操作 程序的执行流程 main 函数的执行流程 将位置信息从js程序中传给顶点着色器 使用attribute变量 使用uniform变量 响应鼠标点击事件动态画点 绘制二维图形 D图形 经过一下三个步骤 获取 元素 向该元 ...
2018-11-08 14:51 0 715 推荐指数：
相关推荐
WebGL学习笔记一
学习用来做web3D的，从第一页开始学起先做2D的，接下来的程序是一个入门级的程序，可以通过在画板上的不同位置点击而获取不同颜色的点，以画板中心为坐标原点四个象限有不同的颜色，访问地址 http://123.206.70.64:8080/WebGL2/ColoredPoints.html ...
WEBGL学习笔记（二）：矩阵变换
游戏已经做好，但是博客园不能支持哈，我在我的独立博客里面加入了这个游戏。 加载时候会黑屏，等待数秒即可，点击这里体验试玩：FlappyBird3d游戏试玩 Three.js 使用 ...
WebGL学习笔记（六）：纹理贴图
只可以绘制纯色的模型是不够的，为了呈现出更真实的模型，我们还需要通过纹理贴图给模型进行上色。 丢失上下文 GPU作为一种公用资源，是会被多个进程同时使用的，在资源不足的情况下（比如PC或手机系统进 ...
WEBGL学习笔记（一）：创建场景
游戏已经做好，但是博客园不能支持哈，我在我的独立博客里面加入了这个游戏。 加载时候会黑屏，等待数秒即可，点击这里体验试玩：FlappyBird3d游戏试玩 初衷：最近在学习webgl，翻译一下用户帮助文档，希望对大家有所帮助！（进了一个什么webgl中文网的qq群，问了一个 ...
WebGL学习笔记（十六）：遮罩
这里总结下几种WebGL中实现遮罩的方法。 模板缓冲 模板缓冲可以实现渲染剔除，但是我们之前的学习里，剔除范围是基于上一次渲染的结果，且上一次的渲染也会进行显示，这样的话并不适合用来实现遮罩。 我们想实现遮罩的话，是希望只绘制模板缓冲而不绘制颜色缓冲。 想要实现这样的效果，可以借助 ...
WebGL学习笔记（二）：WebGL坐标系及基础几何概念
WebGL使用的是正交右手坐标系，且每个方向都有可使用的值的区间，超出该矩形区间的图像不会绘制： x轴最左边为-1，最右边为1； y轴最下边为-1，最上边为1； z轴朝向你的方向最大值为1，远离你的方向最大值为-1； 注：这些值与Canvas的尺寸无关，无论Canvas的长宽 ...
WebGL学习笔记（十一）：混合和透明
到目前为止我们绘制了不少模型，用到了不少颜色，颜色中有四个分量（RGBA），其中的A分量表示透明度，这个分量目前为止我们还没有真正的用到； A分量，表示的是当前的透明度，如果设定为 0.5 就会半透 ...