WebGL光照阴影映射

原文地址:WebGL光照阴影映射经过前面的学习,webgl的基本功能都已经掌握了,我们不仅掌握了着色器的编写,图形的绘制,矩阵的变换,添加光照,还通过对webgl的基础api封装,编写出了便利的工具库. 是时候进一步深入学习webgl的高级功能了,我认为要做逼真的3D特效,阴影绝对是一个必不可少的环节.现在我们就在之前光照的基础上添加阴影效果吧. 首先看一下阴影效果的实例: 阴影综合(多物体高精度) 点光源聚光灯阴影内容大纲我们以阴影综合(多物体高精度PCF)为例, 开始…

DirectX11 With Windows SDK--31 阴影映射

前言阴影既暗示着光源相对于观察者的位置关系,也从侧面传达了场景中各物体之间的相对位置.本章将起底最基础的阴影映射算法,而像复杂如级联阴影映射这样的技术,也是在阴影映射的基础上发展而来的. 学习目标: 掌握基本的阴影映射算法熟悉投影纹理贴图的工作原理了解阴影图走样的问题并学习修正该问题的常用策略 DirectX11 With Windows SDK完整目录 Github项目源码欢迎加入QQ群: 727623616 可以一起探讨DX11,以及有什么问题也可以在这里汇报. 核心思想阴影映射技…

DirectX11 With Windows SDK--38 级联阴影映射(CSM)

前言在31章我们曾经实现过阴影映射,但是受到阴影贴图精度的限制,只能在场景中相当有限的范围内投射阴影.本章我们将以微软提供的例子和博客作为切入点,学习如何解决阴影中出现的Atrifacts: 边缘闪烁&抖动阴影接缝阴影缺失 perspective aliasing projective ali…

webGL 光照

