跟月影学可视化
月影
前奇虎 360 奇舞团团长,可视化 UI 框架 SpriteJS 核心开发者,《JavaScript 王者归来》作者
30206 人已学习
新⼈⾸单¥68
登录后,你可以任选4讲全文学习
课程目录
已完结/共 54 讲
跟月影学可视化
15
15
1.0x
00:00/00:00
登录|注册

23 | 如何模拟光照让3D场景更逼真?(上)

衰减系数计算公式
反射类型
介质(物体的材质)
光源
真实世界多光源情况
光源类型总结
小试牛刀
聚光灯参数
片元着色器代码
聚光灯定义
光线衰减
片元着色器代码
顶点着色器代码
点光源定义
JavaScript代码
片元着色器代码
顶点着色器代码
平行光定义
片元着色器代码
计算物体颜色公式
环境光定义
光照效果决定因素
光照效果模拟重要性
总结
聚光灯效果
点光源效果
平行光效果
环境光效果
3D场景逼真
光照模拟

该思维导图由 AI 生成,仅供参考

你好,我是月影。
在我们生活的真实物理世界中,充满了各种类型的光。在这些光的照射下,我们看到的每个物体都会呈现不同的色彩。所以,要想让我们渲染出的 3D 物体看起来更自然、逼真,很重要的一点就是模拟各种光照的效果。那今天,我们就一起来学习一下,怎么模拟光照效果。
物体的光照效果是由光源、介质(物体的材质)和反射类型决定的,而反射类型又由物体的材质特点决定。在 3D 光照模型中,根据不同的光源特点,我们可以将光源分为 4 种不同的类型,分别是环境光(Ambient Light)、平行光(Directional Light)、点光源(Positional Light)和聚光灯(Spot Light)。而物体的反射类型,则分为漫反射和镜面反射两种。
当然了,实际自然界中的光照效果,肯定比我说的要复杂得多。但现阶段,我们弄明白这三个决定因素,就能模拟出非常真实的光照效果了。

如何给物体增加环境光效果?

我们先来说说怎么给物体增加环境光效果。
那什么是环境光呢?环境光就是指物体所在的三维空间中天然的光,它充满整个空间,在每一处的光照强度都一样。环境光没有方向,所以,物体表面反射环境光的效果,只和环境光本身以及材质的反射率有关。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

本文深入介绍了模拟光照以增强3D场景逼真度的技术方法。首先探讨了光照效果的决定因素,包括光源、介质和反射类型。随后详细介绍了环境光和平行光的效果模拟方法,包括通过公式计算环境光的颜色,并使用片元着色器进行渲染,以及通过顶点着色器计算光线方向和法向量,在片元着色器中计算漫反射光,最终得到物体的颜色效果。文章通过代码示例和图示生动展示了模拟光照的实际操作过程和效果展示。此外,还介绍了点光源和聚光灯的效果模拟方法,包括衰减系数的考虑和聚光灯的角度范围判断。最后,总结了环境光、平行光、点光源和聚光灯的特点和参数,鼓励读者尝试添加多个光源以实现更丰富的光照效果。整体而言,本文为读者提供了模拟光照的基本原理和实现方法,为渲染逼真的3D场景提供了重要参考。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《跟月影学可视化》
新⼈⾸单¥68
立即购买
登录 后留言

全部留言(4)

  • 最新
  • 精选
  • Geek_00734e
    const vertex = /* glsl */ ` precision highp float; attribute vec3 position; attribute vec3 normal; uniform mat4 modelMatrix; uniform mat4 viewMatrix; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform mat3 normalMatrix; uniform vec3 directionalLight; varying vec3 vNormal; varying vec3 vDir; void main() { // 计算光线方向 // 增加视图矩阵 光线方向会随着摄像机转动而转动方向 // vec4 invDirectional = viewMatrix * vec4(directionalLight, 0.0); // 光线方向一直固定不变 vec4 invDirectional = vec4(directionalLight, 0.0); // 取反向(因为反射的光线进入眼睛才是人看到的颜色) vDir = -invDirectional.xyz; // 计算法向量 vNormal = normalize(normalMatrix * normal); // modelViewMatrix === viewMatrix * modelMatrix; // gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0); } `; 不知道我所理解的对不对,疑惑的地方都写在注释里了
    2022-01-12
  • Geek_00734e
    uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; uniform mat4 viewMatrix; // 计算光线方向 vec4 invDirectional = viewMatrix * vec4(directionalLight, 0.0); vDir = -invDirectional.xyz; // 计算法向量 vNormal = normalize(normalMatrix * normal); gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); modelViewMatrix与viewMatrix有什么区别,为什么法向量跟平行光用的矩阵不一样?为啥要这样做
    2022-01-12
  • Geek_00734e
    precision highp float; uniform vec3 ambientLight; uniform vec3 materialReflection; void main() { gl_FragColor.rgb = ambientLight * materialReflection; gl_FragColor.a = 1.0; } 两个向量怎么乘嘛
    2021-04-13
  • l_j_dota_1111
    请问方向光、点光源和聚光灯产生的光 前一个物体有可能会挡住后面的物体 导致后面的物体不会又光线,请问这种阴影效果怎么办
    2021-03-18
收起评论
显示
设置
留言
4
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部