Dimensi Jul 10 2021 at 15:28

Знакомство фронтендера с WebGL: почему WebGL? (часть 1)

7 min

19K

JavaScript*WebGL*

From sandbox

+15

Comments 19

wunderwaffel Jul 10 2021 at 16:21

Ох

Tyusha Jul 10 2021 at 18:58

Зачем все эти страдания. Если вы думаете, что люди зря написали, например, three.js, то зря так думаете. Зачем изобретать велосипед?!

sfi0zy Jul 10 2021 at 19:34

Если вы думаете, что люди зря написали, например, three.js, то зря так думаете. Зачем изобретать велосипед?!

Three.js — это комбайн, который умеет много всего и даже в сжатом виде в минимальной комплектации представляет из себя пол мегабайта скриптов, которые тормозят загрузку страницы. Для задачи в духе «вывести одну простую модельку и покрутить» или «сделать красивые волны на фотографии» этот инструмент избыточен, хорошо если 5% его функционала используется. Так что если времени и бюджета совсем нет, то да, можно наклепать все из готовых модулей, но вообще идея написать все руками не всегда плохая. Можно получить в результате узкоспециализированное, очень маленькое и шустрое решение. Тем более, что страшно это делать только в первый раз.

Dimensi Jul 10 2021 at 22:21

Спасибо за понимание. Мое решение в итоге стоит 5кб кода. Мгновенная инициализация если модель была загружена из кеша indexedDb

Alexufo Jul 11 2021 at 00:13

Неужели нет ничего полегче?

Dimensi Jul 11 2021 at 05:46

Если вы откроете данный гист, вы найдете там кучу фреймворков. Есть там категория микрофреймворков. Так вот первый же в списке regl весит 120кб. Да и на самом деле, я не мог пользоваться фреймворком тогда, потому что даже базовых концепций не знал.

Alexufo Jul 11 2021 at 22:36

Они же не по размеру составили список, nanogl 3kb судя по описанию

Dimensi Jul 12 2021 at 02:19

Ну а чем бы мне такие фреймворки помогли? От webgl fund я получил нужный набор хелперов, а wireframe моделей из коробки я не нашел в те времена. Я выполнил задачу в ноябре 2019 года. Написал статью в 2020, а решился выложить ее только сейчас)

moontrampolines Jul 11 2021 at 00:13

Мне кажется это очень круто, что автор смог сделать свой небольшой инструмент под конкретную задачу. Во-первых загрузка лучше, во-вторых в трехе все равно по дефолту нету возможности квадратный wireframe рисовать. Так что в любом случае пришлось бы свое решение делать.

Tyusha Jul 11 2021 at 09:53

Вот кстати да, wireframe очень не хватает там.

lesivOlexandr Jul 11 2021 at 00:29

Перед тем как начинать учить библиотеки было б неплохо сначала разобраться, как это сделать без них. Использовать three.js без понимая, как реализовывать без него — это то же самое, что использовать React не зная js.

Get-Web Jul 11 2021 at 00:45

Как минимум опыт

UFO just landed and posted this here

NeOleg Jul 11 2021 at 06:29

на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом.

Как вы достали своим неповоротливыми сайтами со всякими свистоперделками...

Dimensi Jul 11 2021 at 06:30

Почему неповоротливыми? Сайт является многостраничным лендингом (если так можно вообще говорить) в котором на 1 экране была красивая сочная моделька. Вместо красивой картинки, у нас просто была анимированная по цене 5кб рендер, animejs, моделька 200кб. Некоторые png картинки весят намного больше чем моя анимированная картинка.

IBCONST Jul 13 2021 at 22:15

Сейчас тоже столкнулся с этой проблемой. Есть цель создать 3D визуализацию на сайте. Сам рисую в САПР. Проект не коммерческий, пытаюсь решить для брата. Пока стопор. Могу вписаться по моделькам через САПР и сохранить с любым расширением.

Dimensi Jul 13 2021 at 22:15

Куда вписаться? О чем вы? Если вам интересен код движка, то в конце 4 статьи есть пример с codesandbox. Он вполне рабочий.

Если вам нужна помощь, то лучше попросить ее у более зрелых людей в этой технологии. В телеге например есть чат посвященный webgl.

IBCONST Jul 13 2021 at 22:24

Вписаться в плане моделирования, это у меня не плохо получается. Правда в САПР.

IBCONST Jul 13 2021 at 22:25

А за подсказку спасибо. Найти фрилансеров в этой теме крайне сложно, берутся и ничего в итоге не делают! Бюджет человек готов выделить, нет исполнителя!!!