Форум программистов, компьютерный форум, киберфорум
Webgl
Форум программистов и сисадминов Киберфорум > Блоги > webgl
Войти
Регистрация
Восстановить пароль
Блоги Социальные группы Поиск Сообщения за день Заказать работу  
Старый
Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js
Запись от Reangularity размещена 21.10.2025 в 21:27 / Vue/React/Angular/Svelte notes
Показов 3205 Комментарии 0
Нажмите на изображение для увеличения Название: Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js.jpg Просмотров: 112 Размер: 116.2 Кб ID: 11322
Помню, как лет пять назад коллега спросил: можно ли запустить детекцию объектов прямо в браузере? Тогда я посмеялся - какой браузер, нужна серверная ферма с GPU. Сейчас же распознавание лиц в видеочате или детекция жестов работают локально, и никто уже не удивляется. WebAssembly перевернул представление о том, что может JavaScript. ONNX Runtime Web позволяет запускать модели машинного обучения с производительностью,...
Аватар для Reangularity
Старый
Основы WebGL. Раскрашивание вершин с помощью VBO
Запись от 8Observer8 размещена 05.07.2025 в 22:35 / Блог 8Observer8. Обновил(-а) 8Observer8 12.08.2025 в 13:49
Показов 11247 Комментарии 0
Метки javascript, webgl
Содержание блога

На русском





На английском





Исходники примера:
Старый
Проблемы с Kotlin и Wasm при создании игры
Запись от GameUnited размещена 03.07.2025 в 21:23 / The biggest game world
Показов 6510 Комментарии 0
Нажмите на изображение для увеличения Название: Проблемы с KotlinWasm при создании игры.jpg Просмотров: 305 Размер: 241.4 Кб ID: 10953
В современном мире разработки игр выбор технологии - это зачастую балансирование между удобством разработки, переносимостью и производительностью. Когда я решил создать свою первую веб-игру, мой выбор пал на Kotlin/Wasm и Compose Multiplatform - перспективные технологии, обещающие возможность писать код на любимом языке с запуском на любой платформе.

Kotlin/WebAssembly (или Kotlin/Wasm) - экспериментальная технология, компилирующая код на Kotlin в бинарный...
Аватар для GameUnited
Старый
Рейтинг: 5.00. Голосов: 2.
Содержание темы с примерами на WebGL
Запись от 8Observer8 размещена 01.07.2025 в 19:13 / Блог 8Observer8. Обновил(-а) 8Observer8 12.08.2025 в 13:48
Показов 10599 Комментарии 0
Метки javascript, webgl
Содержание блога
  1. Все примеры из книги Мацуды и Ли в песочнице JSFiddle
  2. Пример выводит точку красного цвета размером 10 пикселей на WebGL 1.0 и 2.0
  3. WebGL 1.0. Передача координаты точки из главной программы в программу вертексного шейдера
  4. WebGL 2.0. Передача координаты точки из главной программы в программу вертексного шейдера
  5. WebGL 1.0. Рисование точек в цикле по кругу по формулам
  6. WebGL 2.0. Рисование точек в цикле по кругу по формулам
  7. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
...
Старый
Рейтинг: 5.00. Голосов: 1.
Основы WebGL. Простой треугольник
Запись от 8Observer8 размещена 01.07.2025 в 19:03 / Блог 8Observer8. Обновил(-а) 8Observer8 12.08.2025 в 13:48
Показов 10821 Комментарии 0
Метки javascript, webgl
Содержание блога

Простой треугольник без трансформаций. Для трансформаций можно использовать glMatrix, как в примере: https://plnkr.co/edit/qT6ZTwvncLPRamK5?preview

На русском:





На английском:





Исходники примера:
Старый
Рейтинг: 5.00. Голосов: 2.
Демка от первого лица на WebGL для осмотра результата туториала: Blender: Interior Environments for Games by Alan Thorn
Запись от 8Observer8 размещена 21.05.2023 в 21:53 / Блог 8Observer8
Показов 1412 Комментарии 0
Метки blender, gamedev, webgl
Содержание блога

Сделал демку на WebGL 1.0 (OimoPhysics, glMatrix), в которой можно от первого лица перемещаться (WASD + мышь) и осматривать результат выполнения туториала "Blender: Interior Environments for Games by Alan Thorn"

