webgl-ray-tracer - GitLite

KO | EN

gitlite — search

#python #react #ai #android #machine-learning #rust #deep-learning #linux #java #windows #kubernetes #awesome-list #pytorch #openai

webgl-ray-tracer

(★ 103)

An interactive ray-tracer written for the browser using WebGL

파일 탐색기

최종 버전 다운로드 (.zip)

- - ci.yml
- pre-commit
- launch.json
- settings.json
- canvas-fs.glsl
- canvas-vs.glsl
- favicon.ico
- sample-fs.glsl
- sample-vs.glsl
- suzanne.mtl
- suzanne.obj
- shot1.png
- shot2.png
- shot3.png
- shot4.png
- - appInfo.module.scss
  - appInfo.tsx
  - canvas.tsx
  - forms.module.scss
  - forms.tsx
  - progress.module.scss
  - progress.tsx
  - renderingParams.module.scss
  - renderingParams.tsx
  - renderingStatus.module.scss
  - renderingStatus.tsx
  - storeProvider.tsx
- - globals.css
- - canvasVars.ts
  - mtlFileParser.d.ts
  - objFileParser.d.ts
- index.tsx
- vite-env.d.ts
.gitignore
.prettierignore
CLAUDE.md
eslint.config.mjs
index.html
LICENSE
package-lock.json
package.json
prettier.config.mjs
README.md
tsconfig.json
tsconfig.node.json
vite.config.ts

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/kamyy/webgl-ray-tracer

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd webgl-ray-tracer

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm start

개발/실행 서버를 켭니다.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# WebGL Ray Tracer

## Hardware and Browser Compatibility

You can view this app live at [https://webgl-ray-tracer.orky.net](https://webgl-ray-tracer.orky.net). Warning! It does require a reasonably powerful GPU (e.g. an Nvidia Geforce 1080) and a browser that supports WebGL 2. It's been tested on Chrome, Firefox and Safari. Development took place entirely on Linux but the app has been tested on Windows and MacOS as well.

## Game Developers Conference

I attended a talk given by Eric Haines at GDC 2019 titled 'A Fast Forward Through [Ray Tracing Gems](http://www.realtimerendering.com/raytracinggems)'. Real-time ray tracing was a hot topic at GDC 2019 and Peter Shirley's series of tutorials with regards to [writing a ray tracer in just one weekend](http://in1weekend.blogspot.com/2016/01/ray-tracing-in-one-weekend.html) was mentioned in passing. Very much inspired by what I'd read in those tutorials, I started working on this project in my spare time to see if I could write a ray tracer for the World Wide Web. Ideally, I wanted to utilize the awesome compute power of the GPU via a fragment shader, which fits the task of tracing rays in parallel almost perfectly.

![shot1](https://raw.githubusercontent.com/kamyy/webgl-ray-tracer/main/screenshots/shot1.png)

![shot2](https://raw.githubusercontent.com/kamyy/webgl-ray-tracer/main/screenshots/shot2.png)

At the end of the day I ended up with what's called a path tracer. It requires a large quantity of rays to be fired through each pixel in a stochastic manner for convergence thus removing noise from the rendered image. It's a brute force technique and you pay for it in terms of time and compute power but it does produce incredibly accurate visuals like soft shadows, ambient occlusion and blurred reflections. These effects are difficult to achieve using a real-time 3D rasterizer but here you essentially get them for free with little to no rendering tricks involved.

## Technical Details

This project started in 2019 and has under gone several updates over the years mainly to keep it current with the latest node/react packages.

This app makes use of several features that were introduced in WebGL 2 including:

- Removal of loop restrictions (very important).
- Use of new texture formats to hold random seed, mesh, material and BVH data.
- Texture arrays to store multiple BVH trees.
- Direct texel lookup using texelFetch.

![shot3](https://raw.githubusercontent.com/kamyy/webgl-ray-tracer/main/screenshots/shot3.png)

The Javascript portion of the app reads Wavefront OBJ and MTL files, creates one or more BVH trees before pushing all this data on to the GPU. It's other purpose is to handle user input and user interaction with the camera.

The sample-fs.glsl fragment shader is the heart of the program. It handles:

- Pseudo random number generation.
- Bounding volume hierarchy traversal.
- Ray to AABB intersection testing.
- Ray to triangle intersection testing.
- Barycentric coordinates.
- Recursion (via looping).

![shot4](https://raw.githubusercontent.com/kamyy/webgl-ray-tracer/main/screenshots/shot4.png)

The fragment shader is used to progressively build the final image via multiple rendering passes. It's done this way so the browser doesn't kill the program thinking it's gone rogue, which would happen if the shader took too long to finish. A nice bonus is it also allows a decent level of real-time interaction to be programmed in.

Enjoy!

Kam.