Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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,750 subscribers

132,656 görüntüleme • 2 yıl önce •via X (Twitter)

Bilim & TeknolojiSanat#shaders#webgl#threejs
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

Orijinal gönderinin yorumları burada görünecek

Benzer Videolar

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,167 görüntüleme • 1 yıl önce

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 görüntüleme • 3 yıl önce

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,570 görüntüleme • 9 ay önce

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 görüntüleme • 1 yıl önce

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,456 görüntüleme • 1 yıl önce

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,631 görüntüleme • 8 ay önce

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 görüntüleme • 3 yıl önce

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,607 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

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

38,927 görüntüleme • 3 ay önce

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 görüntüleme • 1 yıl önce

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,323 görüntüleme • 2 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 9 ay önce

✍️ 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

120,967 görüntüleme • 5 ay önce

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 görüntüleme • 3 yıl önce

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,837 görüntüleme • 3 yıl önce

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 görüntüleme • 3 yıl önce

started another sci-fi project to play around with some ui ideas. the theme for now is a global anomaly detection system.
0:19

started another sci-fi project to play around with some ui ideas. the theme for now is a global anomaly detection system.

Dilum Sanjaya

133,829 görüntüleme • 9 ay önce