大家好，我是马建仓。

要说最近这半年什么词比较火，相信 Web 3.0 是许多关注前沿技术的开发者们耳熟能详的。

那什么是 Web3.0？

《中国金融》在今年 3 月发布的《姚前：Web3.0：渐行渐近的新一代互联网》中曾提到：Web3.0 不止是智能互联网，同时还是立体全息互联网，为用户提供前所未有的交互性以及高度的沉浸感和参与感。

在主流市场看来，Web3.0 很可能就是新一代互联网的雏形。他们认为，新一代互联网不仅能够组合信息，同时也能像人类一样读懂信息，并以类似人类的方式自主学习于知识推理，从而为人类提供准确可靠的信息，从而使得人与互联网的交互更加自动化、智能化及人性化。而这样的场景设想也诞生了时下热议的元宇宙、crypto、NFT、DAO 等新兴概念。

然而，概念落地背后需要技术支撑，怎样的技术才能支撑起这些实现中的奇幻场景，实现高度的真实性与沉浸感呢？

今天，我们给大家推荐一个很可能助力元宇宙实现的 Web3D 引擎关键技术的开源项目—— Oasis engine。

这并非是强加概念，不久前该项目作者之一就曾在沙龙会议上做了个题为：《元宇宙级Web3D引擎关键技术》的分享，参考内容如下：

这究竟是个怎样的宝藏项目？我们今天计划从以下几个方面来介绍。欢迎各位开发者共同讨论。

Oasis engine是什么？

Oasis engine 是一个移动优先的高性能 Web 图形引擎，也是追求易用和轻量的高性能互动创作平台，具备 2D/3D 互动创作能力，目前已经推出到 v0.6版，并已在 Gitee 开源。

项目地址：<gitee.com/unholypanda…> 开源许可证： MIT

或许你不熟悉它，但是它却是支付宝集五福、打年兽、蚂蚁庄园等各种互动业务背后的图形引擎。同时，他的研发团队也大有来头。站在Oasis engine 背后的核心开发者是蚂蚁集团业务能力十足的 RichLab 前端团队。从知乎界面我们能知道，这也是花呗、借呗的前端团队。

从官方公号介绍得知，Oasis Engine 主要包含 Oasis Runtime、Oasis Editor 和 Oasis Store 三部分。该项目采用组件系统架构，不仅需要具备三维渲染能力，还需要包含了非常多来自各领域的功能，比如 2D、3D、UI、音频、物理、VR/AR、逻辑编写等等。

目前主要用于仿真展示、互动营销或者趣味小游戏，编辑器采用云端IDE，协同编写。

为何选择TypeScript？

Oasis 的开发语言是 TypeScript。项目负责人烧鹅曾在媒体采访中这样解释：

他认为对于大型复杂项目，TypeScript 的研发效率优势较 JavaScript 明显。首先对于引擎用户，最大的优势就是拥有代码提示；其次对于引擎开发者，TypeScript 定义了弱类型语言缺失的能力，能够帮助开发者减少引擎的代码量。

功能

Engine 在 Oasis engine 中扮演着总控制器的角色，主要包含了画布、渲染控制和引擎子系统管理等三大功能：

• 画布：主画布相关的操作，如修改画布宽高等。
• 渲染控制： 控制渲染的执行/暂停/继续、垂直同步等功能。
• 引擎子系统管理：场景管理和资源管理等。
• 执行环境的上下文管理：控制 WebGL 等执行环境的上下文管理。

特点

• 组件系统结构清晰、灵活性强、易扩展
• 逻辑化脚本组件，简单易用，复用性强
• 针对移动设备多方面优化
• 具备 2D/3D 互动创作能力
• 支持前端开发工作流

如何安装？

NPM

若是在项目中使用，可通过 NPM 安装 1.安装包

npm install --save oasis-engine
复制代码

2.引入引擎模块

import { WebGLEngine, Camera } from 'oasis-engine'
复制代码

本地创建Demo

使用示例

// Create engine by passing in the HTMLCanvasElement id and adjust canvas size.
const engine = new WebGLEngine("canvas-id");
engine.canvas.resizeByClientSize();

// Get scene and create root entity.
const scene = engine.sceneManager.activeScene;
const rootEntity = scene.createRootEntity("Root");

// Create light.
const lightEntity = rootEntity.createChild("Light");
const directLight = lightEntity.addComponent(DirectLight);
lightEntity.transform.setRotation(-45, -45, 0);
directLight.intensity = 0.4;

// Create camera.
const cameraEntity = rootEntity.createChild("Camera");
cameraEntity.addComponent(Camera);
cameraEntity.transform.setPosition(0, 0, 12);

// Create sphere.
const meshEntity = rootEntity.createChild("Sphere");
const meshRenderer = meshEntity.addComponent(MeshRenderer);
const material = new BlinnPhongMaterial(engine);
meshRenderer.setMaterial(material);
meshRenderer.mesh = PrimitiveMesh.createSphere(engine, 1);

// Run engine.
engine.run();
复制代码

Oasis Editor暂未对外开放

Oasis Editor （目前未对外开放）是一个基于移动优先的高性能图形开源引擎 Oasis Engine 的云端 Web 互动内容创作平台，可以在线完成一个互动项目的创建、编辑、导出。推荐使用 Chrome 浏览器 打开它，因目前该编辑器未对外公开，暂不详细介绍。若感兴趣，可前往作者仓库查看操作指南。

项目架构图