WebGL简易教程(六)：第一个三维示例(使用模型视图投影变换)

目录 1. 概述 2. 示例:绘制多个三角形 2.1. Triangle_MVPMatrix.html 2.2. Triangle_MVPMatrix.js 2.2.1. 数据加入Z值 2.2.2. 加入深度测试 2.2.3. MVP矩阵设置 3. 结果 4. 参考 1. 概述在上一篇教程<WebGL简易教程(五):图形变换(模型.视图.投影变换)>中,详细讲解了OpenGL\WebGL关于绘制场景的模型变换.视图变换以及投影变换的过程.不过那篇教程是纯理论知识,这里就具体结合一个实际的例子…

WebGL简易教程(十五)：加载gltf模型

目录 1. 概述 2. 实例 2.1. 数据 2.2. 程序 2.2.1. 文件读取 2.2.2. glTF格式解析 2.2.3. 初始化顶点缓冲区 2.2.4. 其他 3. 结果 4. 参考 5. 相关 1. 概述一般来说,图形渲染总是需要从磁盘数据开始,最终保存到磁盘数据中,保存这种数据的就是3D模型文件.3D模型文件一般会把顶点.索引.纹理.材质等等信息都保存起来,方便下次直接读取.3D模型文件格式一般是与图形渲染工作强关联的,了解3D模型文件格式的组成,有助于进一步了解图形渲染的流程.…

WebGL简易教程(七)：绘制一个矩形体

目录 1. 概述 2. 示例 2.1. 顶点索引绘制 2.2. MVP矩阵设置 2.2.1. 模型矩阵 2.2.2. 投影矩阵 2.2.3. 视图矩阵 2.2.4. MVP矩阵 3. 结果 4. 参考 1. 概述在上一篇教程<WebGL简易教程(六):第一个三维示例(使用模型视图投影变换)>中,通过使用模型视图投影变换,绘制了一组由远及近的三角形.但是这个示例还是太简单了,这几个三角形的坐标仍然是-1到1之间的坐标,无论如何都是很容易设置参数的,可能并不能很深入的理解模型视图投影变换. 在这…

WebGL简易教程——目录

目录 1. 绪论 2. 目录 3. 资源 1. 绪论最近研究WebGL,看了<WebGL编程指南>这本书,结合自己的专业知识写的一系列教程.之前在看OpenGL/WebGL的时候总是感觉OpenGL/WebGL看的时候懂,实际用起来却挺难,感觉中间总是隔着很多东西.现在一路边学边写,才明白这中间缺少的其实就是总结,是实践:把这个过程写出来,既是帮助他人,也是帮助自己. 现在这一系列文章也写了不少了,就写个目录汇总一下,方便查阅,以后增添了新的文章也会随之更新.这一系列教程由浅入深,知识也是循…

WebGL简易教程(八)：三维场景交互

目录 1. 概述 2. 实例 2.1. 重绘刷新 2.2. 鼠标事件调整参数 3. 结果 4. 参考 1. 概述在上一篇教程<WebGL简易教程(七):绘制一个矩形体>中,通过一个绘制矩形包围盒的实例,进一步理解了模型视图投影变换.其实,三维场景的UI交互工作正是基于模型视图投影变换的基础之上的.这里就通过之前的知识实现一个三维场景的浏览实例:通过鼠标实现场景的旋转和缩放. 2. 实例改进上一篇教程的JS代码,得到新的代码如下: // 顶点着色器程序 var VSHADER_SOURCE…

WebGL简易教程(九)：综合实例：地形的绘制

目录 1. 概述 2. 实例 2.1. TerrainViewer.html 2.2. TerrainViewer.js 3. 结果 4. 参考 1. 概述在上一篇教程<WebGL简易教程(八):三维场景交互>中,给三维场景加入了简单的交互,通过鼠标实现场景的旋转和缩放.那么在这一篇教程中,综合前面的知识,可以做出一个稍微复杂的实例:绘制一张基于现实的地形图. 地形也就是DEM(数字高程模型),是由一组网格点组成的模型,每个点都有x,y,z值:更简单来说,图像格式就可以作为DEM的载体,只不…

WebGL简易教程(二)：向着色器传输数据

目录 1. 概述 2. 示例:绘制一个点(改进版) 1) attribute变量 2) uniform变量 3) varying变量 3. 结果 4. 参考 1. 概述在上一篇教程<WebGL简易教程(一):第一个简单示例>中,通过一个绘制点的例子,对WebGL中的可编程渲染管线有了个基本的认识.在之前绘制点的例子中,点的位置,点的大小,点的颜色,都是固定写在着色器中的,这样的程序是缺乏可扩展性的. 比如我想绘制一张地形(DEM),平时地形数据是保存在地形文件之中的.被程序加载之后,数据信息…

WebGL简易教程(三)：绘制一个三角形(缓冲区对象)

