Web3D/XR 沉浸式交互设计课程

VR/AR技术《头号玩家》

Web3.0时代的到来兴起了许多热词：

元宇宙、万物互联、人工智能、3D图像与未来......

Web3.0，未来的互联网

Web1.0 时代是首页+超链，可以被称之为互联网只读时代

Web2.0 可以允许用户进行内容生产，进入读/写/交互时代

Web3.0 在区块链的支撑下，使互联网上的所有元素资产化，形成所有权，进入了读/写/拥有的时代，即价值互联网

图文来源于网络

简而言之，Web3.0是一个更加以用户为中心，致力于让一切变得更加人性化，透明，安全的互联网

接下来将介绍元宇宙搭建中必不可少的角色——Web3D/XR 技术

Web3D/XR 技术

Web3D技术作为实现网页中虚拟现实的一种最新技术，可以使参观者通过自由操作和沉浸式漫游来友好地交互场景中的物体。Web3D的实现技术，主要分建模技术、显示技术、三维场景中的交互技术三部分

XR 是一个“包罗万象”的术语，包括了AR、VR、MR，是用于增强或取代我们观察世界的能力的技术

MOTSE墨子－”未来感交互数字展厅“

那么，利用Web3D技术可以做什么呢？其实它早已出现在我们的生活中，在艺术相关、商业相关、娱乐相关和虚拟社区等各种区域都与之相关联

艺术相关

哲浩启程文化创意－裸眼3D秀“朱雀展国威“

娱乐相关

Logela Multimedia-《Live Traffic Light》

商业相关

Patrik Hübner-《SHUTDOWN Gallery》

虚拟社区

易现EZXR联合西溪天堂开启最IN最潮流的“如流·游”AR展，这场基于实景的户外AR展览，尝试打破空间和时间的界限玩一把“混搭”，为本就美丽的自然风光增添了科技野趣

易现EZXR－”杭州西溪天堂园区增强现实“

X Vision混合现实艺术小组创作的“虫洞”是在公共空间发生的混合现实艺术事件，艺术家们通过天马行空的创造将未来科技移民之后衰败的火星，以一次“虫洞”的形式时空穿越在北京751这片我们熟知的园区之上

X Vision－”虫洞：北京751·MR公共艺术体验展“

为了能让大家自己也能快速开发一系列通过浏览器在线展示的3D交互艺术作品

现推出我们的第二期新媒体艺术课程——

《Web3D/XR 沉浸式交互设计》

课程简介

《Web3D/XR 沉浸式交互设计》

本课程将介绍一系列基于web 3D的设计工具，用于显示和生成使用 Web 3D 标准在线设计的3D 内容。这些设计工具允许学生创建在线浏览器体验显示在3d 和 WebXR 沉浸式交互设计平台的 AR 和 VR工具。所有引入的技术都是基于浏览器和跨平台的，使用这些技术，学生能够快速开发一系列通过浏览器在线展示的3D交互艺术作品

图片来源于A-frame官网

课程详情

① 课程以线上录播方式播出

② 课程交流群，导师定期回复答疑

③ 不定时免费福利、群活动

④ 课程在两年内无限回放

⑤ 从基础到入门，零基础也适用

⑥ 课程第一节免费试学

免费试学课程链接:

https://www.cctalk.com/v/16580667524052?xh_fshareuid=121147389

A-Frame是此次课程主要使用的工具之一

图片来源于A-frame官网

A-Frame是一个用于构建 VR 体验和 AR 体验的 Web 框架。A-Frame有很强的灵活性和扩展性，它不仅可以在PC上的主流浏览器上运行，也可以在Android和苹果的支持webRTC功能的浏览器上运行，还支持大部分的VR头盔。另外，开源库AR.js提供了A-Frame的版本，让A-Frame框架也支持webAR。A-Frame框架简单易用，而且同时支持webVR和webAR，是最适合作为学习webXR入门的不二选择

A-Frame工具优势

# 一款可视化的检测工具

# 一款有着丰富的组件的工具

#一款以ECS为架构的工具

#一款可以跨平台、高性能的工具

#一款可以简单进行VR制作的工具

图片来源于A-frame官网

