Creative Coder

Очень много полезных функций и утилит, glsl.

http://stack.gl/packages/

#tool

485 views08:12

April 8, 2020

https://www.curtainsjs.com/ — небольшая библиотека, позволяющая быстро обрабатывать DOM элементы при помощи шейдеров. При этом она автоматически позиционирует их где нужно, давая адаптивность из коробки. Искривляющиеся картинки при скролле и анаглифные эффекты это сюда 💪

Пример на видео:
https://codepen.io/martinlaxenaire/full/OJVKVYa от https://twitter.com/webdesign_ml

#tool

695 views11:06

😍 3 💩 1

April 8, 2020

Очень крутая коллекция. Чтобы понять как это работает идём на https://threejs.org/examples/?q=matcap#webgl_materials_matcap и кидаем картиночки на бюст

За наводку спасибо @munrocket

#tool

461 views16:47

April 17, 2020

Consistent Video Depth Estimation

Крутой алгоритм определения глубины пикселей. Если это будет летать в real time, можно получить обалденные результаты в AR и без добавления лидаров к устройствам. Код пока недоступен

https://roxanneluo.github.io/Consistent-Video-Depth-Estimation/

#tool

538 views15:18

😍 5 💩

May 2, 2020

0:10

Поставил себе десяток редакторов видео чтобы быстро обрезать видео, ни в одном это не удобно, в большинстве нельзя без плясок сделать нестандартное разрешение на выходе.

В итоге оказалось на 777й странице выдачи гугла есть онлайн тулза которая делает именно и только то что мне нужно — https://online-video-cutter.com/

Ох уж это SEO...

На видео пример интерполяции между скелетными анимациями, одна из AnimationMixer, вторая из положения курсора. Мой великолепный костыль для mav.farm

#tool #my

2.0K views08:23

November 17, 2020

Живые материалы в ThreeJS Идея не нова и довольно проста — бери да анимируй что-то в шейдере в зависимости о времени. Самое простое — изменять цвет, либо просто текстурные координаты, но если хочется чего-то покруче то приходится интегрироваться с PBR системой…

А вот и тот самый Shader Chunks Explorer, который оказывается Three ShaderLib Skim

https://ycw.github.io/three-shaderlib-skim/

#tool

1.5K views12:15

May 12, 2021

Deconstructing homunculus.jp distortion with three.js #11

Новое видео Юры Артюха

Помимо создания симпатичной анимации, Юра рассказал про крутую тулзу для работы с анимациями — Theatre.js. Насколько я понял, она позволяет редактировать анимации с привычным для моушн дизайнеров GUI, что даёт возможность не сильно заморачиваясь делать нетривиальные изинги и ещё и значительно упрощает взаимодействие в команде. Можно отдать сцену дизайнеру, он сам доводит анимацию, возвращает таймлайн, готово. Больше не нужно проводить несколько итераций допиливания / сбора фидбека. И это кайф.

dat.gui на максималках. Я два года ждал такую либу :)

#tutorial #tool

YouTube

Original: https://homunculus.jp/

Support: https://www.patreon.com/allyourhtml
Twitter: http://twitter.com/akella
Setup: https://gist.github.com/akella/a19954c9ee42e3ae85b76d0e06977535
Facebook: http://facebook.com/akella

#threejs #glsl #webgl

1.9K viewsAndrew, 10:03

October 3, 2021

0:09

Для мене було цікаво як розробники Spline зробили таку швидку реалізацію розмиття, і на щастя прямо в коді шейдера є посилання на шейдертой. Вони навіть зробили визначення сили розмиття в залежності від глибини, але для цього всі об'єкти позаду "скла" рендеряться вдруге з DepthMaterial. Тому ця фіча має прихований оверхед. Подивитись можна самому з допомогою SpectorJS — взагалі рекомендую аналізувати з його допомогою всі цікаві вам сайти, дуже круто бустить скіл 😉

До речі, ще одне відео з цією технікою, цікава ідея:
https://www.youtube.com/watch?v=59NVCBo26TA

Сам Spline це майбутнє масове 3D в вебі, покриває багато потреб дизайнерів і здешевлює виробництво. Хороша новина в тому, що ті хто вміють робити вау за межами можливостей Spline будуть мати більше роботи через розширення ринку. Також можна почати корисутватись Spline і робити те саме 3D що зараз, тільки швидше. Вангую появу професії по сплайну, як от сталось з вебфлоу. І до речі, вони одне з одним чудово інтегруються.

#tool #reference

398 viewsAndrew, 08:19

August 8, 2022

GitHub - 0beqz/realism-effects: SSGI, Motion Blur, TRAA - Effects to enhance your three.js scene's realism

https://github.com/0beqz/realism-effects

Нарешті релізнули SSGI для тришки. Ця технологія - це як поява RTX в відеокартах, це зовсім інший рівень. Правда за непряме освітлення і м'які тіні доводиться суттєво платити швидкодією, тому це доволі нішеве рішення. Але ж як круто що воно є 🔥

#tool #reference

GitHub

SSGI, Motion Blur, TRAA - Effects to enhance your three.js scene's realism - 0beqz/realism-effects

577 viewsAndrew, 13:14

March 13, 2023