Loading video...

Video Failed to Load

Go Home

For a recent (unreleased) project I got to play around with SDF shapes to create lens blur effects on interaction — #shaders #webgl #threejs

guilanier's profile picture

Giom

1,743 subscribers

132,753 views • 2 years ago •via X (Twitter)

Science & TechnologyArts#shaders#webgl#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

For another recent project, had more fun playing with 3D Raymarching shapes and lights — #shaders #webgl #threejs
0:16

For another recent project, had more fun playing with 3D Raymarching shapes and lights — #shaders #webgl #threejs

Giom

13,170 views • 1 year ago

Currently working on #ThreeJS particle effects. Might use this effect in a future project to spice up the interaction with the UI.
0:15

Currently working on #ThreeJS particle effects. Might use this effect in a future project to spice up the interaction with the UI.

Immersive Studios

13,548 views • 3 years ago

Back from some time off programming with a Jump Flood Algorith demo to ease back in! JFA can be used to create a screen SDF from a model in real time - useful for things like silhouette outlines or any other visual effects. More effects coming up! ✨ #threejs #webgl #gamedev
0:14

Back from some time off programming with a Jump Flood Algorith demo to ease back in! JFA can be used to create a screen SDF from a model in real time - useful for things like silhouette outlines or any other visual effects. More effects coming up! ✨ #threejs #webgl #gamedev

Garrett Johnson

50,721 views • 10 months ago

Had a great time playing around w/ GPGPU for terrain generation and volumetric lighting. It's also a small tribute to my region back in France — #webgl #threejs #shaders
0:12

Had a great time playing around w/ GPGPU for terrain generation and volumetric lighting. It's also a small tribute to my region back in France — #webgl #threejs #shaders

Giom

11,231 views • 1 year ago

Interactive WebGL petal particles concept 🌷 We've got a rare opening to take on new projects Unseen Studio® - get in touch if you'd like us to cook something up for you. #webgl #threejs #webdesign
0:14

Interactive WebGL petal particles concept 🌷 We've got a rare opening to take on new projects Unseen Studio® - get in touch if you'd like us to cook something up for you. #webgl #threejs #webdesign

Nathan Riley

35,550 views • 1 year ago

If you've tried getting AI to write TSL shaders, you know the pain: deprecated imports, phantom functions and compilation errors. In my latest blog post, I share a prompt to help you overcome these issues: Using the prompt, I was able to one-shot this particle simulation with Claude Opus 4.5. #threejs #webgl #webgpu #tsl #shaders
0:14

If you've tried getting AI to write TSL shaders, you know the pain: deprecated imports, phantom functions and compilation errors. In my latest blog post, I share a prompt to help you overcome these issues: Using the prompt, I was able to one-shot this particle simulation with Claude Opus 4.5. #threejs #webgl #webgpu #tsl #shaders

Dan Greenheck

61,698 views • 9 months ago

Working on a TSL implementation of a 2D and 3D SPH fluid simulations. It works with both WebGPU and WebGL backends, using compute shaders and transform feedback as a fallback. Still battling a bit with the WebGPURenderer to make the spatial grid optimization work. #threejs
0:11

Working on a TSL implementation of a 2D and 3D SPH fluid simulations. It works with both WebGPU and WebGL backends, using compute shaders and transform feedback as a fallback. Still battling a bit with the WebGPURenderer to make the spatial grid optimization work. #threejs

Renaud

13,811 views • 2 years ago

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool
0:13

Draw GLSL flowers with your cursor! 🌺 One full-screen plane, two render targets, and a bit of shader magic Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders #webgl #glsl #threejs #shader #drawingtool

Ksenia Kondrashova

28,620 views • 3 years ago

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL
0:12

I built a website where you can browse the #threejs shaders code by expanding the <includes> in place. It gives a better understanding of what the code is doing without having to open each file individually. #glsl #WebGL

grgrdvrt

23,622 views • 2 years ago

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO
0:18

I wanted to create a broken glass effect with WebGL for a long time! Here it is: interactive, lightweight (around 10KB of GLSL + vanilla JS), and easy to customise (find more controls on codepen) Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

43,711 views • 1 year ago

Following on from last week's GPT 5.5 experiments... Did more experimenting with HTML-in-Canvas to create more interesting page transitions Using our favourite animation library GSAP + the PixiJS Skills Very impressed with how well GPT 5.5 can create WebGL/WebGPU shaders
0:10

