Как стать автором
Обновить
-0.15
Рейтинг

WebGL *

Программная библиотека для JavaScript

Сначала показывать
  • Новые
  • Лучшие
Порог рейтинга
  • Все
  • ≥0
  • ≥10
  • ≥25
  • ≥50
  • ≥100

Различные виды алгебраических кривых

Математика *WebGL *

Привет, Хабр!

Вспоминая свои программы, которые я делал во времена обучения в вузе, решил поделиться ими с Вами. Насколько я припоминаю, их делал на занятиях по графике.

В чем их отличие от тех, которые я Вам представлю, они были написаны на Delphi. Конечно время идет и прогресс не стоит на месте, в том числе и мои навыки в новых инструментах разработки.

Теперь перейдем к сути статьи.

На википедии есть страница с их списком.

Насколько я знаю ими занимались различные известные и не очень математики. Часть из них я смог реализовать в программах на webgl. Это будет экспериментальная статья, так что прошу любить и жаловать. Рассмотрим 5 примеров алгебраических кривых разных порядков.

Читать далее
Всего голосов 8: ↑1 и ↓7 -6
Просмотры 1.6K
Комментарии 15

Уравнения математической физики в действии

Веб-дизайн *Математика *WebGL *Физика
Из песочницы

Доброе утро!

Сегодня поговорим о примерах в дисциплине урматфиз общими словами без погружения в сухой, академический язык и множества формул.

По шкале сложности для чистой математики эта дисциплина на мой субъективный взгляд получает 7/10. Но это не значит что эти формулы легки для зазубривания и запоминания. Тем более говорить о том, что я могу сделать открытие в данной области которое попадет в учебники, например объясняя физику какого - либо нового процесса или уточняя уже существующий. Если подумать, то например выбирая какой-либо параграф учебника по данному предмету, то он исписан формулами которые если провести аналогию похож на модуль по программированию. Скажу сразу мне преподавали данный предмет очень плохо, не объясняя что данные формулы значат, точнее заглавие было например: "Уравнение волны" или "Колебание мембраны", а дальше переписывали все формулы в параграфе с короткими комментариями что откуда, весьма скудными в полной тишине. Препод перелистывал страницы презентации и ходил туда-обратно пока мы переписывали. Видно что не ему, ни мне это было не нужно, как бы для общего развития. Скорее всего надо было читать дополнительную литературу чтобы понять, но там уровень для подкованного студента, предметов было много и где-то были пробелы и особо не было времени на все распылиться. Ну это так к слову. К слову чем больше людей надо учить в промежутке времени, тем меньше времени уделяется каждому студенту и тем хуже уровень знаний у каждого студента, ну это в пределе.

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

Читать далее
Всего голосов 11: ↑8 и ↓3 +5
Просмотры 4K
Комментарии 16

Как на Three.Js сделать анимированный туннель из частиц

Блог компании SkillFactory Разработка веб-сайтов *Программирование *Работа с 3D-графикой *WebGL *
Перевод
Tutorial

Один из организаторов митапов для креативных разработчиков в Бельгии Creative Front-end Belgium в двух постах на CodePen рассказывает и показывает, как шаг за шагом сделать туннель из частиц с эффектом движения в нём. К старту курса по Frontend-разработке делимся сокращённым переводом этих статей об анимации, которая, по словам автора, нравится ему больше всего; вы увидите эксперименты с параметрами анимации, поэтому легко поймёте, как адаптировать код для своих нужд, например, для эффекта на сайте или в вашей игре.

Читать далее
Всего голосов 20: ↑20 и ↓0 +20
Просмотры 6.8K
Комментарии 2

Знакомство фронтендера с WebGL: четкие линии (часть 3)

JavaScript *WebGL *

Третья часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.

Пишем свой парсер и погружаемся в некоторые функции webGL для красивых линий.

Читать далее
Всего голосов 18: ↑18 и ↓0 +18
Просмотры 2.3K
Комментарии 1

Знакомство фронтендера с WebGL: первые наброски (часть 2)

JavaScript *WebGL *

Вторая часть серии статей о том как фронт писал свой микродвижок для рендера моделей, ради экономии байтов. Ссылка на прошлую.