目录 1. 概述 2. 示例:绘制三角形 1) HelloTriangle.html 2) HelloTriangle.js 3) 缓冲区对象 (1) 创建缓冲区对象(gl.createBuffer()) (2) 绑定缓冲区对象(gl.bindBuffer()) (3) 将数据写入缓冲区对象(gl.bufferData()) (4) 将缓冲区对象分配给attribute变量(gl.vertexAttribPointer()) (5) 开启attribute变量(gl.enableVertexAt…

WebGL简易教程(四)：颜色

目录 1. 概述 2. 示例:绘制三角形 1) 数据的组织 2) varying变量 3. 结果 4. 理解 1) 图形装配和光栅化 2) 内插过程 5. 参考 1. 概述在上一篇教程<WebGL简易教程(三):绘制一个三角形(缓冲区对象)>中,通过使用缓冲区对象(buffer object)来向顶点着色器传送数据.那么,如果这些数据(与顶点相关的数据,如法向量.颜色等)需要继续传送到片元着色器该怎么办呢? 例如这里给三角形的每个顶点赋予不同的颜色,绘制一个彩色的三角形.这个时候就需要用到之…

WebGL简易教程(十三)：帧缓存对象(离屏渲染)

目录 1. 概述 2. 示例 2.1. 着色器部分 2.2. 初始化/准备工作 2.2.1. 着色器切换 2.2.2. 帧缓冲区 2.3. 绘制函数 2.3.1. 初始化顶点数组 2.3.2. 传递非公用随帧不变的数据 2.3.3. 逐帧绘制 3. 结果 4. 参考 1. 概述事物是普遍联系的.为了达到更加真实的渲染效果,很多时候需要利用被渲染物体在其他状态下的中间渲染结果,处理到最终显示的渲染场景中.这种中间渲染结果,就保存在帧缓冲区对象(framebuffer object,简称FBO)中…

WebGL简易教程(十四)：阴影

目录 1. 概述 2. 示例 2.1. 着色器部分 2.1.1. 帧缓存着色器 2.1.2. 颜色缓存着色器 2.2. 绘制部分 2.2.1. 整体结构 2.2.2. 具体改动 3. 结果 4. 参考 1. 概述所谓阴影,就是物体在光照下向背光处投下影子的现象,使用阴影技术能提升图形渲染的真实感.实现阴影的思路很简单: 找出阴影的位置. 将阴影位置的图元调暗. 很明显,关键还是在于如何去判断阴影的位置.阴影检测的算法当然可以自己去实现,但其实OpenGL/WebGL已经隐含了这种算法:假设摄像…

WebGL简易教程(十)：光照

目录 1. 概述 2. 原理 2.1. 光源类型 2.2. 反射类型 2.2.1. 环境反射(enviroment/ambient reflection) 2.2.2. 漫反射(diffuse reflection) 2.2.3. 综合 3. 实例 3.1. 具体代码 3.2. 改动详解 3.2.1. 设置日照 3.2.2. 着色器光照设置 4. 结果 5. 参考 1. 概述在上一篇教程<WebGL简易教程(九):综合实例:地形的绘制>中,实现了对一个地形场景的渲染.在这篇教程中,就给这个地…

WebGL简易教程(十一)：纹理

目录 1. 概述 2. 实例 2.1. 准备纹理 2.2. 配置纹理 2.3. 使用纹理 3. 结果 4. 参考 1. 概述在之前的之前的教程<WebGL简易教程(九):综合实例:地形的绘制>中,绘制了一个带颜色的地形场景.地形的颜色是根据高程赋予的RGB值,通过不同的颜色来表示地形的起伏,这是表达地形渲染的一种方式.除此之外,还可以将拍摄得到的数字影像,贴到地形上面,得到更逼真的地形效果.这就要用到我们这一章的新知识--纹理了. 这里用到的纹理图像,是一张从GoogleEarth上下载的卫…

WebGL简易教程(十二)：包围球与投影

目录 1. 概述 2. 实现详解 3. 具体代码 4. 参考 1. 概述在之前的教程中,都是通过物体的包围盒来设置模型视图投影矩阵(MVP矩阵),来确定物体合适的位置的.但是在很多情况下,使用包围盒并不方便计算,可以利用包围盒再生成一个包围球,利用包围球来设置MVP矩阵. 在<WebGL简易教程(十):光照>中,给地形赋予了固定方向的平行光.这篇教程的例子就是想模拟在平行光的视角下地形的情况.对于点光源光,可以用透视投影来实现渲染的效果:而平行光就需要通过正射投影来模拟.并且,这种正射并不是…

WebGL简易教程(五)：图形变换(模型、视图、投影变换)

[toc] 1. 概述通过之前的教程,对WebGL中可编程渲染管线的流程有了一定的认识.但是只有前面的知识还不足以绘制真正的三维场景,可以发现之前我们绘制的点.三角形的坐标都是[-1,1]之间,Z值的坐标都是采用的默认0值,而一般的三维场景都是很复杂的三维坐标.为了在二维视图中绘制复杂的三维场景,需要进行相应的的图形变换:这一篇教程,就是详细讲解WebGL的图形变换的过程,这个过程同样也适合OpenGL/OpenGL ES,甚至其他3D图形接口. 可以用照相机拍摄照片来模拟这个图形变换的过程,…

