npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

webrtx

v0.1.1

Published

WebGPU Ray Tracing eXtension

Readme

WebGPU Ray Tracing eXtension

Introduction

WebGPU Ray Tracing Extension (WebRTX) extends the WebGPU API with ray tracing capabilities. The Javascript programming interface is based on Vulkan's Ray Tracing API and is heavily influenced by the dawn-ray-tracing spec. On GPU side, you can directly use the five shader stages introduced by the GLSL_EXT_ray_tracing extension for building GLSL shaders.

Unlike the dawn-ray-tracing project which requires a new Chromium build for translating WebGPU commands to calls to native backends, WebRTX is not hardware ray tracing and is a pure compute shader implementation. This means WebRTX works as long as your browser supports WebGPU (only tested on Chrome so far).

Specification

See types.ts. Note that the spec is unstable in current state and might change in future development.

Examples

triangle

  • shadowray.gl (project) - a website that allows editing and running WebRTX application in realtime

shadowray

How it works

Ray Tracing Pipeline

[recreated based on Khronos' diagram]

The five stage shaders (light green) are provided by users, while the acceleration structure traversal and the (recursive) invocations of user shader functions are implemented by WebRTX's internal compute shader code.

More specifically,

  • The core WebRTX compute shader code traverses the bounding volume hierarchy (BVH) for ray-primitive intersection and calls user shader functions by looking up function handles and parameters in the Shader Binding Table.
  • The building of BVH happens on host which is then flattened into a buffer for stackless traversal on GPU.
  • A WASM GLSL parser (glsl-lang) parses and manipulates user provided shaders, and combine them with WebRTX's internal shader code into a mega compute shader. The manipulation includes e.g. rewriting shader entry function names, rewriting shader variables (like ray payload and ray attribute) for inter-shader communication etc.
  • The Typescript library code patches WebGPU API object(s) and internally turns the ray tracing pass into a compute pass with necessary states and GPU resources.
  • Because WebGPU does not accept SPIR-V anymore, user provided GLSL_EXT_ray_tracing shader codes are compiled to SPIR-V using glslang.js, then to WGSL using naga.

Development

Code structure

  • /bvh - Rust code for building BVH and serializing it to a format suitable for stackless traversal on GPU.
  • /glsl - Rust code for parsing and manipulating user provided shaders.
  • /naga - WASM binding for naga, based on wasm-naga.
  • /src - All other typescript library code.

Building

Dependencies

  • npm
  • wasm-pack
npm run build