Write the Code. Change the World.

5月 17

初步了解了下 web3d 相关的信息。 three.js 或 babylon.js 要学一个(它们会封装 WebGL 和 WebGPU 的Api)。然后 blender 也要学一下。如果做虚拟城市这块的建模,building tools 这个插件很多人在用。那就用吧。

下载地址

https://ranjian0.github.io/building_tools/

下载好后,打开 blender ,点击菜单栏的编辑,再点插件,再添加,把这个插件添加进去。

5月 17

随着社会的发展,技术的发展,市场的发展,平面展示已不能满足需要了。商品可以 3D 化,道路建筑可以 3D 化。而 web 又是最通用的一种承载形式,web3D 的的必要性就突出来了。其实,很早就有了。我是萌新,可不能不去了解,甚至学习。

WebGL

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API

WebGL(Web 图形库)是一个 JavaScript API,可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形,而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点,该 API 可以在 HTML5 canvas 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

目前支持 WebGL 的浏览器有:Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ 和 Microsoft Edge build 10240+;然而,WebGL 一些特性也需要用户的硬件设备支持。

WebGL 2 API 引入了对大部分的 OpenGL ES 3.0 功能集的支持; 它是通过WebGL2RenderingContext界面提供的。

WebGL 是基于 OpenGL 演进的。

WebGPU

https://developer.mozilla.org/zh-CN/docs/Web/API/WebGPU_API

WebGPU 是 WebGL 的继任者,为现代 GPU 提供更好的兼容、支持更通用的 GPU 计算、更快的操作以及能够访问到更高级的 GPU 特性。

web3D 渲染

web3D应用 -> 引擎 -> web端图形API -> 本地端图形 API -> 显卡

WebGL 和 WebGPU 在这个环节中,本地图形 API 是不一样的。 WebGL 使用的是 OpenGL 或 DirectX。WebGPU 使用的是 Direct3D 或 Metal 或 Vulkan。

对于用户,只会关心所看到的 3D 效果。对于实现者,要了解知道渲染的流程还有熟悉 web 端图形 API 的使用。直接使用 WebGL API 或 WebGPU API 是能够实现 3D 效果。但会有第三方工具,比如 three.js 和 babylon.js 。它们会对 API 进行封装转换,可以省很多很多事。

blender 也是工具。
https://www.blender.org/
https://zhuanlan.zhihu.com/p/59575701
https://www.bilibili.com/video/BV13M41137Ki/?p=2&spm_id_from=pageDriver&vd_source=6993ce0cd88c9947ac7681b6864a99d0

相关文章

https://zhuanlan.zhihu.com/p/369632693

https://juejin.cn/post/6966584226758000648

https://juejin.cn/post/7184099035018428472

https://juejin.cn/post/7053137406463049742