入门教程
提升教程
常见问题
O2WebGLEditor细节面板操作教程2.0
发布时间:2024-06-11 15:53:00 来源: 本站

1、灯光属性

系统默认有点光源、聚光灯、平行光、全局光四种基本光源,每个灯光都有其特定的参数设置。

image.png

 

1.1 光源类型

• 点光源

一个位于场景中某一点的光源,它向各个方向均匀地发光。

• 聚光灯

一个位于场景中某一点的灯,它发出的光呈锥形。

• 平行光

一种位于无限远处的光,只向一个方向发光。

• 全局光

一个作用于全场景的光,模拟天光的效果。

1.2 灯光参数

• 颜色

控制灯光在场景中照亮的颜色。

• 强度

控制灯光的亮度。

• 距离

控制灯光的照射范围。

• 角度

聚光灯的角度范围大小。

• 衰减

调整聚光灯聚光区/光束的大小。

• 边缘柔和

控制聚光灯边缘的柔和程度。

2、相机参数

image.png

 

▪ FOV

控制相机的视野范围

▪ 近裁剪

相对于摄像机的最近点,引擎从此处开始渲染。在大场景中调大此参数能有效解决相近模型的“Z-Fighting”问题。

▪ 远裁剪

相对于摄像机的最远点,引擎到此处停止渲染场景对象。

▪ 应用

将当前视角应用到此相机。

▪ 设为初始

将选定相机设为项目的初始相机。当场景运行时,会应用此相机的变换属性参数和相机参数。

3、天空盒

场景天空的设置,可在纯色背景、图片背景、全景图三种方式之间切换,仅能使用一种天空盒模式。

image.png

 

▪ 颜色

将场景背景设置成纯色背景,可通过颜色拾取或调整改变背景颜色。

▪ 图片

将场景背景设置成一张2D图像。当场景视角转动时,图片背景是固定不动的。

▪ 全景图

设置一张360的全景图或选择六张拆分的全景图作为场景背景。

4、后处理

通过对屏幕像素的调整以达到更好的画面效果。

image.png

 

4.1 LUT

• LUT文件

通过Photoshop输出颜色查找表的文件(.CUBE),对场景画面进行调色处理。强度参数可以调整LUT的应用权重值。

• LUT制作方式

截取Web编辑器的场景画面。

image.png

 

Photoshop打开。注意:此时打开的图一定要是背景图层

image.png

 

颜色调整工具调整画面。

image.png

 

选择调整图层导出为颜色查找表格式。

image.png

 

保存文件。注意:不要用中文或特殊字符命名。

image.png

 

在编辑器中加载保存的LUT文件。

image.png

 

至此,LUT文件制作完成,可以看到此时Web编辑器里面看到的画面和我们在Photoshop中调整的画面一致。

4.2 全屏特效

• 全屏泛光

场景辉光效果,可以使用泛光来区分高强度或强光的元素。

阈值:产生泛光像素的临界值,数值越大,场景越不容易产生泛光效果。

范围:泛光溢出像素的范围。

强度:发光的强度。

• 轮廓线沟边

场景基于像素边缘检测的轮廓描边效果,可以模拟素描画风格。

• FXAA抗锯齿

快速近似抗锯齿方法,当开启全屏特效后,开启FXAA抗锯齿可以有效解决场景模型边缘锯齿问题。

• 电视雪花

在场景画面添加一个老电视雪花噪点效果。

5、反射贴图

反射贴图管理器,可创建多个用于材质属性反射贴图选择。系统默认反射贴图为天空盒贴图,通过“+/-”按钮新增或移除场景反射贴图数量;点击贴图按钮,在本地添加鱼眼图或六张图作为反射贴图。

image.png

 

6、雾效

场景默认为不开启雾效效果。开启雾效效果后,可以通过雾效颜色和雾效浓度参数调整场景雾气的颜色和浓度。

image.png

 

7CSM阴影

实时的级联阴影,仅在场景有实时光平行光并投射实时阴影时,CSM阴影才有效。

image.png

 

8、展板列表

统计场景中设为展板的模型信息,可通过模型名称选择展板模型移除其展板属性。

image.png