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

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

Возникла проблема при загрузке этого видео. Это может быть связано с временными проблемами сети или видео может быть недоступно.

На главную

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

8,754 subscribers

28,620 просмотров • 3 лет назад •via X (Twitter)

#webgl #glsl #threejs #shader #drawingtool

Anya Rossi• Live Now

Private livecam show

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

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

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

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

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

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 лет назад

New #WebGL pattern! A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a #GLSL shader wrapped with JS Live demo & source code: Hosted on CodePen.IO Special thx to The Book of Shaders

New #WebGL pattern! A Voronoi diagram (love it) with eyes calculated over the polar coordinates of each cell. No images or graphic libs here, just a #GLSL shader wrapped with JS Live demo & source code: Hosted on CodePen.IO Special thx to The Book of Shaders

Ksenia Kondrashova

35,396 просмотров • 2 лет назад

$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$

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 лет назад

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

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

Recreation challenge of Parse/Error 's piece. Made possible with Three.js and custom glsl shaders, running online in real-time. Live link 🔴👉 Code repo 📖👉 Code breakdown coming soon #threejs #glsl #npm #ts #nextjs

Recreation challenge of Parse/Error 's piece. Made possible with Three.js and custom glsl shaders, running online in real-time. Live link 🔴👉 Code repo 📖👉 Code breakdown coming soon #threejs #glsl #npm #ts #nextjs

Marius Ballot

16,762 просмотров • 2 лет назад

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

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 лет назад

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

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 лет назад

It's October, my dudes! I've redone one of my fav old works. The updates: - transparent background - no extra libs so just <15kb of code - parameters that are easy to change without going through the shader Live demo & source code: Hosted on CodePen.IO

It's October, my dudes! I've redone one of my fav old works. The updates: - transparent background - no extra libs so just <15kb of code - parameters that are easy to change without going through the shader Live demo & source code: Hosted on CodePen.IO

Ksenia Kondrashova

99,480 просмотров • 2 лет назад

Bitspace now supports GLSL shaders. Write a fragment shader - and your uniforms automatically creates inputs on the Shader node. These inputs can be used to pipe colors, vectors or whatever from the rest of your Bitspace environment. new fragment

Bitspace now supports GLSL shaders. Write a fragment shader - and your uniforms automatically creates inputs on the Shader node. These inputs can be used to pipe colors, vectors or whatever from the rest of your Bitspace environment. new fragment

emil

32,949 просмотров • 1 год назад

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

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 лет назад

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:

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 лет назад

Imagine: Parallel Neural Networks with Shaders 🤔 (GLSL instead of CUDA) Parallelization by encoding the weights and activations as Buffer Objects or Textures, using fs to perform matmul and activation functions in parallel. Each fragm shader instance parproc 1..n neuron.

Imagine: Parallel Neural Networks with Shaders 🤔 (GLSL instead of CUDA) Parallelization by encoding the weights and activations as Buffer Objects or Textures, using fs to perform matmul and activation functions in parallel. Each fragm shader instance parproc 1..n neuron.

wavefnx

86,755 просмотров • 1 год назад

I planned on releasing my Three.js WebGPU water shader 2 weeks ago, but I promised myself I would stop half-assing things this year. I'm glad I waited. I'll be selling the whole package for $99. Full demo video coming soon, but includes FFT water sim, underwater effects, dynamic sky + fog, buoyancy, and more. Every aspect is tunable. Comes with 8 presets and 4 quality levels so it will run on any device. You'll get full source code + demo code, plus all future updates and fixes. Join waitlist now and get an email for 20% off at launch #threejs #webgpu #shaders

I planned on releasing my Three.js WebGPU water shader 2 weeks ago, but I promised myself I would stop half-assing things this year. I'm glad I waited. I'll be selling the whole package for $99. Full demo video coming soon, but includes FFT water sim, underwater effects, dynamic sky + fog, buoyancy, and more. Every aspect is tunable. Comes with 8 presets and 4 quality levels so it will run on any device. You'll get full source code + demo code, plus all future updates and fixes. Join waitlist now and get an email for 20% off at launch #threejs #webgpu #shaders