Тут я приступил к попыткам отрендерить красиво яблоко.

Читать далее
Всего голосов 12: ↑11 и ↓1 +10
Просмотры 2.5K
Комментарии 1

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

JavaScript *WebGL *
Из песочницы

Мне и моему коллеге дизайнеру была поставлена задача разработать новую версию сайта-визитки компании. Коллега полгода учился работать с 3D-редакторами (в нерабочее время на Maxon Cinema 4D), поэтому он хотел использовать свои новые навыки при создании новой версии сайта. Его идея заключалась в том, что на каждой странице на первом экране будет крутиться какая-нибудь непонятная фигура с каким-нибудь красивым текстом. Выглядеть это должно было примерно так:

Читать далее
Всего голосов 17: ↑16 и ↓1 +15
Просмотры 6.7K
Комментарии 19

Часы и волны

Ненормальное программирование *WebGL *

Я показывал Хабру свою графику, хотя меня и заминусовали, я хочу показать снова то, над чем я работал, может кому то из большой аудитории Хабра понравится анимация, графика или идея, которая уже давно лежит на поверхности. Это прототип стрелочных часов, измеряющих время в 7300000-7320000 больших размерах, может столько и не нужно, но обычным 12-часовым часам явно не хватает делений для измерения хотя бы сегодняшней даты.

Я добавил красивую графику, чтоб было не слишком скучно: получилось что часы существуют в пространстве, зависящем от t1 (текущие дата и время), а окружающие фракталы в пространстве, вычисляя цвет пикселей, зависят от t2 (время прошедшее с момента запуска) - мне нравится эта особенность, она кажется странной.

Читать далее
Всего голосов 33: ↑20 и ↓13 +7
Просмотры 5.3K
Комментарии 52

Я выпустил Grafar — JS-библиотеку для визуализации

Разработка веб-сайтов *JavaScript *Математика *Визуализация данных WebGL *

После пяти лет в столе я готов представить свою библиотеку для визуализации — grafar. У нас есть: 3D, реактивные вычисления и самое простое АПИ для построения математических графиков прямо в браузере. В статье рассказываю, что я сделал и как этим пользоваться.

Читать далее
Всего голосов 81: ↑81 и ↓0 +81
Просмотры 11K
Комментарии 11

Как я написал браузерный 3D FPS шутер на Three.js, Vue и Blender

Ненормальное программирование *JavaScript *Работа с 3D-графикой *WebGL *VueJS *

