«Неаккуратно как-то», — говорили они…

Подписываясь на крупные промо-проекты, будьте крайне осторожны, котаны :)

#threejs #promo

#статья дня

Сколько языков вы можете насчитать в браузере?

HTML, CSS, JavaScript, SVG... XML туда же в целом. Ну, это если брать современные.

А что если есть ещё один? И он позволяет делать потрясающие эффекты. И язык этот — GLSL. OpenGL Shading Language. С-подобный язык описания шейдеров.

И вот в представленной статье рассказывается, как сделать эффект сливающихся блямб на Three.js и GLSL: https://mofu-dev.com/en/blog/gooey-shader/

Вообще, шейдеры штука максимально мощная. Даже в вебе. Достаточно посмотреть на галерею https://www.shadertoy.com/

Математики море, конечно :)

#glsl #webgl #threejs

#codepen дня

Давно собирался написать игру по Гарри Поттеру, но не знал, как?

Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!

Вот: https://codepen.io/ste-vg/full/zYerxoR

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

Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.

Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)

Я залип, в общем, как в игре, так и в её исходниках.

#webgl #threejs #game

#codepen дня

Давно собирался написать игру по Гарри Поттеру, но не знал, как?

Не расстраивайся, я принёс решение! Steve Gardner и его прекрасное создание Spell Caster!

Вот: https://codepen.io/ste-vg/full/zYerxoR

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

Из технологий — Three.js и стейт-машина Stately, позволяющая описывать состояния приложения через удобные диаграммы.

Много комментариев по коду, интересная реализация распознавания жестов. Хоть сейчас бери и в магазин выкладывай :)

Я залип, в общем, как в игре, так и в её исходниках.

#webgl #threejs #game #бородач

#codepen дня

Сайт по продаже пончиков должен быть пончиком и точка!

Пруф: https://codepen.io/narrowdesign/pen/ZYErvWv?editors=1000

Извините, я просто никак больше не могу это прокомментировать.

#threejs #3d

#codepen дня

В какую сторону крутится? :)

https://codepen.io/jkantner/pen/bNwOdbw


#threejs #3d

Вышел anime.js 4.5.0.

Anime.js — это JavaScript-библиотека для анимаций. Её часто используют для DOM, CSS-свойств, SVG, таймлайнов и обычных JS-объектов: когда нужна не одна transition, а нормальное управление движением, задержками, easing’ами и последовательностями.

В 4.5.0 появился API адаптеров. Если коротко, теперь anime.js можно научить работать с объектами, которые устроены не как DOM-элементы.

Главный пример в этом релизе — встроенный адаптер для Three.js.

В Three.js анимация часто требует писать во вложенные свойства объекта:

mesh.position.x = 100
mesh.rotation.y = Math.PI / 4
mesh.material.opacity = 0.5
mesh.material.color.set('#ff8844')

С адаптером это можно описывать прямо в animate():

animate(mesh, {
  x: 100,
  rotateY: 45,
  opacity: 0.5,
  color: '#ff8844',
})

Адаптер сам сопоставляет параметры с position, rotation, material, цветом и другими свойствами Three.js.

Появился и более привычный для фронтендера синтаксис 3D-трансформаций: rotateX, rotateY, rotateZ, scale, transformOrigin, плюс skewX, skewY, skewZ.

Материалы тоже стало анимировать проще. Цвет можно передавать строкой — hex, rgb, hsl или CSS-переменной — без ручного перекладывания в THREE.Color.

Ещё одна хорошая часть — instanced mesh. Объекты, которые в Three.js обычно используются для большого количества одинаковой геометрии, теперь можно анимировать почти как обычные меши. Для сцен с сетками, частицами, волнами и кучей повторяющихся элементов это сильно сокращает ручной код.

В stagger() добавили поддержку 3D: теперь задержки можно раскладывать не только по x и y, но и по z. Плюс появились jitter и seed, чтобы делать разброс в движении, но при этом получать повторяемый результат.

Остальные изменения — в changelog: фиксы timeline, keyframes, seek, reversed loops, render engine, работа с цветами и разные мелкие правки.

Важная деталь: сайт anime.js теперь тоже портирован на новый API с Three.js-адаптером. То есть это не просто пример в документации, а уже основа для собственного сайта проекта.

Получился релиз, после которого anime.js заметно лучше ложится на 3D-сцены. Да здравствуют описания анимаций без постоянного ручного прохода по position, rotation, material и прочим внутренним полям.

#animejs #animation #threejs