关键词：
说明
【跟月影学可视化】学习笔记。
光照效果简介
物体的光照效果是由光源、介质（物体的材质）和反射类型决定的，而反射类型又由物体的材质特点决定。
在 3D 光照模型中，根据不同的光源特点分为四种：
环境光（Ambient Light）：指物体所在的三维空间中天然的光，它充满整个空间，在每一处的光照强度都一样。- 特点1：在空间中均匀分布，在任何位置上环境光的颜色都相同
- 特点2：环境光没有方向，与物体的材质有关
平行光（Directional Light）：平行光是朝着某个方向照射的光，能够照亮几何体的一部分表面，它属于有向光。点光源（Positional Light）：指空间中某一点发出的光，与方向光不同的是，点光源不仅有方向属性，还有位置属性。聚光灯（Spot Light）：与点光源相比，聚光灯增加了方向以及角度范围，只有在这个范围内，光线才能照到。
点光源跟平行光的示意图：
聚光灯示意图：
有向光在与物体发生作用的时候，根据物体的材质特性，会产生两种反射类型：
漫反射（Diffuse reflection）镜面反射（Specular reflection）
漫反射示意图：
一个物体最终的光照效果，是漫反射、镜面反射以及环境光叠加在一起的效果，示意图如下：
如何给物体增加环境光效果？
环境光没有方向，物体表面反射环境光的效果，只和环境光本身以及材质的反射率有关。
物体在环境光中呈现的颜色的公式如下：（环境光的颜色为 L，材质对光的反射率为 R。）
下面实现给物体增加环境光效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>如何给物体增加环境光效果</title>
<style>
canvas
border: 1px dashed #fa8072;
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script type="module">
import Renderer, Camera, Transform, Sphere, Box, Cylinder, Torus, Orbit, Program, Mesh, Color from './common/lib/ogl/index.mjs';
// JavaScript Controller Library
import * as dat from './common/lib/dat.gui.js';
console.log(dat)
const canvas = document.querySelector('canvas');
const renderer = new Renderer(
canvas,
width: 512,
height: 512,
);
const gl = renderer.gl;
gl.clearColor(1, 1, 1, 1);
const camera = new Camera(gl, fov: 35);
camera.position.set(0, 0, 10);
camera.lookAt([0, 0, 0]);
const scene = new Transform();
const vertex = `
precision highp float;
attribute vec3 position;
attribute vec3 normal;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat3 normalMatrix;
void main()
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
`;
// 传入环境光 ambientLight 和材质反射率 materialReflection
const fragment = `
precision highp float;
uniform vec3 ambientLight;
uniform vec3 materialReflection;
void main()
gl_FragColor.rgb = ambientLight * materialReflection;
gl_FragColor.a = 1.0;
`;
// 创建四个不同的几何体，初始化它们的环境光 ambientLight 以及材质反射率 materialReflection
const sphereGeometry = new Sphere(gl);
const cubeGeometry = new Box(gl);
const cylinderGeometry = new Cylinder(gl);
const torusGeometry = new Torus(gl);
const program1 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight: value: [1, 1, 1],
materialReflection: value: [250/255, 128/255, 114/255],
,
);
const program2 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight: value: [1, 1, 1],
materialReflection: value: [218/255, 165/255, 32/255],
,
);
const program3 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight: value: [1, 1, 1],
materialReflection: value: [46/255, 139/255, 87/255],
,
);
const program4 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight: value: [1, 1, 1],
materialReflection: value: [106/255, 90/255, 205/255],
,
);
const torus = new Mesh(gl, geometry: torusGeometry, program: program1);
torus.position.set(0, 1.3, 0);
torus.setParent(scene);
const sphere = new Mesh(gl, geometry: sphereGeometry, program: program2);
sphere.position.set(1.3, 0, 0);
sphere.setParent(scene);
const cube = new Mesh(gl, geometry: cubeGeometry, program: program3);
cube.position.set(0, -1.3, 0);
cube.setParent(scene);
const cylinder = new Mesh(gl, geometry: cylinderGeometry, program: program4);
cylinder.position.set(-1.3, 0, 0);
cylinder.setParent(scene);
const controls = new Orbit(camera);
// 添加动画
requestAnimationFrame(update);
function update()
requestAnimationFrame(update);
controls.update();
torus.rotation.y -= 0.02;
sphere.rotation.y -= 0.03;
cube.rotation.y -= 0.04;
cylinder.rotation.y -= 0.02;
renderer.render(scene, camera);
// 添加控制
const gui = new dat.GUI();
const palette =
light: '#FFFFFF',
reflection1: '#fa8072', // salmon rgb(250, 128, 114) [250/255, 128/255, 114/255, 1]
reflection2: '#daa520', // goldenrod rgb(218, 165, 32) [218/255, 165/255, 32/255, 1]
reflection3: '#2e8b57', // seagreen rgb(46, 139, 87) [46/255, 139/255, 87/255, 1]
reflection4: '#6a5acd', // slateblue rgb(106, 90, 205) [106/255, 90/255, 205/255, 1]
;
gui.addColor(palette, 'light').onChange((val) =>
const color = new Color(val);
program1.uniforms.ambientLight.value = color;
program2.uniforms.ambientLight.value = color;
program3.uniforms.ambientLight.value = color;
program4.uniforms.ambientLight.value = color;
);
gui.addColor(palette, 'reflection1').onChange((val) =>
program1.uniforms.materialReflection.value = new Color(val);
);
gui.addColor(palette, 'reflection2').onChange((val) =>
program2.uniforms.materialReflection.value = new Color(val);
);
gui.addColor(palette, 'reflection3').onChange((val) =>
program3.uniforms.materialReflection.value = new Color(val);
);
gui.addColor(palette, 'reflection4').onChange((val) =>
program4.uniforms.materialReflection.value = new Color(val);
);
</script>
</body>
</html>
如何给物体增加平行光效果？
有向光的漫反射在各个方向上的反射光均匀分布，反射强度与光的射入方向与法线的夹角的余弦成正比。
下面实现给物体增加平行光效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>如何给物体增加平行光效果</title>
<style>
canvas
border: 1px dashed #fa8072;
</style>
</head>
<body>
<canvas width="512" height="512"></canvas>
<script type="module">
import Renderer, Camera, Transform, Sphere, Box, Cylinder, Torus, Orbit, Program, Mesh, Color from './common/lib/ogl/index.mjs';
// JavaScript Controller Library
import * as dat from './common/lib/dat.gui.js';
console.log(dat)
const canvas = document.querySelector('canvas');
const renderer = new Renderer(
canvas,
width: 512,
height: 512,
);
const gl = renderer.gl;
gl.clearColor(1, 1, 1, 1);
const camera = new Camera(gl, fov: 35);
camera.position.set(0, 0, 10);
camera.lookAt([0, 0, 0]);
const scene = new Transform();
// 在顶点着色器中计算光线的方向的运算次数少
const vertex = `
precision highp float;
attribute vec3 position;
attribute vec3 normal;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat3 normalMatrix;
// 添加一道平行光
uniform vec3 directionalLight;
varying vec3 vNormal;
varying vec3 vDir;
void main()
// 计算光线方向
vec4 invDirectional = viewMatrix * vec4(directionalLight, 0.0);
vDir = -invDirectional.xyz;
// 计算法向量
vNormal = normalize(normalMatrix * normal);
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
`;
// 传入环境光 ambientLight 和材质反射率 materialReflection
// 在片元着色器里，计算光线方向与法向量夹角的余弦，计算出漫反射光。
const fragment = `
precision highp float;
uniform vec3 ambientLight;
uniform vec3 materialReflection;
uniform vec3 directionalLightColor;
varying vec3 vNormal;
varying vec3 vDir;
void main()
// 求光线与法线夹角的余弦
float cos = max(dot(normalize(vDir), vNormal), 0.0);
// 计算漫反射
vec3 diffuse = cos * directionalLightColor;
// 合成颜色
gl_FragColor.rgb = (ambientLight + diffuse) * materialReflection;
gl_FragColor.a = 1.0;
`;
// 创建四个不同的几何体，初始化它们的环境光 ambientLight 以及材质反射率 materialReflection
const sphereGeometry = new Sphere(gl);
const cubeGeometry = new Box(gl);
const cylinderGeometry = new Cylinder(gl);
const torusGeometry = new Torus(gl);
// 添加一个水平向右的白色平行光
const ambientLight = value: [1, 1, 1] ;
const directional =
directionalLight:
value: [1, 0, 0]
,
directionalLightColor:
value: [1, 1, 1]
;
const program1 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight,
materialReflection: value: [250/255, 128/255, 114/255],
...directional
,
);
const program2 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight,
materialReflection: value: [218/255, 165/255, 32/255],
...directional
,
);
const program3 = new Program(gl,
vertex,
fragment,
uniforms:
ambientLight,
materialReflection: value: [46/255, 139/255, 87/255],
...directional
,
);
const program4 = new Program(gl, 查看详情
视觉高级篇24#如何模拟光照让3d场景更逼真？（下）(代码片段)
说明【跟月影学可视化】学习笔记。什么是镜面反射？如果若干平行光照射在表面光滑的物体上，反射出来的光依然平行，这种反射就是镜面反射。越光滑的材质，它的镜面反射效果也就越强，并且物体表面... 查看详情
怎么让unity3d中的模型渲染更逼真
...能出效果，需要经验参考技术A除开模型，那就是材质和光照阴影了 参考技术B这个问题有点深。。。。 查看详情
视觉高级篇25#如何用法线贴图模拟真实物体表面(代码片段)
...同的表面，但实际上它又只是一个光滑的平面。对于视觉效果而言，它的效率比原有的凹凸表面更高，若在特定位置上应用光源，可以让细节程 查看详情
视觉高级篇22#如何用仿射变换来移动和旋转3d物体？(代码片段)
说明【跟月影学可视化】学习笔记。三维仿射变换：平移对于平移变换来说，如果向量P(x0x_0x0,y0y_0y0,z0z_0z0)沿着向量Q(x1x_1x1,y1y_1y1,z1z_1z1)平移，只需要让P加上Q，就能得... 查看详情
视觉高级篇22#如何用仿射变换来移动和旋转3d物体？(代码片段)
说明【跟月影学可视化】学习笔记。三维仿射变换：平移对于平移变换来说，如果向量P(x0x_0x0,y0y_0y0,z0z_0z0)沿着向量Q(x1x_1x1,y1y_1y1,z1z_1z1)平移，只需要让P加上Q，就能得... 查看详情
视觉高级篇25#如何用法线贴图模拟真实物体表面(代码片段)
...同的表面，但实际上它又只是一个光滑的平面。对于视觉效果而言，它的效率比原有的凹凸表面更高，若在特定位置上应用光源，可以让细节程度较低的表面生成高细节程度的精确光照方向和反射效果。什么是切... 查看详情
视觉高级篇27#如何实现简单的3d可视化图表：github贡献图表的3d可视化？(代码片段)
说明【跟月影学可视化】学习笔记。第一步：准备要展现的数据可以使用这个生成数据：https://github.com/sallar/github-contributions-api这里直接使用月影大佬的github提交数据的数据即可结构大致如下：第二步：用SpriteJS渲... 查看详情
arengine光照估计能力，让虚拟物体在现实世界更具真实感
AR是一项现实增强技术，即在视觉层面上实现虚拟物体和现实世界的深度融合，打造沉浸式AR交互体验。而想要增强虚拟物体与现实世界的融合效果，光照估计则是关键能力之一。人们所看到的世界外观，都是由光... 查看详情
如何创建逼真的 .scn 文件？
】如何创建逼真的.scn文件？【英文标题】：Howtocreaterealistic.scnfiles?【发布时间】：2017-12-0212:29:57【问题描述】：看看苹果示例AR应用，有许多看起来很逼真的物体（杯子、蜡烛等）。但是，在Xcode上使用场景工具包编辑器很明显... 查看详情
视觉高级篇18#如何生成简单动画让图形动起来？(代码片段)
说明【跟月影学可视化】学习笔记。动画的三种形式固定帧动画：预先准备好要播放的静态图像，然后将这些图依次播放，实现起来最简单，只需要为每一帧准备一张图片，然后循环播放即可。增量动画：... 查看详情
unity虚拟仿真怎么样
...术，由计算机生成现实世界的再现和构想中的世界，借助视觉、听觉及触觉等多种传感通道与虚拟世界进行自然的交互。 参考技术BUnity是一种流行的游戏引擎，其强大的3D图形渲染和物理引擎技术，使其也被广泛应用于虚拟仿真... 查看详情
unity3d画面渲染官方教程对光照和渲染的介绍
...来描述模拟复杂光照行为，比如光的反弹（bounces）和它如何同世间万物进行交互的一系列的技术和数学模型的专业术语。准确的模拟“GI”（全局照明）是一件很有挑战的事情，并且具有很高的计算成本。正因为如此，游戏中（... 查看详情
求adobesubstance3dstager2021v1.0.0.5070网盘资源
...，支持多样的格式，涵盖从图像到Web及AR体验，给人类的视觉带来了新的突破。借助该软件，您可以在上下文中做出创意决策，实时完善和调整您的构图，直观呈现并编辑带有复杂光照和阴影的高级素材。还支持光线追踪的功能... 查看详情
3d轻量化引擎推出新技术，模型渲染更逼真！
...的渲染技术。PBR将材料表示为一系列方程，这些方程对光如何从表面反射进行建模，再通过GPU上运行的着色器代码进行有效地实现。一、工程领域可视化问题停滞严重在过去的30年里，PC端的3D轻量化功能取得了令人难以置信的进... 查看详情
3d场景的制作步骤
...的制作步骤1.场景建模的使用目的使用地形生成编辑器在模拟自然地形效果上有很大的优势，但是也有局限性。在表现比较规整的地形，比如一现代化城市，初具规模的小镇，地下宫殿等等就存在这样的局限。因为使用地形编辑... 查看详情
如何在视觉上拒绝表格中的用户输入？
】如何在视觉上拒绝表格中的用户输入？【英文标题】：Howtovisuallyrejectuserinputinatable?【发布时间】：2011-01-2423:23:40【问题描述】：在基于表格的应用程序模块的编程中（即用户主要在已经布局的表格中输入表格数据），您将如... 查看详情
如何处理画面的虚实?
...露后期制作痕迹，画面尽善尽美。图4来自《海角七号》视觉特效制作团队--大腕影像的视觉特效执行长林哲民表示："Autodesk?Maya?功能强大，各种快捷键的设计具有人性化的特点，而且一直通过创新来达到用户的需求，让导演... 查看详情