首页 > 其他分享 >从0开发WebGPU渲染引擎:开篇

从0开发WebGPU渲染引擎:开篇

时间:2023-07-07 16:22:30浏览次数:52  
标签:开篇 渲染 WebGPU 编辑器 引擎 开发 Web3D

大家好,本系列会从0开始,开发一个基于WebGPU的路径追踪渲染器,使用深度学习降噪、DLSS等AI技术实现实时渲染;并且基于自研的低代码开发平台,让用户可以通过可视化拖拽的方式快速搭建自定义的Web3D引擎

目录

回顾目前的技术积累

我已经在Web3D引擎领域有1万小时开发经验,主要完成了下面的事情:
1.用了4年,全职开发了Wonder:类似于Unity的WebGL引擎和编辑器,发布了v1.1正式版,完成了MVP功能

详细介绍可看:
Wonder 1.0正式版发布-----WebGL 3D引擎和编辑器

2.学习了WebGPU,写了WebGPU的新手教程,熟悉了计算着色器的使用,实现了LBVH算法

详情请见:
WebGPU学习系列目录

后面还作为技术合伙人,拿到了“WebGPU引擎项目”的天使轮千万投资

3.用了大概1年的时间,全职开发了基础的离线路径追踪渲染器,开设了相关的课程(课时长达49小时)

详情请见:
WebGPU+光线追踪Ray Tracing 开发三个月总结
发布了几个版本的代码
离线渲染零基础实战开发培训班

渲染图:
image

4.用了大概1年的时间,全职开发了Meta3D:Web3D低代码开发平台

Meta3D是开源的Web3D低代码平台,致力于建设共享互助开放的Web3D生态,让Web3D引擎和编辑器开发轻而易举

image

Meta3D的用户是Web3D引擎或编辑器的开发者,您使用Meta3D来快速搭建Web3D引擎或编辑器

Meta3D已经发布了内测版本

详情请见:
Meta3D官网

5.用了大概1年半的时间,学习了深度学习,开发了一个深度学习框架、开办了深度学习基础班培训课程,并且已经实现了深度学习降噪、DLSS等Demo

详情请见:
我开发的深度学习框架
深度学习基础课系列目录
深度学习降噪专题课
实时渲染前沿研究:在浏览器上实现了Facebook提出的DLSS算法

6.用了3个月,全职完成了《3D编程模式》这本开源书

本书提出了3D引擎和编辑器相关的7个编程模式,详情请见:
我写了本开源书:《3D编程模式》

为什么要从0开发WebGPU渲染引擎?

开发Wonder v1.2版本时暂停了开发,原因是发现有两个问题难以解决:
(1)没有实现全局光照,只有局部光照
因为使用的是WebGL,性能不行,没有计算着色器,所以难以实现高性能的全局光照算法
(2)用户不能扩展编辑器
因为编辑器的UI是React写的,所以不方便由用户扩展

因此,本系列开发的引擎将作为Wonder的v3.0版本,彻底解决这个两个问题。
解决方案如下:
(1)对于第一个问题,我们从WebGL改为WebGPU,从光栅化渲染改为路径追踪渲染,从而实现全局光照。
这里不使用光栅化+光追的混合渲染的好处是可以只用一套算法而实现所有的渲染效果,方便实现和管理。
另外,因为使用深度学习辐射亮度缓存、深度学习降噪、DLSS作为后处理,所以只需要1spp和低分辨率的采样,从而实现实时渲染

更多思考请详见:
实时渲染路径追踪概述

(2)对于第二个问题,因为现在我们基于Meta3D来开发引擎和编辑器,用户可以通过组装不同的组件来实现自定义的引擎和编辑器,并且UI改为用IMGUI实现,从而能容易地实现引擎和编辑器的扩展

下一步

实现下面的功能:

  • 基于WebGPU的计算着色器,实现基础的路径追踪器
  • 使用LBVH作为加速结构