На трубу надо было тоже запечь тень, а то она выделяется без тени, но в туториале так было. Позже запеку.
Старый
Рейтинг: 5.00. Голосов: 1.
Рисование домика в 2D с GUI на WebGL 1.0 (JavaScript, TypeScript) и OpenGL 2.1 (Python, C++, Qt, PyQt, PySide)
Запись от 8Observer8 размещена 05.02.2023 в 16:34 / Блог 8Observer8
Показов 2398 Комментарии 1
Содержание блога

Рисование домика в 2D с GUI на:
  • JavaScript, WebGL 1.0
  • TypeScript, WebGL 1.0
  • Python, PyQt6, OpenGL 2.1
  • Python, PySide6, OpenGL 2.1
  • C++, Qt6, OpenGL 2.1
и размышления по поводу инструментов программировани­­­­я рисования графики

Исходники на GitHub:
...
Старый
Рейтинг: 5.00. Голосов: 1.
Рисование коллайдеров типов Box и Sphere созданных с помощью физического движка Cannon-ES на WebGL и TypeScript
Запись от 8Observer8 размещена 05.08.2022 в 14:11 / Блог 8Observer8
Показов 1417 Комментарии 0
Метки typescript, webgl
Содержание блога

Класс CannonDebugger я взял из этого сообщения.

На Sandbox скройте и откройте предварительный просмотр, чтобы увидеть результат нажатием сочетаний клавиш: Ctrl+Shift+D

Инструкция по сборке:
  • Установить пакеты глобально: `npm i -g typescipt parcel browserify uglify-js http-server`
  • Установить пакеты локально: `npm i`
  • Запустить parcel для отладки
...
Старый
Рейтинг: 5.00. Голосов: 1.
Демка перемещения Jill с помощью физического движка Ammo.js (порт Bullet Physics)
Запись от 8Observer8 размещена 16.07.2022 в 14:42 / Блог 8Observer8
Показов 2523 Комментарии 0
Метки gamedev, webgl
Содержание блога

Демка перемещения Jill с помощью физического движка Ammo.js (порт Bullet Physics). Исходники контроллера управления от третьего лица в этой теме: Управление героем стрелками в 3D, вид от 3-го лица, на WebGL
Старый
Рейтинг: 5.00. Голосов: 2.
Игровая демка "Сапёр" на чистом WebGL 1.0 и JavaScript из туториала "Unity 2D Minesweeper Tutorial" от NoobTuts
Запись от 8Observer8 размещена 06.03.2022 в 11:49 / Блог 8Observer8
Показов 2326 Комментарии 0
Содержание блога

Игровая демка "Сапёр" на чистом WebGL 1.0 и JavaScript портированная из туториала Unity 2D Minesweeper Tutorial от NoobTuts

Название: 01 - you win.png Просмотров: 7297 Размер: 5.7 Кб Название: 02 - you lose.png Просмотров: 7236 Размер: 7.2 Кб

Для создания игровой демки использовались инструменты:
  • Легковесный бесплатный редактор кода VSCode, который
...
Старый
Рейтинг: 5.00. Голосов: 1.
Загрузка 3D-моделей из Blender из формата dae без текстур на WebGL 1.0. Физический движок Cannon.js для падения кубиков
Запись от 8Observer8 размещена 08.01.2022 в 18:14 / Блог 8Observer8
Показов 1166 Комментарии 0
Содержание блога

В примере загружаются стандартные объекты Blender из формата dae без текстур. Цвет каждого объекта задаётся в самой программе - цвет через uniform-переменную передаётся в фрагментный шейдер. Библиотека...
Старый
Рейтинг: 5.00. Голосов: 1.
Пример загрузки кубика из gltf 2.0 на JavaScript и WebGL
Запись от 8Observer8 размещена 14.12.2021 в 15:38 / Блог 8Observer8
Показов 1230 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

WebGL-демка в песочнице

Исходники: load-cube-from-gltf2-webgl-js.zip (4.1 Кб)

PHP/HTML
1
2
3
4
5
6
7
8

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading a
...
Старый
Рейтинг: 5.00. Голосов: 1.
Спрайтовая анимация "Fang Idle" на WebGL 2.0 и JavaScript
Запись от 8Observer8 размещена 13.12.2021 в 13:00 / Блог 8Observer8
Показов 1237 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

PHP/HTML
1
2
3
4
5
6
7

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,
...
Старый
Рейтинг: 5.00. Голосов: 2.
Спрайтовая анимация "Fang Idle" на WebGL 2.0 и TypeScript
Запись от 8Observer8 размещена 13.12.2021 в 12:52 / Блог 8Observer8
Показов 1075 Комментарии 0
Метки gamedev, typescript, webgl
Содержание блога

