qq_22849251的博客

【代码】【WebGL】getContext参数详解。

下面使用相同的场景分别使用正向渲染和延迟渲染，渲染如下场景然后就是在后处理中使用这三个纹理进行光照处理

WebGL 基于 OpenGL ES，WebGL 1.0 是 OpenGL ES 2.0 的实现，而 WebGL 2.0 则基于 OpenGL ES 3.0。OpenGL ES 2.0 基于OpenGL 2.0，OpenGL ES 3.0 基于OpenGL 3.3，

1.smoothstep(float edgo0,float edge1, float x);其中的 edge0 是样条线插值的下界，edge1 是样条线插值的下界，当 x 小于下界返回 0，当 x 大于上界返回 1，介于上界下界之间返回一个平滑的曲线2.mix(x,y,a)返回一个线性组合 x(1-a)+ya3.step(edge,x)如果x < edge，返回0.0，否则返回1.04. clampclamp(x, minVal, maxVal)：使返回值限制在minVal和maxV

1.shadertoy预置参数可参考下博客https://blog.youkuaiyun.com/qq_32307691/article/details/727867432.片元坐标为什么除屏幕长宽使用屏幕空间坐标系在许多时候都不是很方便，这里引入一种常用的坐标系：uv坐标系。此坐标系将屏幕的长宽都映射到了[0,1]，这样方便我们用数字直接操作。因为0<fragCoord.x< iResolution.x0<fragCoord.y< iResolution.yvoid mainIma

给个完整案例，可以对比，是一致的。

扩展搜索glsl安装。

从像素数据加载纹理从图像元素加载纹理。

webgl

图形学

离线渲染如何需要开启深度测试的话，需要额外操作，这里不展开。

开始学习webgl一些简单demo的时候，看到是使用可以获取当前着色器程序某个attribute变量的如果使用就可以自定义指定位置，根据allAttrInfo中attribute顺序指定对应索引位置，方便后续调用。

webgl基本原理流程看图https://webglfundamentals.org/webgl/lessons/resources/webgl-state-diagram.html?exampleId=use-2-programs#no-help

一般有attribute和uniform两种方式进行实例化绘制。

webgl

webgl

记录下纹理相关容易忘记的地方。

假如场景中有一个平面和三角形，实现阴影的步骤和原理如下：1.以灯光为相机视角渲染平面和三角形，记录片元的深度信息到gl_FragColor2.以相机为视角进行渲染三角形和平面，着色器如下这里就是当前模型同一个点取得灯光视角空间的深度和在相机视角下的深度，进行对比（当前片元在投影贴图中所对应的片元）之所以要先取灯光视角空间的所有模型的深度信息（上一步的帧缓存），是当前渲染的时候只能取得自己得深度。