标签:开篇,渲染,WebGPU,编辑器,引擎,开发,Web3D
From: https://www.cnblogs.com/chaogex/p/17535307.html

相关文章

  • 3DCAT实时云渲染助力VR虚拟现实迈向成熟
    近年来,虚拟现实(VirtualReality,VR)技术在市场上的应用越来越广泛,虚拟现实已成为一个热门的科技话题。相关数据显示,2019年至2021年,我国虚拟现实市场规模不断扩大,从2019年的282.8亿元增长至2021年的583.9亿元,市场规模实现翻番。预计未来3年将保持快速增长,到2023年将突破1000亿元大......
  • poi-tl 将html代码渲染到word中
    引入依赖<dependency><groupId>org.jsoup</groupId><artifactId>jsoup</artifactId><version>1.15.3</version></dependency><dependency><groupId>io.github.draco1023</groupId>......
  • vue渲染原理简单实现
    实现功能:1.渲染系统:·功能一:h函数,用于创建并返回一个VNode(虚拟对象);·功能二:mount函数,用于将VNode挂载到节点上;·功能三:patch函数,用于对比两个VNode,决定该如何处理新的VNode;1.新建一个index.html的页面其中有一个id为app的div元素,之后我们写的所有DOM都会挂载到此元素......
  • vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计(每行末尾合计
    HTML部分代码<template> <div>  <el-container>   <el-header>Header</el-header>   <el-main>    <div>     //表格数据在这里::data="tableData"     <el-table      border    ......
  • [GPT] 网页中某些dom内容是通过 js 数据异步渲染的,nodejs 怎么获取网页解析这些数据
     要处理使用JavaScript异步渲染内容的网页,您可以在JavaScript蜘蛛中使用Puppeter或Playwright等无头浏览器来获取网页,然后与动态渲染的内容进行交互。 下面是一个使用Puppeteer的例子:constpuppeteer=require('puppeteer');(async()=>{//Launchaheadles......
  • Java程序性能分析:开篇之jps
    一、前言开发Java项目过程中,难免会碰到一些性能问题,这时候就需要一些工具,帮忙排查本文开篇主要介绍JDK自带的工具jps,获取Java程序列表,以openjdk11.0.10为例二、Java程序列表:jps1.简介用来查找当前用户的Java进程,而不能查找当前系统中其他用户的进程相比Linux......
  • 什么是 CSR、SSR、SSG、ISR - 渲染模式详解
    本文以React、Vue为例,介绍下主流的渲染模式以及在主流框架中如何实现上述的渲染模式。前置知识介绍看渲染模式之前我们先看下几个主流框架所提供的相关能力,了解的可跳到下个章节。挂载组件到DOM节点这是主流框架最基本的能力,就是将组件渲染到指定的DOM节点上。在React......
  • 5.Shading(着色与渲染管线)
    着色(shading)定义作用于一个物体的材质。着色不考虑其他物体的存在,所以着色不考虑阴影。布林冯反射模型Blinn-PhongReflectanceModel最基础的反射模型Specularhighlights(镜面反射)Diffusereflection(漫反射)Ambientlighting(环境照明)定义观测基础信息开展研......
  • 开篇——进制转换
    目录1.1.十进制——>二进制(以一个位数为单位进行分割)1.2.十进制——>八进制(以三个位数为单位进行分割)1.3.十进制——>十六进制(以四个位数为单位进行分割)十进制对任意进制数转换时,将其除以进制类型取余倒序排列。其他进制之间的转换使用“8421”法:1.1.十进制——>二进制(以一个......
  • 开篇:数据驱动UI的设计理念
    在线演示:http://v.youku.com/v_show/id_XNzA0NDc1ODE2.html清晰版视频+代码下载:http://115.com/lb/5lbcfwdfuwis一、概述本演示主要是对WPF一个非常重要的设计理念做一个简单的概述。这个理念就是:数据驱动UI的设计理念。这是我们的开篇,我们先来看一下这个设计理念,然后感受一下它与......