Для сборки и запуска примера нужно глобально установить следующие пакеты командой:

npm i -g typescript browserify uglify-js http-server
Зайти в папку с примером и установить локальные пакеты из package.json командой:

npm i
Ввести команду сборки:...
Старый
Рейтинг: 5.00. Голосов: 1.
Движение ромба зажатыми левой и правой кнопками мыши. WebGL 1.0, JavaScript ES5
Запись от 8Observer8 размещена 16.04.2020 в 17:22 / Блог 8Observer8
Показов 1986 Комментарии 0
Метки gamedev, javascript, webgl
Содержание блога

Cкачать исходники: move-rhombus-by-mouse-webgl10-es5.zip Запустить в песочнице по клику. Чтобы отображался русский шрифт нужно локальную версию запускать с локального HTTP сервера, а не двойным кликом по index.html

index.html

PHP/HTML
1
2
3
4
5
6

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Move Rhombus by Mouse. WebGL 1.0, JavaScript</title>
...
Старый
Рейтинг: 5.00. Голосов: 2.
Вращающийся кубик на шейдерах c Diffuse и Ambient освещением на WebGL и TypeScript
Запись от 8Observer8 размещена 13.02.2020 в 22:55 / Блог 8Observer8
Показов 215 Комментарии 0
Метки typescript, webgl
Чуть позже, не успел.
Старый
Рейтинг: 5.00. Голосов: 1.
Понг на TypeScript и WebGL 1.0 из текстового туториала от NoobTuts
Запись от 8Observer8 размещена 15.12.2019 в 23:26 / Блог 8Observer8
Показов 949 Комментарии 0
Метки gamedev, typescript, webgl
Я переписал Понг на TypeScript и WebGL 1.0 из текстового туториала от NoobTuts: https://noobtuts.com/cpp/2d-pong-game

Запустить в браузере Release версию: http://ivan8observer8.herokuap... -noobtuts/ Я использую бесплатный хостинг для Node.js/Express, поэтому иногда нужно подождать 10 секунд, чтобы разбудить сервер.