详情打开A-Frame官网：https://aframe.io

课程内容

第一节 ► Web3D/Web XR 简介

本节课学习了解 Web3D 的状态和浏览器上可用的工具，包括: aframe.io，glitch.com，threejs.org

▲图片来源于Web3D/XR课程实战内容

第二节 ► A-Frame 导言

本节课将学习用A-Frame如何导入一个基本的3d 模型，并使用glitch在 AR/VR 中显示

▲图片来源于Web3D/XR课程实战内容

第三节 ► A-Frame 渲染360图像

本节课将学习使用360图像，学生将学习如何通过使用A-Frame和Glitch创建一个交互式360图像

▲图片来源于Web3D/XR课程实战内容

第四节 ► A-Frame 场景建设

本节课将学习如何在A-Frame中显示三维场景的各个方面。这些包括场景、背景、天空盒、灯光和声音的元素

▲图片来源于Web3D/XR课程实战内容

第五节► A-Frame 动画和效果

本节课将学习使用 AFRAME 动画的基础知识，如何通过关键帧以编程方式更改值并构造 tweens

▲图片来源于Web3D/XR课程实战内容

第六节 ► A-Frame 3D 资产生成

本节课学生将学习使用开放标准 GLTF 3D 格式的3d 格式的网络交付的最佳实践。他们还将从各种3d 软件包中导出模型和/或使用工具生成3d 文件。模型可以放置到A-Frame中，以便在3d、 AR 或 VR 中查看和演示

▲图片来源于Web3D/XR课程实战内容

第七节 ► 网上数码影像效果简介

本节课将学习如何以编程方式创建附加效果，并为在线数字视频开发连锁效果

▲图片来源于Web3D/XR课程实战内容

第八节► A-Frame 3D 资产、动画和特效

本节课将在A-Frame中补充他们的3d 资产处理知识。他们将学习压缩技术与 GLTF 3D 标准，以及如何结合A-Frame动画与默认模型关键帧动画。最后，他们将学习如何用动画创建场景氛围效果

▲图片来源于Web3D/XR课程实战内容

第九节 ► A-Frame 着色器介绍

本节课将学习一些基础的计算机图形学和渲染使用着色器。他们将被要求创建一个基本的 A-Frame 3D 模型着色器。他们将学习如何使用 shaderfrog 节点编辑器导出着色器

▲图片来源于Web3D/XR课程实战内容

第十节 ► A-Frame AR 位置标记

本节课将学习如何使用A-Frame创建一个基于 GPS 的位置 AR 标记的基础知识。他们将学习如何使用 GPS 定位在世界上放置3d 模型来创建AR体验和艺术作品

▲图片来源于Web3D/XR课程实战内容

导师介绍

达米安-希尔斯博士

达米安-希尔斯博士是一名国际数字媒体开发/创意交互设计者，同时也是一名人机交互学者，对自然用户交互、创意合作和互动叙事系统感兴趣。他曾从事过医药、教育、政府、电影和游戏等广泛行业的项目。他拥有人机交互的博士学位，研究结合自然用户交互和支持连贯叙事生成的协作界面的设计

达米安现在继续研究在线协作的交互设计，协作式互动数字故事/叙事，游戏设计/开发，交互设计，信息可视化，人/机界面，自然用户交互，装置，互动/生成艺术，网络应用程序开发，人工智能，语义网络以及未来设计网络应用技术

且拥有20年的交互设计及软件开发经验主要包括多媒体开发、图形制作、3D游戏开发/设计、网络前端开发（javascriptThreeJS/WebGL、html、css, Angular, React），网络服务器应用（NodeJS, Java, SQL, Python）

曾在美国、澳大利亚等多家研究机构及公司担任技术负责人和创意总监，现在是格里菲斯大学特聘研究员。在2017年'协作叙事的自然界面构建'。这项研究关注的是设计一个用于协作叙事构建的系统，该系统支持与叙事创造力和一致性相关的对话过程。它提出了一套系统的理论设计特征，该系统结合了半自主性和响应用户自然交互的界面，如触摸式或手势式设备。设计的目的是一个整体的软件架构，或者说是一个能够主动参与有意义的社区叙事的出现的架构

课程目标