## Overview

Ever seen an image that changes when you tilt it? That’s called a lenticular effect—and in this tutorial, I’ll show you how to recreate it on the web using Three.js, WebGPU, and Three Shading Language (TSL).

## Create a Lenticular Material with TSL and WebGPU

The same illusion can be incredibly useful in interactive storytelling, portfolio effects, or even in 3D product showcases where you want multiple visuals in one view.

## Insights and Skills

You’ll learn how to:

- How to use **React Three Fiber** with WebGPU
- **Three Shading Language (TSL)**: A new way to write shaders in the world of Three.js.
- **Node-based materials in React Three Fiber**: Build complex visual logic without writing raw GLSL.


## Tech Stack

- **[Three.js Shading Language](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)**
- **[Three.js](https://threejs.org/)**
- **[React Three Fiber](https://r3f.docs.pmnd.rs/getting-started/introduction)**
- Images made with **[3D AI Studio](https://www.3daistudio.com/)**

## Experience the project in action 

- [Live Demo](https://lenticular.wawasensei.dev)
- [Final Code](https://github.com/wass08/r3f-lenticular-material)
- [Starter Code](https://github.com/wass08/r3f-webgpu-starter)


#threejs #js #reactjs

Learn how to build a Lenticular Effect Material with Three.js using the Three Shading Language (TSL) and WebGPU

How to Create a Lenticular Material with TSL and WebGPU

Overview

Create a Lenticular Material with TSL and WebGPU

Insights and Skills

Tech Stack

Experience the project in action