<hr />
<p>title: Progressively enhanced WebGL and Lens Refraction
published: true
date: 2023-10-15 00:49:00 UTC
tags: webgl,reactthreefiber</p>
<h2 id="heading-canonicalurl-httpsreactjsexamplecomprogressively-enhanced-webgl-lens-refraction">canonical_url: <a href="https://reactjsexample.com/progressively-enhanced-webgl-lens-refraction/" class="autolinkedURL autolinkedURL-url" target="_blank">reactjsexample.com/progressively-enhanced-w..</a></h2>
<h1 id="heading-progressively-enhanced-webgl-lens-refraction">Progressively Enhanced WebGL Lens Refraction</h1>
<p> <img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1700149267366/4c3ea468-289c-4bea-99fb-179a0ddbd132.jpeg" alt="Progressively enhanced WebGL and Lens Refraction" /></p>
<p>Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber. By <a target="_blank" href="https://twitter.com/ffdead">David Lindkvist</a> @ <a target="_blank" href="https://14islands.com">14islands</a>.</p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1700149269269/9bf2b8a8-17b0-458b-b73c-5af6cc16d6d9.gif" alt="Progressively enhanced WebGL and Lens Refraction" /></p>
<p><a target="_blank" href="https://tympanus.net/codrops/?p=73607">Article on Codrops</a></p>
<p><a target="_blank" href="https://tympanus.net/Tutorials/WebGLLensRefraction/">Demo</a></p>
<h2 id="heading-installation">Installation</h2>
<pre><code>pnpm i
pnpm start
</code></pre><h2 id="heading-credits">Credits</h2>
<ul>
<li><a target="_blank" href="https://github.com/react-spring/react-three-fiber">react-three-fiber</a></li>
<li><a target="_blank" href="https://threejs.org/">three.js</a></li>
<li><a target="_blank" href="https://reactjs.org/">React</a></li>
<li>Image credits: <a target="_blank" href="https://unsplash.com/@maxberg">Maxim Berg</a></li>
<li>Lens refraction based on <a target="_blank" href="https://codesandbox.io/s/2n98yj">Lens Refraction by Paul Henschel</a></li>
</ul>
<h2 id="heading-github">GitHub</h2>
<p><a target="_blank" href="https://github.com/14islands/codrops-scroll-rig-tutorial?ref=reactjsexample.com">View Github</a></p>


---
title: Progressively enhanced WebGL and Lens Refraction
published: true
date: 2023-10-15 00:49:00 UTC
tags: webgl,reactthreefiber
canonical_url: https://reactjsexample.com/progressively-enhanced-webgl-lens-refraction/
---

# Progressively Enhanced WebGL Lens Refraction
 ![Progressively enhanced WebGL and Lens Refraction](https://cdn.hashnode.com/res/hashnode/image/upload/v1700149267366/4c3ea468-289c-4bea-99fb-179a0ddbd132.jpeg)

Learn how to create a responsive WebGL layout powered by CSS and React Three Fiber. By [David Lindkvist](https://twitter.com/ffdead) @ [14islands](https://14islands.com).

![Progressively enhanced WebGL and Lens Refraction](https://cdn.hashnode.com/res/hashnode/image/upload/v1700149269269/9bf2b8a8-17b0-458b-b73c-5af6cc16d6d9.gif)

[Article on Codrops](https://tympanus.net/codrops/?p=73607)

[Demo](https://tympanus.net/Tutorials/WebGLLensRefraction/)

## Installation

```
pnpm i
pnpm start

```

## Credits

- [react-three-fiber](https://github.com/react-spring/react-three-fiber)
- [three.js](https://threejs.org/)
- [React](https://reactjs.org/)
- Image credits: [Maxim Berg](https://unsplash.com/@maxberg)
- Lens refraction based on [Lens Refraction by Paul Henschel](https://codesandbox.io/s/2n98yj)

## GitHub

[View Github](https://github.com/14islands/codrops-scroll-rig-tutorial?ref=reactjsexample.com)

Progressively enhanced WebGL and Lens Refraction

canonical_url: reactjsexample.com/progressively-enhanced-w..

Progressively Enhanced WebGL Lens Refraction

Installation

Credits

GitHub