Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 1 год назад •via X (Twitter)

Наука и технологииИскусство
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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 просмотров • 3 лет назад

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 просмотров • 3 лет назад

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 просмотров • 3 лет назад

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 просмотров • 3 лет назад

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 просмотров • 2 лет назад

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 просмотров • 3 лет назад

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 просмотров • 10 месяцев назад

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 просмотров • 5 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 10 месяцев назад

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 просмотров • 3 лет назад

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,352 просмотров • 20 дней назад

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 просмотров • 4 месяцев назад

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 просмотров • 3 месяцев назад

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 просмотров • 2 лет назад

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 просмотров • 3 месяцев назад

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 просмотров • 7 месяцев назад

Experimenting with the pretext library... saw a brick breaker demo and had to try making it in PixiJS. Wanted to see what happens when you add WebGL/WebGPU shaders to the mix. Using bloom, glow, rgb split filters from pixi-filters. plus gsaps physics plugin for the text effect.
0:13

Experimenting with the pretext library... saw a brick breaker demo and had to try making it in PixiJS. Wanted to see what happens when you add WebGL/WebGPU shaders to the mix. Using bloom, glow, rgb split filters from pixi-filters. plus gsaps physics plugin for the text effect.

PixiJS

18,554 просмотров • 5 месяцев назад

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 просмотров • 5 месяцев назад