Skip to content

caboyd/ts-raytracer

Repository files navigation

Typescript Webgl2 Raytracer

Implementation of a Raytracter in Typescript using webgl2.
Following Ray Tracing in One Weekend book.
Implements Lambertian Diffuse, Metals, and Dielectrics.
Camera for zooming around the scene.
UI overlay using imgui-js

Use Chrome or Firefox. GPU recommended.
Click in window and drag to look around. WASD to move camera.

Demo Screenshot.
Typescript Webgl2 Raytracer demo image

3200 x 2400 image with 850 render passes.
Ray Tracer image

Full Resolution Imgur Link

Getting Started

These instructions will get you a copy of the project up and running on your local machine.

Prerequisites

installations of node and npm

Installing

Download repository locally

install node modules

npm install

Run development environment

npm run dev

Deployment

Github pages

https://gist.github.com/cobyism/4730490#gistcomment-2375522

Pre-Setup

Make sure there is a gh-pages branch in the repository. If not then create an empty one. Commit and push anything in master branch because it will be deleted locally

git checkout --orphan gh-pages
git rm --cached -r .

Delete all of the files then commit an empty branch

git commit -m "First commit" --allow-empty
git push -u origin gh-pages

Get the master branch back

git checkout master
git pull origin master

Setup

Set up a git worktree to deploy to gh-pages

rm -rf dist
echo "dist/" >> .gitignore
git worktree add dist gh-pages

Deploy

Run the gh-publish command

npm run gh-publish

Which just runs these commands

npm run build
cd dist
git add --all
git commit -m "Deploy to gh-pages"
git push origin gh-pages
cd ..

Built With

License

This project is licensed under the MIT License - see the LICENSE file for details

Releases

No releases published

Packages

No packages published

Languages