Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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

uuuuuulala's profile picture

Ksenia Kondrashova

8,765 subscribers

43,711 görüntüleme • 1 yıl önce •via X (Twitter)

Bilim & TeknolojiSanat
LIVE

Anya Rossi• Live Now

Private livecam show

0 Yorum

Yorum bulunmuyor

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

Benzer Videolar

Another minimal JS animation here! Interactive (and damn satisfying) cursor animation made with only 3kb of pure JS. Not sure how to use it yet – maybe as a base for some shader?.. Anyway, it's fun already :) Live demo & source code: Hosted on CodePen.IO
0:15

Another minimal JS animation here! Interactive (and damn satisfying) cursor animation made with only 3kb of pure JS. Not sure how to use it yet – maybe as a base for some shader?.. Anyway, it's fun already :) Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

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

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

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:14

GLSL fire shader based on Simplex noise with a static SVG overlay. No interactivity this time, just sketching on Saturday night ¯\_(ツ)_/¯ Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

16,008 görüntüleme • 3 yıl önce

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP
0:19

Rube Goldberg HTML form! Tbh I spent way too much time on this one haha. As fun as it is useless :) Live demo & source code: Hosted on CodePen.IO Made with #GSAP GSAP

Ksenia Kondrashova

65,318 görüntüleme • 2 yıl önce

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO
0:16

This glass configurator has no custom shaders or geometries. Just MeshPhysicalMaterial and a bunch of standard geometries with rendering order set manually. Not 100% realistic but super simple Live demo & source code: Made with Three.js Hosted on CodePen.IO

Ksenia Kondrashova

59,771 görüntüleme • 3 yıl önce

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?
0:14

On a mission to make buttons that stand out. - For this one, I played around with liquid glass mixed with a 3D effect on hover, how's it look?

Camden @ Designownow

15,547 görüntüleme • 9 ay önce

Skywork Matrix-Game 3.0 is here! FULLY OPEN SOURCE! Real-Time and Streaming Interactive World Model with Long-Horizon Memory - Fully open source: code, model, and technical report - 720p @ 40FPS with a 5B model - Minute-long memory consistency - Trained on Unreal Engine + AAA games + real-world data - Scales up to 28B MoE for quality, dynamics, and generalization Homepage 👉 Code 👉 Model 👉 Tech report 👉 Create. Explore. Play. With Matrix-Game 3.0
0:15

Skywork Matrix-Game 3.0 is here! FULLY OPEN SOURCE! Real-Time and Streaming Interactive World Model with Long-Horizon Memory - Fully open source: code, model, and technical report - 720p @ 40FPS with a 5B model - Minute-long memory consistency - Trained on Unreal Engine + AAA games + real-world data - Scales up to 28B MoE for quality, dynamics, and generalization Homepage 👉 Code 👉 Model 👉 Tech report 👉 Create. Explore. Play. With Matrix-Game 3.0

Skywork

54,804 görüntüleme • 5 ay önce

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

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

Giom

132,656 görüntüleme • 2 yıl önce

Update on my lightweight intercom alternative that runs on a $5 a month server. The widget is almost ready. It took more work than I expected. I spent a lot of time making it light on websites and thinking through interactions and UI. Built with Go and Vue, and I’ll open source it soon.
0:14

Update on my lightweight intercom alternative that runs on a $5 a month server. The widget is almost ready. It took more work than I expected. I spent a lot of time making it light on websites and thinking through interactions and UI. Built with Go and Vue, and I’ll open source it soon.

Fayaz Ahmed

60,335 görüntüleme • 10 ay ö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

Here is an effect I’ve been trying to achieve for a long time without success, regardless of the software I used. This is the first time I’ve managed to pull it off. Grok imagine
0:15

Here is an effect I’ve been trying to achieve for a long time without success, regardless of the software I used. This is the first time I’ve managed to pull it off. Grok imagine

Déborah

16,340 görüntüleme • 18 gün önce

Saw a dot grid effect from Antonin Brener.work on Insta and wanted to create something similar for typing in an input. The input border effect is using border-beam by Jakub Antalik Try here:
0:10

Saw a dot grid effect from Antonin Brener.work on Insta and wanted to create something similar for typing in an input. The input border effect is using border-beam by Jakub Antalik Try here:

Zsolt Kacso

21,307 görüntüleme • 4 ay önce

Auntie: “Since it was a team you stayed with for a long time, it must not have been easy to transfer.” Gumayusi: “I had a lot of thoughts and emotions (at the time). Now... I feel like I made the right decision coming here.”
0:10

Auntie: “Since it was a team you stayed with for a long time, it must not have been easy to transfer.” Gumayusi: “I had a lot of thoughts and emotions (at the time). Now... I feel like I made the right decision coming here.”

ye?

44,834 görüntüleme • 3 ay önce

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:
0:13

New favorite noise function! I had lots of fun tweaking the yonatan shader and ended up using it as a semi-transparent overlay With color changing on scroll and slight cursor response, the total code size is still <9 kb 🫣 Live demo & source code: Original algorithm:

Ksenia Kondrashova

20,374 görüntüleme • 2 yıl önce

Making a camera for everyone directly impacts the position of its controls. With MBL, we leave that choice to the user. The UI is fully reorderable, and you can customise the physical button too. Where do you place your most-used controls on a camera?
0:14

Making a camera for everyone directly impacts the position of its controls. With MBL, we leave that choice to the user. The UI is fully reorderable, and you can customise the physical button too. Where do you place your most-used controls on a camera?

Nuevo.Tokyo™

37,264 görüntüleme • 3 ay önce

Nowadays it seems way too easy for someone to alter a video subs and for everyone to just believe it, with NO ONE bothering to check the original source. So here is the real subs: Weverse live, July 23, 2025.
0:17

Nowadays it seems way too easy for someone to alter a video subs and for everyone to just believe it, with NO ONE bothering to check the original source. So here is the real subs: Weverse live, July 23, 2025.

REPORT FOR SEOKJIN

11,298 görüntüleme • 7 ay önce

iu: do you have any schedule on april 10, sunbaenim? are you able to watch it real time? js: i should. it’s wooseok &amp; iu who’s doing it ws: is it okay (for us) to do a video call? to make sure you’re watching it or not. 😆😆 js: i will take a video and send it via message instead
0:17

iu: do you have any schedule on april 10, sunbaenim? are you able to watch it real time? js: i should. it’s wooseok &amp; iu who’s doing it ws: is it okay (for us) to do a video call? to make sure you’re watching it or not. 😆😆 js: i will take a video and send it via message instead

왔즈롱

39,781 görüntüleme • 4 ay önce

All my demos in one place! I have released a site with over 25 of my demos over the years all updated and fixed with code on GitHub and each one individually runnable. Many more to come! Check it out: #threejs #webgl #creativecoding #portfolio
0:13

All my demos in one place! I have released a site with over 25 of my demos over the years all updated and fixed with code on GitHub and each one individually runnable. Many more to come! Check it out: #threejs #webgl #creativecoding #portfolio

Faraz

12,064 görüntüleme • 1 yıl önce