На пути каждого коммерческого разработчика (не только кодеров, но, знаю, у дизайнеров, например, также) рано или поздно встречаются топкие-болотистые участки, унылые мрачные места, блуждая по которым можно вообще забрести в мертвую пустыню профессионального выгорания и/или даже к психотерапевту на прием за таблетками. Работодатели-бизнес очевидно задействует ваши наиболее развитые скилы, выжимая по максимуму, стек большинства вакансий оккупирован одними и теми же энтерпрайз-инструментами, кажется, не для всех случаев самыми удачными, удобными и интересными, и вы понимаете что вам придется именно усугублять разгребать тонну такого легаси… Часто отношения в команде складываются для вас не лучшим образом, и вы не получаете настоящего понимания и отдачи, драйва от коллег… Умение тащить себя «по-мюнхаузеновски за волосы», снова влюбляться в технологии, увлекаться чем-то новым [вообще и/или для себя, может быть - смежной областью], имхо, не просто является важным качеством профессионала, но, на самом деле, помогает разработчику выжить в капитализме, оставаясь не только внешне востребованным, конкурентоспособным с наступающей на пятки молодежи, но, прежде всего, давая энергию и движение изнутри. Иногда приходится слышать что-нибудь вроде: «а вот мой бывший говорил, что если бы можно было не кодить, он бы не кодил!». Да и нынешняя молодежь осознала что в сегодняшней ситуации «честно и нормально» зарабатывать можно только в айти, и уже стоят толпою на пороге HR-отдела... Не знаю, мне нравилось кодить с детства, а кодить хочется что-нибудь если не полезное, то хотя бы интересное. Короче, я далеко не геймер, но в моей жизни было несколько коротких периодов когда я позорно «загамывал». Да само увлечение компьютерами в детстве началось, конечно же, с игр. Я помню как в девяностые в город завезли «Спектрумы». Есть тогда было часто практически нечего, но отец все-таки взял последние деньги из заначки, пошел, отстоял невиданно огромную очередь и приобрел нам с братом нашу первую чудо-машину. Мы подключали его через шнур с разъемами СГ-5 к черно-белому телевизору «Рекорд», картинка тряслась и моргала, игры нужно было терпеливо загружать в оперативную память со старенького кассетного магнитофона [до сих пор слышу ядовитые звуки загрузки], часто переживая неудачи... Несмотря на то что ранние программисты и дизайнеры умудрялись помещать с помощью своего кода в 48 килобайт оперативной памяти целые миры с потрясающим геймплеем, мне быстро надоело играть и я увлекся программированием на Бейсике)), рисовал спрайтовую графику (и векторная «трехмерная» тогда тоже уже была, мы даже купили сложную книжку), писал простую музыку в редакторе... Так вот, некоторое время назад мне опять все надоело, была пандемийная зима и на велике не покататься, рок-группа не репетировала… Я почитал форумы и установил себе несколько более-менее свежих популярных игр, сделанных на Unity или Unreal Engine, очевидно. Мне нравятся РПГ-открытые миры-выживалки, вот это все... После работы я стал каждый вечер погружаться в виртуальные миры и рубиться-качаться, но хватило меня ненадолго. Игры все похожи по механикам, однообразный геймплей размазан по небольшому сюжету на кучу похожих заданий с бесконечными боями… Но самое смешное - это реально безбожно лагает в важных механиках. Лагают коммерческие продукты которые продают за деньги… А любой «баг», имхо, это сильное разочарование - он мгновенно выносит из виртуальной среды, цифровой сказки в реальный мир… Конечно, отличная графика, очень круто нарисовано. Но, утрируя, я понял что все эти поделки на энтерпрайзных движках, по сути - даже не кодят. Их собирают менеджеры и дизайнеры, просто «играясь с цветом кубиков», но сами кубики, при этом практически «не меняются»... Вообщем, когда стало совсем скучно, я подумал что «а я ведь тоже так могу», да прямо в браузере на богомерзком не предназначенным для экономии памяти серьезного программирования джаваскрипте. Решил наконец полностью соответствовать тому что все время с умным видом повторяю сыну: «уметь делать игры, намного интереснее чем в них играть». Одним словом, я задался целью написать свой кастомный браузерный FPS-шутер на открытых технологиях.

Читать далее
Всего голосов 21: ↑18 и ↓3 +15
Просмотры 11K
Комментарии 37

Рендеринг шрифтов для WebGL при помощи инструмента msdf-bmfont-xml и технологии MSDF

JavaScript *Работа с 3D-графикой *WebGL *
Tutorial

18/3/2021 Наконец-то была закончена интеграция инструмента msdf-bmfont-xml для библиотеки openglobus. Текстовые метки стали выглядеть гораздо красивее! Мне помог инструмент msdf-bmfont-xml для создания атласов шрифтов и рендеринга текстур для (multichannel signed distance fields) MSDF.

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 1.6K
Комментарии 33

Есть ли жизнь без WebGL 2.0?

Разработка под iOS *WebGL *WebAssembly *

WebGL 2.0 вышел в далёком 2017ом году, принёс графический стек OpenGL ES 3.0 (2012го года), и, казалось бы, все современные браузеры давно должны были его поддерживать. Однако, среди лидеров затесались отстающие, и пользователи Safari до сих пор (начало 2021го) вынуждены ограничиваться возможностями WebGL 1.0, опубликованным в 2011ом году на основе OpenGL ES 2.0.

PBR освещение достаточно требовательно к вычислительным ресурсам графического процессора и обычно реализуется средствами WebGL 2.0. Возможно ли адаптировать PBR рендерер графического движка для работы в условиях ограничений WebGL 1.0 на iPad? В этой статье описывается опыт такой адаптации для графического движка открытого C++ фреймворка Open CASCADE Technology.

