WebGL
文章平均质量分 95
AIGIS.
一名有趣的giser,致力于gis普适话、大众化、平民化。
展开
-
WebGL系列教程十一(光照原理及Blinn Phong着色模型)
什么是光照?光照就是模拟出物体被光照射时的效果,使得渲染场景看起来更真实。那么WebGL在干什么?WebGL其实就是在计算继而还原每个像素的颜色和亮度。这就是我们这一节所要讲的内容,对一个立方体进行光照的渲染。本文介绍了光照原理的基础,并在此基础上讲解了法线计算、入射光计算、反射光计算、逆转置矩阵等等,最后我们使用着色模型,通过组合高光、漫反射和环境光,实现了对一个立方体的动态光照效果渲染。本文在理解上有一定的难度,希望读者仔细体会,回见~原创 2024-10-09 11:13:10 · 740 阅读 · 0 评论 -
WebGL系列教程十(模型Model、视图View、投影Projection变换)
本文讲解了模型、视图、投影变换的原理,并具体分析了MVP变换过程中的推导过程及调用过程,在实际应用中,各个框架都提供了进行这三个变换的方法,因此不必拘泥于具体的调用,了解原理即可。本文在理解上是有一定难度的,希望读者仔细揣摩,回见~原创 2024-09-19 19:00:21 · 734 阅读 · 0 评论 -
WebGL系列教程九(动画)
上一篇我们讲了WebGL中的基础语法,现在我们已经讲过了三维物体的绘制,着色及纹理映射,现在我们可以讲一些稍微高级点的操作了,这一节我们来讲动画,我们考虑怎么让一个立方体动起来。原创 2024-09-18 11:49:54 · 907 阅读 · 0 评论 -
WebGL系列教程八(GLSL着色器基础语法)
通过前七讲,我们已经见过了WebGL中的部分基础语法,这一讲我们来完善一下WebGL中的语法。GLSL是的首字母缩写,表示的含义就是着色器语言。而我们在第一讲中就已经说过,WebGL中使用的是GLSL的ES版本,ES即,意为嵌入式系统。因为最初GLSL ES是给嵌入式设备准备的,轻量级的三维图形渲染语言。原创 2024-09-14 11:47:48 · 861 阅读 · 0 评论 -
WebGL系列教程七(二维及三维旋转、平移、缩放)
上一篇我们讲了如何进行立方体的纹理贴图,为了方便立方体的贴图后效果的展示,我们对立方体进行了旋转,但代码中并没有进行体现,这一节我们来讲讲旋转、平移、缩放。实际上,在WebGL中进行旋转、平移、缩放只需要乘以相应的旋转、平移、缩放矩阵即可。本文我们通过梳理二维及三维的旋转、平移、缩放矩阵,搞明白了旋转、平移、缩放对应的矩阵,并在WebGL中进行了实验操作,实现了一个立方体的旋转。本文在理解上有一定的难度,尤其是矩阵的变换,需要读者具有一定的线性代数知识,希望读者仔细体会,回见~原创 2024-09-13 23:50:35 · 1098 阅读 · 0 评论 -
WebGL系列教程六(纹理映射与立方体贴图)
上一讲我们讲了如何使用索引绘制彩色立方体,还留了一个思考题:怎么让立方体的每个面都保持一个颜色?这一讲我们就来解决这个问题,并引出纹理映射和立方体贴图。其实这个词语还是比较好理解。见名知意,大概意思就是把纹理映射到某个地方,纹理是什么?现在你可以简单的认为纹理就是一张图片。把一张二维的图片映射到一个三维物体的表面,就叫纹理映射。本节我们从如何将立方体每个面的颜色改为相同的颜色开始,介绍到了如何将图片贴到立方体的表面,系统的分析了为什么不能再共用顶点,并将代码进行了修改,以及讲解了纹理坐标的使用。原创 2024-09-12 11:14:27 · 1389 阅读 · 0 评论 -
WebGL系列教程五(使用索引绘制彩色立方体)
上一讲我们讲了如何绘制彩色的三角形,这一讲我们来说如何绘制立方体。为什么几乎所有的WebGL教程总是从开始绘制三角形开始,因为三角形是最小的面,其他的一切图形都可以用三角形来拼接。好了,废话不多说,我们直接开整。本节我们通过梳理立方体的顶点坐标和对应的颜色关系,使用索引绘制的方式,绘制除了一个彩色的立方体,关于立方体是怎么旋转的,我们会在后面的博文中进行讲解。目前我们还遗留了一个思考问题,那就是如何使立方体的每个面都保持一个颜色,希望读者认真思考,我们留在下节进行解答。原创 2024-09-11 11:05:29 · 1025 阅读 · 0 评论 -
WebGL系列教程四(绘制彩色三角形)
WebGL中的varying变量负责将值从顶点着色器传递到片元着色器中。假设我们有个三角形,没错,还是前两篇使用的那个三角形,它的颜色如下图所示:现在我们要给这个三角形着色,我们只需要把这个顶点的颜色从顶点着色器中传递到片元着色器中,WebGL就会自动帮我们把三角形中间的颜色给插值出来。本篇我们通过指定三角形的三个顶点的颜色,绘制出了一个彩色的三角形,并梳理了整个程序的流程,了解了varying变量的内涵,这对我们理解后续的知识很重要,希望读者仔细揣摩,下期见。原创 2024-09-10 10:19:14 · 1032 阅读 · 0 评论 -
WebGL系列教程三(使用缓冲区绘制三角形)
上一篇中我们介绍了WebGL的环境搭建及Shader的初始化,并绘制了一个点,这一篇我们来绘制一个三角形,并介绍缓冲区的使用方法。缓冲区就是一块存储数据的区域,为了方便我们一次性把所需的数据都传给WebGL,而不是每次都去传。创建着色器对象获取着色器对象的源代码绑定着色器的源编译着色器创建并关联项目创建并绑定缓冲区读取缓冲区数据并绘制三角形本篇中,我们首先回忆了Shader。原创 2024-09-09 11:59:48 · 1084 阅读 · 0 评论 -
WebGL系列教程二(环境搭建及着色器初始化)
那么什么是顶点着色器?什么是片元着色器?什么叫做光栅化?这三个概念对我们学习WebGL还是很重要的,在学习WebGL的过程中,我曾经常困惑于片元、光栅化的概念,现在我们就用一张图来解释下。假设我们要在屏幕上画一个三角形。如图所示,v1 v2 v3就叫做顶点,三角形内部的一个个红色的点,就叫做片元,也叫片段,其实它的意思就是一个个像素。注意像素应该是密密麻麻占满了整个三角形,这里为了示意只画出来了少部分。屏幕是什么?屏幕是一种光栅设备,因此把任何一种图形,不论是二维三维的,画在屏幕上,就叫做光栅化。原创 2024-09-08 10:30:27 · 1059 阅读 · 0 评论 -
WebGL系列教程一(开篇)
现在三维GIS开发可谓是十分火爆了,尤其是以Cesium为首的三维GIS框架,基本是各个三维GIS开发岗位必须要求掌握的技能。然而当我们需要在Cesium中做出一些很炫酷的功能,或者需要修改Cesium的源码以提高性能时,我们会发现需要大量的WebGL的知识,尤其需要会写GLSL),而这对于一个未完全掌握计算机图形学知识和WebGL的giser来说,是比较困难的。作者在学习WebGL的过程中就是这样的一个过程。因此作者决定新开一个系列,讲一讲自己是如何学习WebGL。原创 2024-09-07 12:11:21 · 1097 阅读 · 0 评论