Code Monkey home page Code Monkey logo

webgpu-renderer's Introduction

webgpu-renderer & path-tracing

A simple renderer implemented by WebGPU, includes a builtin path tracing pipeline.

Path tracing demo

demo

Check here: Path tracing demo

You must use the lasted version of Chrome.

Development

First clone this repository, the:

npm i

npm run dev

Then open url http://127.0.0.1:8888 in your chrome canary.

Tutorials

Chinese only now.

  1. 概览介绍:将会对整个项目涉及的知识做一个综述。
  2. WebGPU基础与简单渲染器:通过自己实现的一个简单渲染器来论述WebGPU的能力。
  3. 路径追踪-场景数据组织:针对路径追踪,如何组织场景数据,涉及到PBR材质、glTF、场景合并等。
  4. 路径追踪-管线组织与GBuffer:针对路径追踪,如何组织渲染管线,同时论述GBuffer的生成。
  5. 路径追踪-BVH与射线场景求交插值:如何构建BVH,以及如何在CS中求交。
  6. 路径追踪-BRDF与蒙特卡洛积分:论述如何在路径追踪中运用蒙特卡洛采样实现直接光照和间接光照,以及运用BRDF光照模型。
  7. 路径追踪-降噪与色调映射:如何对充满噪点的图像进行空间和时间的滤波,最后输出如何进行色调映射。
  8. 踩坑与调试心得:对于WebGPU这样一个实验性的API(至少当时),我是如何进行调试的血泪史(主要是CS部分)。

License

Copyright © 2021, 戴天宇, Tianyu Dai (dtysky < [email protected] >). All Rights Reserved. This project is free software and released under the MIT License.

webgpu-renderer's People

Contributors

dtysky avatar quarksb avatar vimgaa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.