微软上线Babylon.js 8.0:打造更真实阴影与照明效果

yumo6662个月前 (08-03)技术文章14

IT之家 3 月 28 日消息,继上周发布 DirectX Ray Tracing(DXR)1.2 后,微软最新推出开源 3D 引擎 Babylon.js 8.0。

该版本历经一年开发,新增基于图像的照明阴影(IBL Shadows)、区域光源(Area Lights)等功能,并优化渲染管线控制,同时兼容 WebGPU。

IT之家注:Babylon.js 是一个基于 JavaScript 的开源 3D 渲染引擎,专为网页浏览器设计,支持通过 HTML5 实现实时 3D 图形渲染。

本次更新主要通过照明阴影(IBL Shadows)和区域光源(Area Lights),打造更真实的阴影与照明效果。

通过 IBL Shadows 技术,3D 物体现在可投射逼真阴影(如演示视频中的奖杯阴影),适用于建筑、游戏场景渲染;而 Area Lights 技术允许 2D 形状(如矩形、圆形)作为光源,提升动态光照效果,满足游戏开发者高频需求。

本次更新引入 Alpha 版 Node Render Graph,支持自由定制渲染管线,开发者无需编写底层代码,即可自定义渲染流程,灵活调整画面输出。

新版重点改善了性能和兼容性,改善轻量级查看器,体积更小,可动态加载依赖项,适配任意网页;优化查看器配置工具,可通过简单 HTML 属性设置,快速匹配网站风格。

新版原生支持 WebGPU,核心着色器全面迁移至 GLSL / WGSL,移除转换层,运行效率翻倍,并支持自定义 WGSL 着色器。

相关文章

前端切图css高级阴影用法drop-shadow

切图网专注于html5前端切图开发,下面给大家介绍一下前端切图css高级阴影用法drop-shadow,主要是在最近项目切图中遇到的,通常我们了解的css的阴影写法就是shadow,但是它不能解决非规...

css 设置盒子阴影,阴影和背景图保持一致

预览图首先查看预览图:原理采用了 background 属性 background: inherit;inherit 关键字使得元素获取其父元素的计算值。它可以应用于任何 CSS 属性,包括 CSS...

Css3中text-shadow属性使用方法及各参数所代表的含义

在CSS3中我们可以使用text-shadow属性给页面上的文字添加阴影效果,text-shadow在CSS2.1的时候曾被删除过的一个属性,但是又在css3.0中恢复了使用。①text-shadow...

10条影响CSS渲染速度的写法与建议

1、*{} #zishu *{} 尽量避开由于不同浏览器对HTML标签的解释有差异,所以最终的网页效果在不同的浏览器中可能是不一样的,为了消除这方面的风险,设计者通常会在CSS的一个始就把所有标签的默...

CSS3新增(1)(css3新增了哪些特性)

圆角边框:在CSS3中,新增了圆角边框样式,这样我们的盒子就可以变圆角了border-radius属性用于设置元素的外边框圆角。语法:border-radius: length;盒子阴影:CSS3中新...