• 版块
  • 最新
  • 标签
皮肤
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • 默认(不使用皮肤)
  • 不使用皮肤
折叠

Orillusion

4

在线

525

用户

151

主题

408

帖子

orillusion入门系列一 | 第一印象

已定时 已固定 已锁定 已移动 中文社区
orillusion引擎engine
8 帖子 6 发布者 974 浏览
    • 从旧到新
    • 从新到旧
    • 最多赞同
回复
  • 在新帖中回复
登录后回复
此主题已被删除。只有拥有主题管理权限的用户可以查看。
  • O 离线
    O 离线
    oldguy
    写于 最后由 oldguy 编辑
    #1

    做了很多年的应用开发想要在技术上有些突破,是时候学点真正的技术了,我选择了3D技术,因为接触3D技术之前我似乎是一只二维生物,只能在一个平面上思考问题,但是3D技术难度不小,所以必须找个足够高的肩膀来踩,那就要借助引擎的力量了。经过一番搜索,orillusion 着实让我感动,满足了我所有的要求,并且国产引擎能提供全面的中文资料支持和更小的交流成本。

    为什么选择 orillusion

    没有专业的对比,仅凭我个人的好恶盲目来选择,简单从这两个方面来考虑

    Native or Web?

    如果您是专业人士建议详细对比两种类型的发展历史和原理再做出判断,对于我一个3D新手来说,有一个简单粗暴的判断思路,那就是在应用系统上,CS架构仍在某些特定领域仍然存在,但是能够迁移到BS的,几乎都在大规模的迁移到了BS架构上,所以我挺Web渲染架构。

    足够新

    新人就要有新人的觉悟,老牌的各路引擎已经有无数高手浸淫其中多年了,冒然投入进去会被沉重的历史信息淹没,作技术还是要有点野心的新手终有一天会成老鸟,所以要选择最新推出的面向最新技术架构的引擎,那么有多新呢,标准还没正式应用的够新吧,那就是以面向WebGPU为第一图形标准实现功能,至于WebGPU是什么,我的理解是更新、更快、更强,至于具体如何做到,相信以后我们会知道的。

    准备工作

    唯一必须的的准备工作是做好心理建设,不要想一口吃成个胖子,不要过早深究原理,我们的目标是借助引擎的能力来实现3D效果,除此以外还有两件小事需要留意。

    开发环境

    理论可以不借助任何第三方库运行orillusion框架,所以我们先体验一下最简化的版本。
    但是随着功能的增多,推荐node+vite+vue这套工具链,当然可以用其它任何熟悉的开发工具完全可以,所以建议请安装好nodejs,并配置好环境变量,同时假设vue3已经可以正常使用。这里我使用vite作为项目创建工具,使用vscode做编辑器,没有其它的前置条件,轻装上阵。如果这一步有什么疑问,请自行查找资料,相信聪明的你不会被难住。

    运行环境

    由于WebGPU标准并未正式推出,需要使用开发浏览器,这里推荐 chrome canary ,下载后在在canary中运行效果,由于canary仍然在变动中,需要在地址栏中输入 chrome://flags/#enable-unsafe-webgpu,然后开启 Unsafe WebGPU 选项。

    c7ae164b-15fd-46fe-b723-41491446e63c-image.png
    如果无法开启或者没有效果,需要搜索最新的开启方法,相信不久的将来在正式版就可以附带WebGPU支持了,不需要这么繁琐了。
    同时为了做两手准备,也可以考虑用 Edge Canary 来应个急,下载后正常安装,启动后在地址栏中输入edge://flags/#enable-unsafe-webgpu,开启WebGPU支持。
    在浏览器正式版本支持WebGPU之前,关于浏览器的支持情况会经常变化,如果不能正确访问,建议多寻找一下当下的信息。

    chrome最新版 113 已经正式支持 WebGPU 特性,可以直接使用了,终于可以告别混乱的史前时代了。

    Hello3D

    参照官方文档,使用CDN直接引用Orullision引擎库是最简单的方式,为了做最简单的体验不引用任何第三方。创建一个html文件,使用任何一款支持资源加载的服务软件都可以直接运行。比如nginx、tomcat、live Server等。

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Hello Orillusion</title>
        <script src="https://cdn.orillusion.com/orillusion.umd.js"></script>
    </head>
    
    <body>
        <script type="importmap">
        {
            "imports": {
            "@orillusion/core": "https://cdn.orillusion.com/orillusion.es.js"
            }
        }
        </script>
        <script type="module">
            import { Engine3D, Camera3D, Object3D, Scene3D, HoverCameraController, MeshRenderer, BoxGeometry, LitMaterial, View3D } from "@orillusion/core"
    
            // 初始化引擎
            await Engine3D.init();
    
            // 创建场景对象
            let scene = new Scene3D();
    
            //创建相机对象
            let cameraObj = new Object3D();
    
            //创建相机组件
            let camera = cameraObj.addComponent(Camera3D);
            // 设置相机类型
            camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
    
            //创建控制器
            let controller = cameraObj.addComponent(HoverCameraController);
            controller.setCamera(20, -20, 25);
            // 添加相机对象至场景
            scene.addChild(cameraObj);
    
            // 创建一个实体对象
            let boxObj = new Object3D();
            // 创建渲染组件
            let mr = boxObj.addComponent(MeshRenderer);
            // 创建几何体,并添加至网格
            mr.geometry = new BoxGeometry(5, 5, 5);
            // 创建一个物理材质并添加至
            mr.material = new LitMaterial();
            // 将实体对象添加到场景
            scene.addChild(boxObj);
            // 创建View3D对象
            let view = new View3D();
            // 指定渲染的场景
            view.scene = scene;
            // 指定使用的相机
            view.camera = camera;
            // 开始渲染
            Engine3D.startRenderView(view);
    
        </script>
    </body>
    
    </html>
    

    运行后可以在浏览器直接查看效果,如果出现问题请查看控制台日志,比较容易出错的是WebGPU支持问题,请注意查看准备工作部分。
    第一个demo力求简单化,所以显示效果会看起来比较单调,在一个白色的场景下一个黑色的立方体,用鼠标可以调整视角。在后续的示例中可以不断的完善丰富示例效果。

    创建项目

    以一个用户数比较多的vue3作为示例(当然用react或完全不用框架完全可行),使用从头开始搭建一个Orillusion项目。
    这里我们先创建一个普通的vue3项目,再将引擎引入项目,操练起来吧,很快就能看到我们在做什么了。

    1. 创建根目录
      a. 选择一个文件夹,创建orillusion目录
      b. 进入orillusion,并在该目录下打开命令提示行
    2. 创建项目
      a. 执行命令 npm create vite@latest
      b. Project name 下输入 hello3d 作为项目名并回车
      c. 使用键盘方向键选择 vue 作为框架,并回车
      d. 仍然使用键盘方向键选择 vue-ts 作为项目类型,并回车,已经创建了 hello3d 项目目录结构
      e. 输入 cd hello3d 进入项目目录
      f. 输入 npm install 安装依赖包,至此,基本的vue3项目已经创建完成
    3. 安装 orillusion
      a. 输入 npm install @orillusion/core --save 安装 orillusion 开发包(如果安装失败,请注意分辨网络原因或安装权限)
      b. 输入 npm run dev ,可以看到在5173端口启动了服务
      c. 打开 canary 浏览器,输入完整地址可以看到显示了vue3的欢迎页,至此项目已经安装完成,后面进行开发。

    编写代码

    1. 在 vscode 中打开 hello3d 目录
    2. 在 src 目录下新建目录 demo
    3. 在 demo 目录下创建文件 hello.ts
    import { Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, LitMaterial, BoxGeometry, MeshRenderer, DirectLight, HoverCameraController, Color, Vector3 }
        from "@orillusion/core";
    
    export default class Hello {
        async run() {
            console.log('hello 3d');
            // 初始化引擎
            await Engine3D.init();
            // 创建一个场景
            let scene3D: Scene3D = new Scene3D();
            // 创建一个相机
            let cameraObj: Object3D = new Object3D();
            let camera = cameraObj.addComponent(Camera3D);
            // 设置相机类型
            camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
            // 设置相机控制器
            let controller = cameraObj.addComponent(HoverCameraController);
            controller.setCamera(20, -20, 25);
            // 添加相机至场景
            scene3D.addChild(cameraObj);
            // 创建一个对象
            const obj: Object3D = new Object3D();
            // 创建渲染组件
            let mr: MeshRenderer = obj.addComponent(MeshRenderer);
            // 设置形状
            mr.geometry = new BoxGeometry(5, 5, 5);
            // 设置材质
            mr.material = new LitMaterial();
            // 添加到场景
            scene3D.addChild(obj);
            
            let view = new View3D();
            // 指定渲染的场景
            view.scene = scene3D;
            // 指定使用的相机
            view.camera = camera;
            // 开始渲染
            Engine3D.startRenderView(view);
        }
    }
    
    
    1. 修改App.vue文件
    <template>
    
    </template>
    
    <script lang="ts" setup>
      import { onMounted } from 'vue';
      import Hello from './demo/hello';
      onMounted(()=>{
        new Hello().run();
      })
    </script>
    
    <style scoped>
    </style>
    
    
    

    可以看到核心代码和cdn引入方式基本相同,这里请允许有一些冗余的存在,以便对与我一样的小白更友好一些。

    完成项目

    可以看到,创建完一个项目后,只添加了hello.ts文件和修改了App.vue。这样一个真正的3D项目开发完成了,再在浏览器里面看一下运行效果(不要忘记在chrome 113 以上版本)。

    c9efd537-d519-42ab-ad99-f34be44ec793-image.png

    你得到了一个可以用鼠标操作的立方体,按住左键拖拽可以任意旋转,滑动滚动可以调整距离,按住右键拖拽可以快速调整立方体位置,可以多操作一下熟悉一下这种最常见的操作方式。
    回忆我刚运行这一步时还是有点激动的,终于迈进了3D技术的大门,尽管是借用了引擎的助力,不过我们程序员就要擅长找到适合自己的工具。

    代码解析

    作为3D小白,我的目标是始于orillusion但不会止于某一引擎,通过充分熟悉一个引擎的用法来积累3D知识。可以看到每一个类都对应着3D世界的基础概念,在这里做一个简单的对应,顺便看看一个3D世界由哪些部分组成的,当然这里只有一个基础印象即可,不必深究。

    • 立方体:我们看到的立方体,是一个基础几何体,由类BoxGeometry来创建,实例化这个类在构造函数中指定长 宽 高,引擎就会为我们绘制出一个立方体,就像我们看到的这样。
    • 相机:相机是一个比较抽象但是在3D中无处不在,可以理解成我们的眼睛,我们是通过相机来观察3D内景物的,比如前面的立方体要在相机的可视范围内我们才能看到,在这里用组件Camera3D来定义。
    • 场景:是一个容器,前面的立方体、相机等等还有其它的对象、组件都是要添加到场景内才能被引擎组织和使用的,我们创建一个3D程序必须有一个场景,我们可以通过Scene3D类创建场景

    这里只介绍了三个最基础的组成部分,几何体、相机、场景,这三个部分在每一个3D程序中都是最基础的不可少的,以后我们会逐渐深入了解他们,也将会慢慢知道更多的工具。

    小结

    这篇文章是个开篇,快速上手了一个入门级别的3D示例,主要的作用并不是学习3D的基本技能,可以说更重要的是消除疑惑,最简单的上手3D项目。不得不说orillusion没有让我失望,以我目前这么简单的诉求也不会让我失望吧。

    作为3D新手,后续会不断的记录学习过程,期待与你一起学习一起飞!

    1 条回复 最后回复
    4
  • shuangliuS 离线
    shuangliuS 离线
    shuangliu
    写于 最后由 shuangliu 编辑
    #2

    目前 @orillusion/core 还在内测中,正在完善文档教程,无法直接使用 npm 安装,请再等待一段时间,即将跟大家见面

    1 条回复 最后回复
    0
  • A 离线
    A 离线
    as3324
    写于 最后由 编辑
    #3

    没有贴出app.vue的代码

    1 条回复 最后回复
    0
  • A 离线
    A 离线
    as3324
    写于 最后由 编辑
    #4

    这demo太卡了,我机器性能不算差,运行个demo cpu就将近100%

    1 条回复 最后回复
    0
  • wwwwwwwwwyW 离线
    wwwwwwwwwyW 离线
    wwwwwwwwwy
    写于 最后由 编辑
    #5

    App.vue 内容如下:

    <script setup lang="ts">
    import hello from "./hello";
    
    new hello().run()
    </script>
    
    
    1 条回复 最后回复
    0
  • 猪 离线
    猪 离线
    猪子
    写于 最后由 编辑
    #6

    感谢大佬,我是新手

    1 条回复 最后回复
    0
  • T 离线
    T 离线
    Temurayl
    写于 最后由 编辑
    #7

    本地如何不用127.0.0.1的路径去访问模型页面呢?打包放到服务器上,然后用线上地址访问,控制台输出Your browser is not support webgpu!

    shuangliuS 1 条回复 最后回复
    0
  • shuangliuS 离线
    shuangliuS 离线
    shuangliu
    在 中回复了 Temurayl 最后由 编辑
    #8

    @Temurayl 如果不是localhost,chrome 默认限制webgpu 必须使用 https 的域名状态下才可以开启

    1 条回复 最后回复
    0

Copyright © 2023 Orillusion | Contact US

  • 登录

  • 没有帐号? 注册

  • 登录或注册以进行搜索。
  • 第一个帖子
    最后一个帖子
0
  • 版块
  • 最新
  • 标签
  • 登录

  • 没有帐号? 注册

  • 登录或注册以进行搜索。