Dan Greenheck

50,738 просмотров • 7 месяцев назад

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI. Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment. For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor. X post: GitHub: Original site:

I keep seeing the same pattern with Three.js games, shaders, p5.js, and now 3D UI. Give a coding agent a strong reference, the live URL, and the source repo. It can study the mechanics, recreate them, and give you a working place to experiment. For this one, I turned a Trevor Noah-inspired book interaction into fictional manuals for Codex, Claude Code, and Cursor. X post: GitHub: Original site:

Meng To

180,453 просмотров • 1 месяц назад

We’re bringing Video Shaders to Framer, starting with a new version of our Chromatic Aberration shader, which now supports images, videos, and mouse interactions, all-in-one. Add glass-like curvature, dispersion, and animations to your assets with just a few clicks. Web-ready.

We’re bringing Video Shaders to Framer, starting with a new version of our Chromatic Aberration shader, which now supports images, videos, and mouse interactions, all-in-one. Add glass-like curvature, dispersion, and animations to your assets with just a few clicks. Web-ready.

benjamin

29,336 просмотров • 26 дней назад

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

TypeGPU 💜 Three.js TypeGPU 0.9 can integrate with Three.js Shading Language (TSL) on a very granular level, thanks to the @typegpu/three package. So now, you can write shaders in TypeScript while leveraging the rich Three.js ecosystem! To showcase the integration, we prepared docs and ported a handful of official Three.js examples 👇

Software Mansion

42,869 просмотров • 7 месяцев назад

Big thanks to everybody who encouraged me on this whacky gamedev journey! Today I replaced the complex cloud system with a simple shader and tuned some of the sound effects #gamedev #indiedev #devlog

Big thanks to everybody who encouraged me on this whacky gamedev journey! Today I replaced the complex cloud system with a simple shader and tuned some of the sound effects #gamedev #indiedev #devlog

Matt - Tiny Kingdoms

16,719 просмотров • 7 месяцев назад

Weeks of work for a senior Three.js dev is ONE prompt for Opus 5, literally 😅 Opus built this infinite physically simulated clothesline gallery using Three.js with 96 wave nodes, per card pendulum physics, custom rope shader with fibre noise and Fresnel rim. I don't even know half of those terms but it's what it is (I'm studying each code part, though). These days, you just describe what you want and get it done using AI. Any kind of effect almost. Live: Code: Design:

Weeks of work for a senior Three.js dev is ONE prompt for Opus 5, literally 😅 Opus built this infinite physically simulated clothesline gallery using Three.js with 96 wave nodes, per card pendulum physics, custom rope shader with fibre noise and Fresnel rim. I don't even know half of those terms but it's what it is (I'm studying each code part, though). These days, you just describe what you want and get it done using AI. Any kind of effect almost. Live: Code: Design:

The Bugged Dev

27,484 просмотров • 1 месяц назад

With the release of Fable 5, I thought it would be fun to build and open-source a new MacOS screensaver using a metal shader, that way could also try building your own! Totally free, link to the repo below

With the release of Fable 5, I thought it would be fun to build and open-source a new MacOS screensaver using a metal shader, that way could also try building your own! Totally free, link to the repo below

Daniel Destefanis

55,346 просмотров • 2 месяцев назад

Six years later this is still one of my favorite outline effects especially for hard surface models like CAD & architecture. And now it works with three.js' WebGPURenderer thanks to a contribution from "cmhhelgeson" on Github!

Six years later this is still one of my favorite outline effects especially for hard surface models like CAD & architecture. And now it works with three.js' WebGPURenderer thanks to a contribution from "cmhhelgeson" on Github!

Garrett Johnson

23,282 просмотров • 2 месяцев назад