webGL

这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战 玩过LOL或者王者的人应该都知道，很多游戏在运行时，屏幕上不仅显示主视角游戏场景，还会显示小地图这类的次视角游戏场景。想要满足

1. 前言 到目前为止，案例中的物体都不是透明的，这在很多情况下能够满足需求。但现实世界中还有很多半透明的物体，如果希望在场景中真实再现此类物体，最常用的技术就是混合。 2. 混合技术 顾名思义，混合

前面所有案例中的 3D 模型采用的都是直接给出顶点坐标值（（如立方体）或基于数学式用程序生成坐标值（如球体）的方式，这在一些简单的游戏场景中已经足够了。但如果建立一些更复杂、逼真的游戏场景，则物体需要

我们的场景中已经充满了多边形物体，其中每个都可能由成百上千平坦的三角形组成。我们以向三角形上附加纹理的方式来增加额外细节，提升真实感，隐藏多边形几何体是由无数三角形组成的事实。纹理确有助益，然而当你近

现实中，不同的物体，它们对光产生的反应是不一样的，也就是说当光线照射在物体上，它们反射的颜色不一样，亮度也不一样，这是由物体本身的材质决定的。

webGl的图形变换无非就是顶点坐标的矩阵变换，下面我们看几个例子。 移动图形 1.想要改变顶点坐标，那就需要通过变量translation与原始坐标进行运算，查可改变位置，这部分需要编写在glsl里

一 相关概念 光：方向 + 颜色(包含了强度) 光源 平行光：同方向 + 颜色 点光源：方向（光源位置到照射位置） + 颜色 环境光：颜色 入射角：入射光反方向与平面法线的夹角 反射： 漫反射： 反射

概述 上一个demo呈现的效果是一个三角形，直观的感觉就是还是二维的感觉，使用canvas或者div+css也可以实现，那么什么效果是两种方法无法实现的呢？那现在我们来看看三维世界中物体的几种图形变换

webgl的api地址如下： https://www.khronos.org/registry/webgl/specs/latest/1.0/ https://www.khronos.org/regi

着色器语言主要特性： 着色器语言是一门高级的图形编辑语言和过程语言。 顶点着色器和片元着色器使用相同的语言。 基于C/C++语法及流程控制，但该语言不支持double,byte,short,long数

函数参数的限定符： 函数的参数默认是以拷贝的形式传递的，也就是值传递，任何传递给函数参数的变量，其值都会被复制一份，然后再交给函数内部进行处理。所以，可以为参数添加限定符来达到传递引用的目的。 限定符

随着HTML5的兴起，大量优秀的网页涌现出来。作为HTML5 官方的Web 3D解决方案， WebGL 2.0立刻受到无数开发人员的追捧。本文是一个简单的webgl Demo。

WebGL，是一项用来在网页上绘制和渲染复杂三维图形（3D 图形），并允许用户与之进行交互的技术。传统意义上来说，只有高配置的计算机或专用的游戏机才能渲染三维图形。而现在，随着个人计算机和浏览器的性能