Читать далее
Всего голосов 20: ↑19 и ↓1 +18
Просмотры 4.5K
Комментарии 17

Почему мы трансформируем трёхмерные векторы матрицами 4х4?

Математика *Unity *WebGL *

Почему не матрица 3х3? Почему в матрице 4х4 всё уложено именно так? Зачем там последняя строка, заполненная нулями и одной единицей в конце? Этими вопросами я задался накануне, решил поисследовать вопрос и рассказываю что выяснил.

Читать далее
Всего голосов 19: ↑17 и ↓2 +15
Просмотры 10K
Комментарии 14

Как собрать паука в Godot, Unigine или PlayCanvas

Программирование *Разработка игр *WebGL *Прототипирование *Godot *
С наступившим 21-м годом 21-го века.

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


Всего голосов 13: ↑12 и ↓1 +11
Просмотры 4.2K
Комментарии 3

Делаем свой minecraft на JavaScript

JavaScript *WebGL *
Tutorial

Добро пожаловать в самую запутанную архитектуру проекта. Да я умею писать вступление...


image

Попробуем сделать небольшую демку minecraft в браузере. Пригодятся знания JS и three.js.

Немного условностей. Я не претендую на звание лучшее приложение столетия. Это всего лишь моя реализация для данной задачи. Также есть видео версия для тех кому лень читать(там тот же смысл, но другими словами).
Всего голосов 14: ↑11 и ↓3 +8
Просмотры 16K
Комментарии 7

Особенности масштабирования WebGL-карты

Блог компании 2ГИС JavaScript *Геоинформационные сервисы *WebGL *
Мы выпустили редактор стилей. Подробно о том, как с ним можно настроить карту под задачи сервиса, можно почитать на vc.ru. На Хабре же хотим рассказать о концепции StyleZoom, которую мы используем в том числе и в редакторе стилей.

Под катом — небольшой рассказ о зум-левелах: почему в стандартном виде они не подходят для больших территорий и как масштаб влияет на загрузку тайлов и внешний вид карты.


Читать дальше →
Всего голосов 26: ↑26 и ↓0 +26
Просмотры 2.6K
Комментарии 10

3D-индикатор крена и тангажа для HUD на Three.js

JavaScript *Работа с 3D-графикой *Разработка игр *HTML *WebGL *
Браузерные игры с трехмерной графикой создаются достаточно давно. Существуют и симуляторы различных транспортных средств, где игроку необходимо контролировать пространственное положение управляемого объекта.



В статье «Индикатор искусственного горизонта на HTML5 canvas» представлен код индикатора с объемным макетом управляемого объекта на основе изобретения Пленцова А. П. и Законовой Н. А. В реальной технике такая индикация распространения не получила, но в компьютерных играх она вполне может быть использована.

К числу достоинств идеи индикатора с объемным макетом следует отнести эффектность. На этот раз необычный формат визуализации искусственного горизонта будет адаптирован для систем дополненной реальности.
Читать дальше →
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 1.4K
Комментарии 0

Оптимизация 3D-графики под WebGL (опыт PLANT-SIM)

Блог компании IT-центр МАИ Работа с 3D-графикой *Unity *WebGL *CGI (графика) *

В этой статье речь пойдет об оптимизации Unity-сцены проекта Plantsim 1.0.: о визуальной части цифровой копии предприятия Tennessee Eastman Process, реализованного на Unity 2017.1.1f1.


image


Заметка от партнера IT-центра МАИ и организатора магистерской программы “VR/AR & AI” — компании PHYGITALISM.

Читать дальше →
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 2.9K
Комментарии 12

Продолжаем чистить память с three.js

JavaScript *Работа с 3D-графикой *WebGL *

Введение


Недавно писал о своем опыте очистки памяти в приложении, с использованием three.js. Напомню, что целью была перерисовка нескольких сцен с подгрузкой gltf моделей.

С тех пор я провел ряд экспериментов и считаю необходимым дополнить сказанное ранее этой небольшой статьей. Вот некоторые моменты, которые помогли мне улучшить производительность приложения.
Читать дальше →
Всего голосов 10: ↑9 и ↓1 +8
Просмотры 2K
Комментарии 0

Вклад авторов