Following on from last week's GPT 5.5 experiments... Did more experimenting with HTML-in-Canvas to create more interesting page transitions Using our favourite animation library GSAP + the PixiJS Skills Very impressed with how well GPT 5.5 can create WebGL/WebGPU shaders

PixiJS

39,516 views • 4 months ago

This is the 5th or 6th time I've written a topography shader & every time it gets a little bit better & I learn a little bit more. It's a nice challenge for anyone learning about shaders! Some details on the plans for this implementation below 👇 #gis #3dtiles #threejs #webgl
0:14

This is the 5th or 6th time I've written a topography shader & every time it gets a little bit better & I learn a little bit more. It's a nice challenge for anyone learning about shaders! Some details on the plans for this implementation below 👇 #gis #3dtiles #threejs #webgl

Garrett Johnson

94,265 views • 1 year ago

Thrilled to share the recent website done at WeBook for the Riyadh Season event. Shout out to all the artists and collaborators in this project. Live: #threejs
0:15

Thrilled to share the recent website done at WeBook for the Riyadh Season event. Shout out to all the artists and collaborators in this project. Live: #threejs

Bahaa Samir

19,372 views • 2 years ago

Lately I’ve been seeing a lot of jelly-like UI components, so I decided to make my own in #glsl, running on WebGL! I adapted the volumetric raymarching technique I use in my shaders and built a custom SDF for an iridescent keycap-style button that works as either a slider or a simple push button. The jelly feel comes from elastic easing functions that drive the SDF deformation. The scale, rotation, background, and color palette are all fully configurable.
0:12

Lately I’ve been seeing a lot of jelly-like UI components, so I decided to make my own in #glsl, running on WebGL! I adapted the volumetric raymarching technique I use in my shaders and built a custom SDF for an iridescent keycap-style button that works as either a slider or a simple push button. The jelly feel comes from elastic easing functions that drive the SDF deformation. The scale, rotation, background, and color palette are all fully configurable.

Jae

23,188 views • 9 months ago

Stop fighting GLSL strings in Three.js 🥊 TSL (Three.js Shading Language) lets you write shaders in JavaScript with actual IDE support, proper debugging, and the ability to seamlessly extend existing materials. Learn more in my latest blog post 👇🏻 #threejs #webgl #webgpu #tsl #threejsroadmap
0:13

Stop fighting GLSL strings in Three.js 🥊 TSL (Three.js Shading Language) lets you write shaders in JavaScript with actual IDE support, proper debugging, and the ability to seamlessly extend existing materials. Learn more in my latest blog post 👇🏻 #threejs #webgl #webgpu #tsl #threejsroadmap

Dan Greenheck

20,928 views • 10 months ago

✍️ I wrote an article on programming blur shaders for beginners. You do not need to be adept at either math or programming to understand how it works :) Going from the most basic/straightforward type of blur, to what you see below, and more! Lots of pretty pictures, media, and interactive code to learn from. -- Box blur, with clipping and radial weighting. (So, no longer really a box blur...?) 🔍 #gamedev #indiedev #unity3d
0:15

✍️ I wrote an article on programming blur shaders for beginners. You do not need to be adept at either math or programming to understand how it works :) Going from the most basic/straightforward type of blur, to what you see below, and more! Lots of pretty pictures, media, and interactive code to learn from. -- Box blur, with clipping and radial weighting. (So, no longer really a box blur...?) 🔍 #gamedev #indiedev #unity3d

Mirza Beig

121,190 views • 7 months ago

We made a tiny game 🐰⛸🥕to reward people who send messages to us. Well, if you don't want to talk to us you can still play here : Move your mouse and click to jump. #gaming #webgl #threejs
0:18

We made a tiny game 🐰⛸🥕to reward people who send messages to us. Well, if you don't want to talk to us you can still play here : Move your mouse and click to jump. #gaming #webgl #threejs

EPIC Agency - Imagine, Build, Tell.

11,225 views • 3 years ago

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders
0:15

If I had to choose one thing to do, it would be just coding WebGL flowers It's a GLSL shader, a full-screen plane, and 2 render targets to swap on each frame Live demo & source code: Made with Three.js Hosted on CodePen.IO Special thanks to The Book of Shaders

Ksenia Kondrashova

51,886 views • 3 years ago

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊
0:11

Excited to announce the launch of my new #WebGL performance monitor tool: stats-gl! A minimalist solution for real-time WebGL performance metrics - FPS, CPU, and GPU. Repo: Live demo: An example for #threejs is also available😊

Renaud

34,066 views • 3 years ago