WebGL或OpenGL关于模型视图投影变换的设置技巧

目录 1. 具体实例 2. 解决方案 1) Cube.html 2) Cube.js 3) 运行结果 3. 详细讲解 1) 模型变换 2) 视图变换 3) 投影变换 4) 模型视图投影矩阵 4. 存在问题 1. 具体实例看了不少的关于WebGL/OpenGL的资料,笔者发现这些资料在讲解图形变换的时候都讲了很多的原理,然后举出一个特别简单的实例(坐标是1.0,0.5的那种)来讲解.确实一看就懂,但用到实际的场景之中就一脸懵逼了(比如地形的三维坐标都是很大的数字).所以笔者这里结合一个具体的实例…

OpenGL（五）三维变换之模型视图矩阵

计算机三维图形学中,一个基本的任务是如何描述三维空间中一个物体位置的变化,也就是如何描述物体的运动.通常情况下,物体位置的变化包含三个基本的变化:平移.旋转和缩放,物体的运动也可以用这三个基本的运动形态的组合来描述. 图形学中物体运动的数学表述是:将点的初始位置坐标P0映射到经过平移.旋转.绽放后的新位置P1的过程. 平移: 平移就是在原始的三维空间坐标点上分别加上对应方向上的平移量: 旋转: 旋转分为两类:在二维平面和三维空间中的旋转. 二维平面上的旋转: 相对坐标注原点旋转角度θ: 以矩阵…

WebGL简易教程(一)：第一个简单示例

目录 1. 概述 2. 示例:绘制一个点 1) HelloPoint1.html 2) HelloPoint1.js (1) 准备工作 (2) 着色器 (3) 顶点着色器 (4) 片元着色器 (5) 清空缓冲区 (6) 绘制操作 3. 结果 4. 参考 1. 概述不得不说现在三维图形渲染技术更新换代实在是太快,OpenGL很多资料还没来得及学习就已经有点落伍了.NeHe的学习教程还有之前用的<OpenGL编程指南>第七版(也就是红宝书)都非常好,可惜它们都是从固定管线开始讲起的;而现在可编程…

Dart 语言简易教程系列

google Fuchsia系统及 dart语言简介在 InteIIiJ IDEA 中搭建 Dart 的开发环境 Dart Linux 开发环境搭建 Dart 语言简易教程(一) Dart 语言简易教程(二) Dart 语言简易教程(三) Dart 语言简易教程(四) Dart 语言简易教程(五) Dart 语言简易教程(六) Dart 语言简易教程(七) Dart 语言简易教程(八) 作者:优腾爱乐链接:https://www.jianshu.com/p/b2153a32dd8b來源:简书…

Ocelot简易教程（六）之重写配置文件存储方式并优化响应数据

本来这篇文章在昨天晚上就能发布的,悲剧的是写了两三千字的文章居然没保存,结果我懵逼了.今天重新来写这篇文章.今天我们就一起来探讨下如何重写Ocelot配置文件的存储方式以及获取方式. 作者:依乐祝原文地址:https://www.cnblogs.com/yilezhu/p/9807125.html 很多人都说配置文件的配置很繁琐,如果存储在数据库就方便很多,可以通过自定义UI界面在后台进行路由的配置,然后通过调用Administration API让修改后的路由规则立即生效.当然这都是后话了.…

WebGL入门教程(五)-webgl纹理

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色这里就需要用到纹理映射,他就是将一张真实图片贴到一个几何图像表面. 纹理图像:映射的这个图像称为纹理图像: 纹素:组成纹理图像的像素称为纹素: 纹理坐标:是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 效果图: 操作步骤: 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3…

WebGL入门教程(四)-webgl颜色

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画颜色效果图: 操作步骤: 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3.获取WebGL 4.编译着色器 5.使用缓冲区对象向顶点传入多个顶点数据 6.绘制图像以上1~3参考:http://www.cnblogs.com/bsman/p/6128447.html 4.编译着色器改顶点着色器,片着色器 //顶点着色器程序 v…

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje…

Intellj IDEA 简易教程

Intellj IDEA 简易教程目录 JDK 安装测试 IDEA 安装测试调试单元测试重构 Git Android 其他参考资料 Java开发IDE(Integrated Development Environment,集成开发环境),大多图书上使用的是Eclipses或NetBeans,考虑到我们课程会涉及到Android开发,而用于Android开发的IDE Android Studio(CN)是在Intellij IDEA上构建的,所以我们上课推荐的IDE是Intellij I…

Android开发简易教程

Android开发简易教程 Android 开发因为涉及到代码编辑.UI 布局.打包等工序,有一款好用的IDE非常重要.Google 最早提供了基于 Eclipse 的 ADT 作为开发工具,后来在2013年 Google I/O 大会发布基于 IntelliJ IDEA 开发工具Android Studio.宣布不再持续支持 ADT. 目前, Android Studio已经逐渐取代Eclipse成为主流的Android开发环境.对于Android Studio与Eclipse之间的比较,你可…