Небольшие примеры на WebGL19.11.2017, 16:43. Показов 55328. Ответов 200
WebGPU:В 2026 году изучать WebGPU как никогда актуально. В этой теме приведены примеры как на WebGL, так и на WebGPU. Лучше всего учиться через практику, создавая небольшие демо-проекты. Стоит стремиться к тому, чтобы писать код самостоятельно из головы, а не просто копировать его. Однако на первых порах можно подглядывать в чужие исходники или ответы нейросетей (Gemini, ChatGPT и др.) и перепечатывать их вручную, попутно уточняя у ИИ назначение тех или иных команд. Со временем лучше чаще обращаться к официальной документации, чтобы глубже понимать работу API. Здесь находится пример инициализации контекста WebGPU, который заливает холст выбранным цветом: index.html
WebGPU-NativeТехнология WebGPU не ограничивается только браузерами - благодаря кроссплатформенным реализациям (таким как wgpu или Dawn) вы можете писать нативный код на C и C++. Настроив сборку через CMake, один и тот же проект можно легко скомпилировать под Windows, Android, WebAssembly и другие платформы. Следующие примеры как раз демонстрируют этот подход на практике:
Исходники версии C/C++ Compat могут быть скомпилированы с помощью компиляторов gcc (C) и g++ (C++), но проект настроен на C++. На GitHub в README.md есть ссылки на пошаговое руководство по установке библиотек. Пример собирается в статические исполняемые файлы для Windows, Linux, Android и WebAssembly (Emscripten) из одной кодовой базы с помощью CMake. Все сборки запускаются на своих платформах. Сборки можно скачать на вкладке Releases (сборки есть только в версии на C). Сборка для Linux протестирована на Ubuntu 26 и Fedora 44 на WSL. Сборка для Linux настроена для сборки из под Ubuntu. Ссылка на инструкцию по сборке находится в файле README.md Прямая ссылка на инструкцию по сборке. WebGL:Простой треугольник без трансформаций. Для трансформаций можно использовать glMatrix, как в примере: https://plnkr.co/edit/qT6ZTwvncLPRamK5?preview На русском:На английском:Исходники примера: Содержание темы Запись в блоге Краткое описание, что такое WebGL, взятое с https://developer.mozilla.org/... /WebGL_API (там же ссылки на документацию и обучающие материалы):
Туториалы:
Литература:
5
|
|||||||||||||||||
(| 19.11.2017, 16:43 | |
|
Ответы с готовыми решениями:
200
Литература WebGL Не отрисовывается фигура в Webgl Из какого 3d редактора и как можно экспортировать анимацию в WebGL? |
| 26.11.2017, 19:27 [ТС] | ||||||
|
https://jsfiddle.net/8Observer8/xuz9wcxm/
1
|
||||||
| 26.11.2017, 19:32 [ТС] | ||||||
|
WebGL 2.0. Масштабирование квадрата с помощью библиотеки glMatrix
https://jsfiddle.net/8Observer8/6pLyzwaj/
1
|
||||||
| 27.11.2017, 21:39 [ТС] | ||||||
|
WebGL 1.0. Вращение перед перемещением по клику мыши
https://jsfiddle.net/4fxmLhmc/
1
|
||||||
| 27.11.2017, 21:44 [ТС] | ||||||
|
WebGL 2.0. Вращение перед перемещением по клику мыши
https://jsfiddle.net/cLxuo6jx/
1
|
||||||
| 27.11.2017, 22:31 [ТС] | ||||||
|
WebGL 1.0. Вращение после перемещения по клику мыши
https://jsfiddle.net/ue911jao/
1
|
||||||
| 27.11.2017, 22:41 [ТС] | ||||||
|
WebGL 2.0. Вращение после перемещения по клику мыши
https://jsfiddle.net/55xx969b/
1
|
||||||
| 28.11.2017, 10:42 [ТС] | ||||||
|
WebGL 1.0. Масштабирование по клику мыши
https://jsfiddle.net/m86tq8t2/
1
|
||||||
| 28.11.2017, 10:48 [ТС] | ||||||
|
WebGL 2.0. Масштабирование по клику мыши
https://jsfiddle.net/kffdhsvw/
1
|
||||||
| 29.11.2017, 11:35 [ТС] | ||||||
|
WebGL 1.0. Перемещение квадрата с помощью клавиш WASD и клавиш-стрелок
https://jsfiddle.net/tqnfyy53/
1
|
||||||
| 29.11.2017, 11:40 [ТС] | ||||||
|
WebGL 2.0. Перенос квадрата с помощью клавиш WASD и клавиш-стрелок
https://jsfiddle.net/14z5m5hh/
1
|
||||||
| 30.11.2017, 08:25 [ТС] | ||||||
|
WebGL 1.0. Наложение текстуры на квадрат
1
|
||||||
| 30.11.2017, 08:31 [ТС] | ||||||
|
WebGL 2.0. Наложение текстуры на квадрат
https://jsfiddle.net/gd2uo3jg/
1
|
||||||
| 08.12.2017, 22:52 [ТС] | ||||||
|
WebGL 1.0. Анимация вращения
https://jsfiddle.net/748jf6qw/
2
|
||||||
|
с++
1282 / 523 / 225
Регистрация: 15.07.2015
Сообщений: 2,562
|
||
| 08.12.2017, 23:02 | ||
0
|
||
Сообщение от 8Observer8
| 08.12.2017, 23:07 [ТС] | ||||||
|
WebGL 2.0. Анимация вращения
https://jsfiddle.net/8Observer8/fLumroxa/
1
|
||||||
|
Юзер с абсолютным слухом
709 / 489 / 195
Регистрация: 17.12.2010
Сообщений: 1,428
|
|||||||||||
| 09.01.2018, 11:07 | |||||||||||
|
Программное рисование кругового узора и других замысловатых математических рисунков.
8Observer8, я сделал небольшое изменение строк с 56 по 65 в Вашем примере в посте #7 в этой теме, задал размер точки в один пиксель и добился рисования чуть более сложных рисунков, как на прикреплённых скринах. Соответственно, вариант 1:
3
|
|||||||||||
| 09.01.2018, 22:36 [ТС] | |
|
Вывод текста
Живая демка + исходники: https://plnkr.co/edit/GqmJ4uB5... ?p=preview Скачать исходники архивом: drawing-text.zip Шрифты были созданы из TrueType и OpenType с помощью программы Bitmap Font Generator гифка побольше
Кликните для увеличения:
1
|
|
| 10.01.2018, 07:20 | |
|
Опан, спасибо, приятно было увидеть хоть какое-то творчество в этой нескончаемой унылой череде примеров. Таких штучек можно изготовить немало с помощью SuperFormula (SuperEllipse). Ну то наверное Вы в курсе
0
|
|
| 10.01.2018, 07:33 [ТС] | |
|
1
|
|
| 10.01.2018, 11:16 | |
|
Да, занятно, спасибо
Но вот.. (чисто мое мнение) подход какой-то.. ну "мелкотравчатый", что ли.. Типа выскочил, нахрюкал points/lines, абы как раскрасил - и все, убежал. А по-взрослому? Т.е. полноценная полигонная модель с нормалями и UV, ну и желательно adaptive resolution. И вот у меня почему-то впечатление что жаба-скрыпт (и его поклонники) этим заниматься не будут. Вот пошуршать десятком строк, пустить пыль в глаза, ткнуть в нос exe-шкой - то да. А работать - неееее. Ну что поделаешь, технология такая. Или я ошибаюсь? 
1
|
|
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
| 10.01.2018, 11:16 | |
|
WebGL - глубина отрисовки объектов Не правильное вращение пирамиды WebGL WebGL, детализация текстуры при приближении Технология освещения и нормали. Не могу разобраться (WebGL) Нужно сделать ёлку на Webgl Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Запустил конкурс "тем и промптов для текстовых квестов созданных почти чисто ИИ"
Adler 06.10.2026
Всем привет!
За последние три-четыре дня я создал более 16 текстовых квестовых игр используя преимущественно по одному запросу к ИИ на игру. Мне так понравилось смотреть все ветки/ сцены во всех. . .
|
ИИ не может найти нужный язык в списке
Supersumestria 05.10.2026
Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык.
Возвращает он вот это:
https:/ / i. **********/ vqBWLe2. png
Нужную строчку в 3й колонке просто выдумал. .
Это. . .
|
Новая последняя моя музыка в SUNO
zorxor 05.10.2026
Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor.
Это. . .
|
Nekobox - outbounds[0].transport: unknown transport type: raw
damix 01.10.2026
Фикс ошибки
Правым кликом по серверу -> отладочная информация -> edit
Заменить "net": "raw", на "net": "tcp",
Нажать кнопку reload.
|
|
Программный домашний кинотеатр
russiannick 27.09.2026
Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js.
В помощники взял Яндекс-Алису.
Было создано три зала на разные интересы.
исторические и ретро
сериал Хичкок. . .
|
Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого
zorxor 21.09.2026
Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .
|
Мобильное приложение ColorStep
pavlinmavlin 17.09.2026
Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#.
Название изменил на ColorStep.
Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .
|
Запрет дублирования строк в табличной части
Maks 13.09.2026
Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами:
- ВидТО (СправочникСсылка. ВидыТО);
- ВидГСМ. . .
|
Наверх