1.着色(shading) 在三维图形学术语“着色”的真正含义就是,根据光照条件重建“物体各表面明暗不一的效果”的过程.明白着色过程,需要考虑两件事: 1.发出光线的光源类型. 2.物体表面如何反射光线. 2.光源类型真实世界中的光主要有两种,平行光(directional light),类似于自然中的太阳光:点光源光(point light),类似于人造灯泡的光.此外,我们还用环境光(ambient light)来模拟真实世界中的非直射光(也就是由光源发出后经过墙壁或其他物…

WebGL学习笔记（九）：阴影

3D中实现实时阴影技术中比较常见的方式是阴影映射(Shadow Mapping),我们这里也以这种技术来实现实时阴影. 阴影映射背后的思路非常简单:我们先以光的位置为视角进行渲染,我们能看到的东西都将被点亮,看不见的一定是在阴影之中了(这里会将是否可视的信息作为深度贴图进行渲染).假设有一个地板,在光源和它之间有一个大盒子.由于光源处向光线方向看去,可以看到这个盒子,但看不到地板的一部分,这部分就应该在阴影中了. 平行光的阴影实现方式相对来说,平行光的实现要简单得多,下面我们看看平行光的阴影实…

WebGL 与 WebGPU比对[5] - 渲染计算的过程

目录 1. WebGL 1.1. 使用 WebGLProgram 表示一个计算过程 1.2. WebGL 没有通道 API 2. WebGPU 2.1. 使用 Pipeline 组装管线中各个阶段 2.2. 使用 PassEncoder 调度管线内的行为 2.3. 使用 CommandEncoder 编码多个通道 2.4. PassEncoder 和 Pipeline 的关系 3. 总结前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的(纹理留到下一…

WebGL 高级技术

1.如何实现雾化实现雾化的方式由多种,这里使用最简单的一种:线性雾化(linear fog).在线性雾化中,某一点的雾化程度取决于它与视点之间的距离,距离越远雾化程度越高.线性雾化有起点和终点,起点表示开始雾化之处,终点表示完全雾化之处两点之间某一点的雾化程度与该点与视点的距离呈线性关系.比终点更远的点完全雾化了,即完全看不见了. 某一点雾化的程度可以被定义为雾化因子(fog factor),并在线性雾化公式中被计算出来: <雾化因子> = (<终点> - <当前点与视点间…

游戏里的动态阴影-ShadowMap实现原理

ShadowMap是比较流行的实时阴影实现方案,原理比较简单,但真正实现起来还是会遇到很多问题的,我这里主要记录下实现方式先看效果凹凸地形上也有阴影实现原理 ShadowMap技术是从灯光空间用相机渲染一张RenderTexture,把深度值写入其中所以称之为深度图 ,在把接受阴影的物体从模型空间转换到灯光空间中,获取深度图里的深度进行比较,如果深度值比深度图中取出的值大就说明该点为阴影. <Cg教程_可编程实时图形权威指南>书上说的原理阴影映射是一个双过程的技术: 1. 首先,场景…

Unity shader学习之阴影

Unity阴影采用的是 shadow map 的技术,即把摄像机放到光源位置上,看不到的地方就有阴影. 前向渲染中,若一光源开启了阴影,Unity会计算它的阴影映射纹理(shadow map),它其实是一张深度图,记录了从光源位置出发,能看到的场景中距离它最近的表面位置的深度信息. Unity中采用LightMode为ShadowCaster的Pass来生成这张 shadow map,首先会从本shader中找这个pass,若没有就从fallback的shader中层层寻找. 然后在fragme…

【Unity Shader】（七） ------ 复杂的光照（下）

笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Shader](三)------ 光照模型原理及漫反射和高光反射的实现 [Unity Shader](四)------ 纹理之法线纹理.单张纹理和遮罩纹理的实现 [Unity Shader](五) ------ 透明效果之半透明效果的原理及实现 …

【Unity Shader】（六） ------ 复杂的光照（上）

Unity3D -- shader光照常用函数和变量

上一篇记录了shader常用函数和变量,这篇记录一些光照计算时常用函数和变量 1.内置的光照变量 _LightColor0 float4 //该Pass处理的逐像素光源的颜色 _WorldSpaceLightPos0 float4 //_WorldSpaceLightPos0.xyz是该Pass处理的逐像素光源的位置.如果该光源是平行光,那么_WorldSpaceLightPos0.w是0,其他光源类型是1 _LightMatrix0 float4x4 //从世界空间到光源空间的变换矩阵,可以用…

Unity Shader入门精要学习笔记 - 第9章更复杂的光照

转载自冯乐乐的<Unity Shader入门精要> Unity 的渲染路径在Unity里,渲染路径决定了光照是如何应该到Unity Shader 中的.因此,如果要和光源打交道,我们需要为每个Pass指定它使用的渲染路径,只有这样才能让Unity知道,“哦,原来这个程序想要这种渲染路径,那么好的,我把光源和处理后的光照信息都放在这些数据里,你可以访问啦!”也就是说,我们只有为Shader 正确地选择和设置了需要的渲染路径,该Shader的光照计算才能被正确执行. Unity支持多种类型的渲…

WebGL简易教程——目录

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

WebGL高级编程：开发Web3D图形 PDF（中文版带书签）

WebGL高级编程:开发Web3D图形目录 WebGL简介11.1 WebGL基础11.2 浏览器3D图形吸引人的原因21.3 设计一个图形API31.3.1 即时模式API31.3.2 保留模式API31.4 图形硬件简介41.4.1 GPU41.4.2 帧缓存51.4.3 纹理存储器61.4.4 视频控制器61.5 WebGL图形流水线61.5.1 顶点着色器81.5.2 图元装配111.5.3 光栅化121.5.4 片段着色器121.5.5 逐片段操作151.6 WebGL与其他图形技术…

three.js阴影

<!DOCTYPE html> <html> <head> <title>Example 01.03 - Materials and light</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src=…

DirectX11 With Windows SDK--23 立方体映射：动态天空盒的实现

前言上一章的静态天空盒已经可以满足绝大部分日常使用了.但对于自带反射/折射属性的物体来说,它需要依赖天空盒进行绘制,但静态天空盒并不会记录周边的物体,更不用说正在其周围运动的物体了.因此我们需要在运行期间构建动态天空盒,将周边物体绘制入当前的动态天空盒. 没了解过静态天空盒的读者请先移步到下面的链接: 章节回顾 22 立方体映射:静态天空盒的读取与实现 DirectX11 With Windows SDK完整目录 Github项目源码欢迎加入QQ群: 727623616 可以一起探讨DX11…

Unity 3D中的阴影设置

在Unity 3D中,经常需要用到光照阴影,即Directional Light的Shadow,Shadow分为Hard Shadow和Soft Shadow.区别是Soft Shadow的阴影边缘比较平滑,接近真实,但是性能消耗大于Hard Shadow. Lightmapping有3种选择:实时光照阴影(RealTimeOnly).场景烘焙阴影(BakedOnly).以及上面两者结合的阴影(Auto). RealTimeOnly:所有场景物体的光照都实时计算,实时光照对性能消耗比较大: Ba…

WebGL学习笔记五

本章主要是对纹理的进一步讲解,我们很多时候需要将现实中已有的图片在网页中展示出来而不是去创造图片,通过纹理我们可以将光栅化的图形和图片纹理形成映射并且将图片在图形中显示出来.基本过程与前几章一致,在着色器中主要是添加了一个取样器的变量作用是从纹理单元中取出图形在不同坐标的片元上显示出来,这里先要设置纹理坐标将纹理坐标和webGL坐标形成映射,然后是创建图像对象,创建纹理对象,开启某个纹理单元,将纹理对象与纹理单元绑定,配置纹理参数,将图像对象添加进纹理单元,将纹理单元中的纹理传给取样器,取…

three.js入门系列之光和阴影

初中物理教过我们镜面反射和漫反射,这是由于物体的材质直接导致的. 在three.js中,由于物体的材料不同,对于光源的反应也是不一样的,下面就让我们一探究竟. 一.材料据Three.js中描述,有两种材料能对光源有所反应: 就是图中箭头标识的两种材料. 二.检验编辑前例,设置光源位置: 如图所示,我们在(1,1,0)点放置了一个光源,但是此时,三个物体的材质都是MeshNormalMaterial: 此时,页面显示如下: 三个物体较之前并无任何改变,因为材料的缘故,对光源并无任何反应,下面我…

（转) GEM透视阴影贴图

转载:小道透视阴影贴图(Perspective Shadow Maps, PSMs)是由Stamminger和Drettakis在 SIGGRAPH 2002上提出的一种阴影贴图(Shadow Maps)流派的方法. 透视投影贴图方法的基本思想是,为了减少或消除阴影贴图的失真走样,对投射到大像素区域的物体取最大的阴影贴图纹素密度. 这章提出了一种优化透视阴影贴图(Perspective Shadow Maps)方法的新思路,对其三种缺陷都一一进行了改进. [核心要点] 这章首先讲到动态阴影的创…

Three.js开发指南---使用three.js里的各种光源（第三章）

本章的主要内容 1 three.js有哪些可用的光源 2 什么时候用什么光源. 3 如何调整配置各种光源 4 如何创建镜头炫光一光源光源大概有7种, 其中基础光源有4种环境光(AmbientLight会它的颜色会添加到整个场景和所有对象的当前颜色上), 点光源(PointLight空间中的一点,朝所有的方向发射光线), 聚光灯光源(SpotLight这种光源有聚光的效果,类似于台灯,吊灯,手电筒), 方向光(DirectionalLight也称无限光,从这种光源发出的光线可以看作是平行的…

Three.js开发指南---使用three.js的材质（第四章）

材质就像物体的皮肤,决定了几何体的外表,例如是否像草地/金属,是否透明,是否显示线框等一材质 THREE.js的材质分为多种,Three.js提供了一个材质基类THREE.Material, 该基类拥有three.js所有材质的公有属性,分为三类:基础属性,融合属性,高级属性基础属性:ID,name,透明度,是否可见,是否需要刷新等融合属性:决定了物体如何与背景融合高级属性:可以控制WEBGL上下文渲染物体的方法,大多数情况下,是不会用这些属性,我们这里不再讨论 1.1 基础属性属性…

剖析虚幻渲染体系（15）- XR专题

目录 15.1 本篇概述 15.1.1 本篇内容 15.1.2 XR概念 15.1.2.1 VR 15.1.2.2 AR 15.1.2.3 MR 15.1.2.4 XR 15.1.3 XR综述 15.1.4 XR生态 15.1.5 XR应用 15.2 XR技术 15.2.1 XR技术综述 15.2.1.1 软件架构 15.2.1.2 Quest 2开发 15.2.1.3 OpenXR 15.2.2 光学和成像 15.2.3 延迟和滞后 15.2.3.1 Prediction 15.2.3.2 T…