Скачать исходники: https://github.com/8Observer8/... typescript
На GitHub есть инструкция,...
Старый
Рейтинг: 5.00. Голосов: 1.
Заливаем холст заданным цветом на WebGL 1.0 и JavaScript.
Запись от 8Observer8 размещена 20.10.2019 в 14:50 / Блог 8Observer8
Показов 1183 Комментарии 0
Метки javascript, webgl
Это одно из самых коротких приложений на WebGL 1.0 и JavaScript, которое определяет цвет фона холста и закрашивает этим цветом холст. Вы можете запустить это приложение в песочнице (на Plunker'е), посмотреть результат, прочитать код, сделать Fork, что-то закодить, сохранить, послать ссылку друзьям: https://next.plnkr.co/edit/nGf... ml&preview А главное, что такое приложение будет кроссплатформенным, то есть оно...
Старый
Рейтинг: 5.00. Голосов: 2.
Пример для начинающих в компьютерной графике на WebGL и TypeScript
Запись от 8Observer8 размещена 07.10.2019 в 15:22 / Блог 8Observer8
Показов 1884 Комментарии 0
Метки typescript, webgl
Содержание блога

Написал пример для начинающих в WebGL на TypeScript. Пример рисует треугольник: https://plnkr.co/edit/PkqSZGwh... ?p=preview

Если есть желание изучать геометрию, линейную алгебру, компьютерную графику, то пожалуйста: делайте Fork, изменяйте, сохраняйте, показывайте своё творчество друзьям.

Отмечу,...
Старый
Рейтинг: 5.00. Голосов: 3.
Теперь мой движок умеет загружать 3D модели из .dae формата
Запись от 8Observer8 размещена 16.08.2019 в 10:00 / Блог 8Observer8
Показов 1544 Комментарии 0
Содержание блога

Свой графический и игровой движок пишу в двух версиях:
  • C#, OpenTK, OpenGL 3.1
  • TypeScript, WebGL

Я покрасил стандартный объект в Blender и экспортировал объект и материалы в .dae. Далее, распарсил XML c помощью языка xPath в C#/OpenTK и TypeScript/WebGL.

Можете запустить в браузере или скачать EXE
Старый
Рейтинг: 5.00. Голосов: 1.
Загрузка шрифта для моего игрового движка на WebGL и TypeScript
Запись от 8Observer8 размещена 15.08.2019 в 17:36 / Блог 8Observer8
Показов 1155 Комментарии 0
Метки typescript, webgl
Пишу игровой и графический движок на WebGL и TypeScript. Реализовал загрузку ресурсов: шейдеров, текстур, XML-данных о шрифте. На данном этапе выводится текст на определённом шрифте.

Запустить в браузере

В этой книге Build your own 2D Game Engine есть пример в 5-й главе, как загружать и парсить шрифт из XML, который был получен с помощью программы Bitmap Font Generator из TrueType. Парсинг происходит с помощью языка запросов XPath.

Используются:
  • Редактор:
...
Старый
Рейтинг: 5.00. Голосов: 1.
Получение WebGL контекста на языке TypeScript в песочнице
Запись от 8Observer8 размещена 22.07.2019 в 13:27 / Блог 8Observer8
Показов 1166 Комментарии 0
Метки typescript, webgl
Я вам приготовил очень короткий пример в песочнице, где вы можете авторизоваться через GitHub одни нажатием кнопки "Войти через Github" в верхнем правом углу. После авторизации можно сделать копию примера, нажав кнопку Fork в левом верхнем углу. Теперь вы можете приступить к программированию на WebGL и...
Старый
Рейтинг: 5.00. Голосов: 1.
Руководство по Скайпу по TypeScript и WebGL
Запись от 8Observer8 размещена 22.07.2019 в 10:00 / Блог 8Observer8
Показов 782 Комментарии 4
Метки typescript, webgl
Я использую TypeScript c WebGL вместо JavaScript. Если не слышали, то почитайте в Википедии о TypeScript. Я использую сборку в AMD модули с RequireJS для отладки в VSCode. Для сборки в Release я использую Browserify и UglifyJS. Для написания Unit-тестов я использую Jasmine на TypeScript. Я могу руководить вами по Скайпу, чтобы научить...
Старый
Рейтинг: 5.00. Голосов: 1.
Кроссплатформен­ная змейка на WebGL и TypeScript
Запись от 8Observer8 размещена 07.07.2019 в 18:21 / Блог 8Observer8
Показов 1631 Комментарии 0
Метки gamedev, typescript, webgl
Содержание блога

Песочница: https://next.plnkr.co/edit/7gj... 4Y?preview

В песочнице можно поиграть, залогиниться через GitHub, сделать Fork (нажав кнопку "Fork), сделать свои изменения, сохранить, скопировать свою ссылку в комментарии. Можно вместе подумать, поэкспериментировать, что можно...
Старый
Рейтинг: 5.00. Голосов: 1.
Определение клика мыши по объекту на JavaScript, TypeScript, WebGL, C# и OpenGL 3.1
Запись от 8Observer8 размещена 14.06.2019 в 01:43 / Блог 8Observer8
Показов 4320 Комментарии 2
Содержание блога

Советую книгу на русском из первого сообщения темы: Небольшие примеры на WebGL. Лучше читать сразу на английском, он в книге довольно простой: WebGL Programming Guide. Matsuda & Lea. По предыдущим ссылкам можно скачать архив с примерами к книге и запустить примеры в песочнице JSFiddle (через VPN). В книге используется самописная библиотека для работы с векторами и матрицами. Лучше взять намного более продвинутую glMatrix, которая всю необходимую...
Старый
Рейтинг: 5.00. Голосов: 1.
Replacement of Canvas API with WebGL in the Snake Game
Запись от 8Observer8 размещена 08.02.2019 в 14:56 / Блог 8Observer8
Показов 2124 Комментарии 6
Метки canvas, webgl
Blog content

I just show how to rewrite drawRectangle(x, y, color, size) function from the instruction for drawing with WebGL instead of Canvas API.

Include gl-Matrix. If you will search: gl-matrix cdn you will find this: https://cdnjs.com/libraries/gl-matrix We need gl-Matrix for setting positions and sizes of squares. We will set coordinate cell and camera position using gl-Matrix functions: ortho and lootAt.

Let's include gl-Matrix, get WebGL context and...
Старый
Портирование примеров на C#/OpenGL/OpenTK с JS/WebGL из книги Коичи Мацуды и Роджера Ли
Запись от 8Observer8 размещена 10.03.2017 в 07:12 / Блог 8Observer8
Показов 1588 Комментарии 0
Метки c#, javascript, opengl, opentk, webgl
Содержание блога

Нахожусь в процессе портирования примеров на C#/OpenGL/OpenTK из книги: WebGL. Программирование трехмерной графики

К настоящему моменту портировал все примеры из второй и третьей главы: Ch02Ch03.rar

Оригинальные примеры можно скачать одним архивом с официального сайта: https://sites.google.com/site/webglbook/

Примеры этих глав перенёс на jsfiddle.net:...
Старый
Рейтинг: 5.00. Голосов: 1.
Книги по графике: HTML5 Canvas, WebGL, ThreeJS и Phaser
Запись от 8Observer8 размещена 13.09.2016 в 09:05 / Блог 8Observer8
Показов 17573 Комментарии 0
Содержание блога

На русском по WebGL:
  1. 2015 - WebGL. Программирование трехмерной графики - Коичи Мацуда, Роджер Ли -> описание -> исходники

На русском по Canvas
  1. 2016 - JavaScript для детей. Самоучитель по программированию -> описание

На английском по Canvas и WebGL:
  1. 2011 - 11 - Foundation HTML5 Animation with JavaScript - Billy Lamberta, Keith Peters -> description and source code
  2. 2012 - 05 - Core HTML5 Canvas Graphics, Animation, and Game Development
...
Старый
Рейтинг: 5.00. Голосов: 2.
Как залить свою WebGL игру на vk
Запись от 8Observer8 размещена 04.09.2015 в 14:14 / Блог 8Observer8
Показов 4954 Комментарии 0
Метки gamedev, vk, webgl
Содержание блога
Новые блоги и статьи
Инференс ML моделей в Java: TensorFlow, DL4J и DJL
Javaican 05.11.2025
Python захватил мир машинного обучения - это факт. Но когда дело доходит до продакшена, ситуация не так однозначна. Помню проект в крупном банке три года назад: команда data science натренировала. . .
Mapped types (отображённые типы) в TypeScript
Reangularity 03.11.2025
Mapped types работают как конвейер - берут существующую структуру и производят новую по заданным правилам. Меняют модификаторы свойств, трансформируют значения, фильтруют ключи. Один раз описал. . .
Адаптивная случайность в Unity: динамические вероятности для улучшения игрового дизайна
GameUnited 02.11.2025
Мой знакомый геймдизайнер потерял двадцать процентов активной аудитории за неделю. А виновником оказался обычный генератор псевдослучайных чисел. Казалось бы - добавил в карточную игру случайное. . .
Протоколы в Python
py-thonny 31.10.2025
Традиционная утиная типизация работает просто: попробовал вызвать метод, получилось - отлично, не получилось - упал с ошибкой в рантайме. Протоколы добавляют сюда проверку на этапе статического. . .
C++26: Read-copy-update (RCU)
bytestream 30.10.2025
Прошло почти двадцать лет с тех пор, как производители процессоров отказались от гонки мегагерц и перешли на многоядерность. И знаете что? Мы до сих пор спотыкаемся о те же грабли. Каждый раз, когда. . .
Изображения webp на старых x32 ОС Windows XP и Windows 7
Argus19 30.10.2025
Изображения webp на старых x32 ОС Windows XP и Windows 7 Чтобы решить задачу, использовал интернет: поисковики Google и Yandex, а также подсказки Deep Seek. Как оказалось, чтобы создать. . .
Passkey в ASP.NET Core identity
stackOverflow 29.10.2025
Пароли мертвы. Нет, серьезно - я повторяю это уже лет пять, но теперь впервые за это время чувствую, что это не просто красивые слова. В . NET 10 команда Microsoft внедрила поддержку Passkey прямо в. . .
Последние результаты исследования от команды MCM (октябрь 2025 г.)
Programma_Boinc 29.10.2025
Последние результаты исследования от команды MCM (октябрь 2025 г. ) Поскольку мы продолжаем изучать гены, которые играют ведущую роль в развитии рака, в рамках проекта "Картирование раковых. . .
Мысли в слух
kumehtar 29.10.2025
Обнаружил, что мысли лучше писать короткими фразами. Таким образом внимание читателя успевает охватить всю фразу сразу, за один раз, не соскакивая и не прерываясь. А если писать это длинным текстом,. . .
Побитовые операторы в Python
AI_Generated 28.10.2025
Побитовые операторы - это не реликт эпохи, когда каждый байт был на вес золота. Да, сейчас оперативка стоит копейки, но задачи изменились. Вместо экономии памяти приходится решать другие проблемы:. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru