腾讯Web前端大会 WebGL&Three.js(MR_LP)

时间:2021-09-24 12:48:38

腾讯Web前端大会 WebGL&Three.js(MR_LP)

1.前言

本次大会下午场我主要在分会场1 : Web 前沿技术 听各位大牛的分享。

本文主要是来跟大家分享一下听到的关于前端实现 Web AR/VR 的一些信息。

声明:

本文是由 *(MR_LP)全程手打,请勿转载,违者必究!

本文首发自 微信公众平台(李晓鹏:MR_LIXP),如果可以请关注我一下。

本文中若引用内容发生了侵权,请及时联系作者删除。


鉴于本人某些知识水平有限,如果在文章中出现某些错误,请不要激动,留言给我就好。
本文中有很多内容是自己根据自己的理解去跟大家分享的,所以保留不同观点,可以留言给我。



2.基础信息

分享人:

  • BruceWan ( 万波 )腾讯 前端高级工程师

主要分享内容:

  • 虚拟现实(VR)和增强现实(AR)是近年来出现的高新技术。它通过电脑技术,将虚拟的信息应用到真实世界。此次分享BruceWan将由浅入深介绍WebGL,并以three.js为主介绍相关类库和原理,以及3D互动、WebVR、WebAR的实际项目应用。


分享内容记录笔记如下:


腾讯Web前端大会 WebGL&Three.js(MR_LP)

3.分享流程

自我介绍

首先是作者对自己的基础介绍,例如之前是做什么的,从13年开始自学 Three.js 等内容。

腾讯Web前端大会 WebGL&Three.js(MR_LP)

导言

在开始之前,万波首先跟我们说明了一个概念。

WebGL != 3D

  • 还可以做2D

  • 实现3D 的方式有很多种,并不局限于此

  • 实际:JS API => Opengi ES => GPU 编程

WebGL 能做什么?

我们能实现什么?

  • 逼真的 3D 效果

    • 产品展示

    • 品牌及营销网站

    • 应用

    • 衣服搭配

    • 视频装修

  • 沉浸式网站体验

    • 游戏

    • VR/AR

      开发的时机成熟了么?

  • 开发成本?

    • 大约为 2D 网站的 2 倍 左右

    • 成本不会太高

      性能如何呢?

  • 移动端

    • 需要降低画质
      FPS 35
      阴影
      灯光 5
      模型面数:2W
      测试设备:一般手机

  • PC 端

    • 十分优异
      FPS:60+
      阴影
      灯光 5
      模板面数:10W

  • 各大网站对3D 的 支持程度

    • 3月数据
      桌面:81.2%
      移动:74.7%

那我们该做什么呢?

  • 学习三维需要什么?

    • Web GL 绘图 API

      线

  • 有哪些框架可用?

    • Three.js
      全面3D 框架

    • Babylon.js
      微软员工开发3D 引擎

    • PlayCanvas

  • 实际的实现流程是怎么样?

    • 3DMAX 制作物体原型

    • 修正物体材质参数

    • 总结:
      创建场景
      添加灯光
      添加物体
      赋予材质
      渲染设置
      渲染

    • 使用Three.js该怎么做呢?

    • 创建场景

    • 配置场景
      相机
      灯光

    • 创建模型

    • 渲染

    • 场景
      3D 空间容器

    • 灯光
      光线照射

    • 材质
      物体特质、质点

        几何体
      分段、半径等内容
      网格
      几何表面、有 Face 构成

      一个个很小的三角形
      顶点
      构成三角形的点
    • 相机
      观察者视角

    • 了解3D 场景概念

    • 3D 软件制作流程

腾讯Web前端大会 WebGL&Three.js(MR_LP)


使用 WebGL 以及 Three.js 能做什么?

  • 从3D 软件模型中导出已有的模型

  • 创建基本几何体

    • 基本几何体
      由 CUP 构建,比较耗性能

    • 变形几何体

  • 模拟各种材质

    • 内置材质

    • 材质参数
      颜色
      漫反射贴图
      凹凸贴图
      环境贴图
      自发光
      蒙皮-权重影响定点位置

  • 灯光

    • 灯光类型
      点光源
      聚光灯
      直射光
      环境光

  • 粒子效果

  • 动画

    • 基于 Mesh 的动画
      位置
      角度
      缩放

    • 基于 Vertex 的动画
      修改定点位置
      粒子动画

    • 软件导出动画

    • 基于 Material 动画
      透明度
      贴图 UV
      颜色值

    • 着色器动画

腾讯Web前端大会 WebGL&Three.js(MR_LP)


Three.js 到底做了什么?

  • 工作原理是什么样?

    • 顶点坐标
      传入顶点着色器
      图元装配

        顶点坐标 => 传入顶点 => 顶点着色器 => 图元装配
      图元
    • 光栅化
      生成片元

        片元着色器
      光栅化
      片元
  • Three.js 做了什么?

  • 处理流程

腾讯Web前端大会 WebGL&Three.js(MR_LP)

腾讯Web前端大会 WebGL&Three.js(MR_LP)


我们需要储备哪些知识?

  • 3D 软件

    • 3DSMAX

    • C4D

    • MAYA

    • BIENDER

  • 学习 Three.js

    • 实例

    • 文档

  • 三方库

    • Tween.js

    • cannon.js

  • 学习 WEBGL

  • OPENGL ES

    • shaderForg

    • shaderToy

  • 线性代数/计算机图形