# Threejs Custom WebGPU Glass Material - Predator Cloak Material WebGPU for React Three Fiber

> While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in .

Canonical page: https://andersonmancini.dev/videos/threejs-custom-webgpu-glass-material-predator-cloak

Published: 2026-07-29 · Duration: 2:08 · Category: Components · Tags: three.js, react-three-fiber, webgpu, tsl, shaders, tutorial, source-code, r3f

Watch: [YouTube](https://www.youtube.com/watch?v=CgJQuVXN6iQ) · [Subscribe to the channel](https://www.youtube.com/@AndersonMancini?sub_confirmation=1)

Free source code:

While updating my website, I found an old project that was broken and decided to bring it back to life using WebGPU + TSL in .

I’ve always loved Predator. The first time I saw the Predator cloak effect, I knew I wanted to learn visual effects and make them part of my professional life.

Turn the sound on — it makes the experience much more fun

This is also a great exercise if you’re learning TSL and want to experiment with glass, dispersion, IOR, and custom shaders. Both the classic shader version and the new TSL version are included in the repo so you can compare the approaches side by side.

Hope it’s useful. Don’t forget to ⭐ the GitHub repo!

## Links from the video

- [Live demo](https://predator-material.vercel.app/)
- [Source code on GitHub](https://github.com/ektogamat/predator-material)

## Related projects

- [Advanced Glass](https://andersonmancini.dev/projects/advanced-glass.md) — Coming soon for WebGPU
- [Predator Material](https://andersonmancini.dev/projects/predator-material.md) — Free Custom Material for R3F

## Related articles

- [Glass that remembers what is behind it: transmission in WebGPU and TSL](https://andersonmancini.dev/blog/webgpu-glass-material.md)
- [A cloaking effect in TSL: morphing a PBR material into glass](https://andersonmancini.dev/blog/predator-material.md)