WebGL及Threejs学习介绍

举报
前进的蜗牛 发表于 2024/02/05 09:00:59 2024/02/05
【摘要】 一、学习背景及实现的效果        这十年来Web得到了飞速的发展,随着WebGL的普及,网页的表现能力越来越强大,网页上已经可以开始做出很多复杂的动画、精美的效果;还能通过WebGL在网页中绘制高性能的3d图形。随着浏览器的性能和网络、带宽的大幅度提升,以及WebGL的实现,使得3d的技术不再是桌面程序的专利,越来越多的外部应用使用了3d技术。        那比如说对于网站而言,We...

一、学习背景及实现的效果
        这十年来Web得到了飞速的发展,随着WebGL的普及,网页的表现能力越来越强大,网页上已经可以开始做出很多复杂的动画、精美的效果;还能通过WebGL在网页中绘制高性能的3d图形。随着浏览器的性能和网络、带宽的大幅度提升,以及WebGL的实现,使得3d的技术不再是桌面程序的专利,越来越多的外部应用使用了3d技术。

        那比如说对于网站而言,Web3d技术的应用实现了企业网站的三维呈现,让企业形象更加直观,更立体的展现给客户,打破传统平面展示的模式。

        目前政府有大量的新基建的项目,如数字孪生、智慧城市、智慧园区、智慧工厂、智慧消防等等,都涉及到了3d的可视化技术。

二、专栏学习步骤
        本专栏主要讲如何系统的学好Web 3D 可视化技术。threejs 是一个让用户通过javascript入手,进入搭建webgl项目的类库。

        学习webgl 需要图形学的知识,而webgl需要通过学习js和glsl两种语言,如果我们不通过threejs直接使用webgl的话,则需要从底层写起来,需要全面的了解着色器的语法,自己需要去编写定点着色等。使用threejs可以快捷的逃过难懂的底层,特别是对于传统的前端及js的从业开发人员来说,直接挑战shader有难度。

学习threejs主要包括以下几点:

1、掌握threejs的基本概念:什么是点、线、面,什么是几何体,什么是材质物体场景相机渲染器,动画和控制器这些基础的概念;

2、搭建一个最基础的场景和3d的物体来进行一个显示

3、调试3d代码,深入上述 的基础概念,通过官网的文档去了解各个属性和概念

4、进行3d效果的渲染效果更加逼真,详细了解什么是pbr(基于物理的光照原理的渲染),需要掌握什么是环境贴图、凹凸贴图、置换贴图,什么是放射光等

5、场景交互,比如选中物体进行移动,主要学习如何掌握物理引擎让物体有真实的物理效果,比如像重力、反弹、摩擦力等物体的相互作用。

6、最后进入webgl的魔力世界,掌握着色技术语言控制,用gpu的方式进行渲染。掌握threejs怎么用底层去封装的webgl。学会webgl使用着色器等。了解整个图形渲染的原理去绘制物体场景。

7、整个场景进行后期的加工,比如打造诡异画面、陈旧感的画面、水底画面等效果。

8、案例学习,比如如何获取建筑数据、生成建筑框架形成逼真的数字城市效果

9、学习blender建模技术,对提供的建筑模型进行压缩、优化等,利用blender制作各种各样的动画效果

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。