可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
ThreeJS后期处理通道
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
0
点赞
0
评论
收藏
分享
举报
ThreeJS后期处理通道
Terry
关注
已关注
0
0
0
3528
发表于 2020-08-11 18:52:07
outlinepass https://threejs.org/examples/webgl_postprocessing_outline.html Three.js提供了很多后期通道。下面列出了官方文档中的23个通道。 1. AdaptiveToneMappingPass 1. AfterimagePass 1. BloomPass:该通道可以增强场景中明亮的区域,可以模拟辉光。 1. BokehPass 1. ClearPass 1. CubeTexturePass 1. DotScreenPass 1. EffectComposer 1. FilmPass 1. GlitchPass 1. HalftonePass 1. MaskPass 1. OutlinePass:轮廓通道,可以为边缘添加发光效果。 1. RenderPass 1. SAOPass 1. SavePass 1. ShaderPass 1. SMAAPass 1. SSAARenderPass 1. SSAOPass 1. TAARenderPass 1. TexturePass 1. UnrealBloomPass ## []()[]()[]()13.outlinepass outlinepass通道可以为物体(场景中被被添加到通道中的物体)的边缘添加一个发光效果。下面是一些可配置的参数。 ``` edgeStrength: 3.0, //强度 默认3 edgeGlow: 1, 强度 默认1 edgeThickness: 1.0, //边缘浓度 pulsePeriod: 0, 闪烁频率 默认0 值越大频率越低 usePatternTexture: false 使用纹理 visibleEdgeColor #ffffff 边缘可见部分发光颜色 hiddenEdgeColor #190a05 边缘遮挡部分发光颜色 ``` 写了一个[three-outlinepass](https://www.npmjs.com/package/three-outlinepass),方便在npm的项目中使用。 `npm i three-outlinepass` 对于outlinepass这里有个地方不要产生误解,不是所有的物体边缘,也不是添加到通道中所有物体的所有边缘,而是物体渲染后整体的边缘,类似ps中合并图层之后的再添加描边效果一样。对面下面两张图片,不同角度边缘是不一样的。  
点击查看更多
全部评论
登录
|
注册
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
29
获赞
15
评论
8
访问
73262
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接