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

WebGL *

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

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

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

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

Доброе утро!

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

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

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

Читать далее
Всего голосов 1: ↑0 и ↓1-1
Просмотры574
Комментарии 3

Новости

Показать еще

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

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

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

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

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

JavaScript*WebGL*

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

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

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

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

JavaScript*WebGL*

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

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

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

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

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

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

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

Часы и волны

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

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

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

Читать далее
Всего голосов 33: ↑20 и ↓13+7
Просмотры5.2K
Комментарии 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.3K
Комментарии 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.1K
Комментарии 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
Просмотры1.9K
Комментарии 0

Рендеринг каустики воды в реальном времени

Работа с 3D-графикой*Разработка игр*WebGL*
Перевод
В этой статье я представлю свою попытку обобщения вычислений каустики в реальном времени с помощью WebGL и ThreeJS. Тот факт, что это попытка, важен, ведь найти решение, работающее во всех случаях и обеспечивающее 60fps — сложная, если не невозможная задача. Но вы увидите, что при помощи моей методики можно достичь достаточно приличных результатов.

Что такое каустика?


Каустика — это световые узоры, возникающие, когда свет преломляется и отражается от поверхности, в нашем случае — на границе воды и воздуха.

Из-за того, что отражение и преломление происходят на волнах воды, вода действует здесь как динамическая линза, создающая эти световые узоры.


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

Чтобы добиться стабильных 60fps, нам нужно вычислять её на графической карте (GPU), поэтому мы будем вычислять каустику только шейдерами, написанными на GLSL.
Читать дальше →
Всего голосов 35: ↑35 и ↓0+35
Просмотры8.1K
Комментарии 1

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