Форум программистов, компьютерный форум, киберфорум
Webgl
Форум программистов и сисадминов Киберфорум > Блоги > webgl
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  
Старый
Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js
Запись от Reangularity размещена 21.10.2025 в 21:27 / Vue/React/Angular/Svelte notes
Показов 6498 Комментарии 0
Нажмите на изображение для увеличения Название: Запуск модели YOLO в браузере с ONNX, WebAssembly и Next.js.jpg Просмотров: 614 Размер: 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
Показов 11636 Комментарии 0
Метки javascript, webgl
Содержание блога

На русском





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





Исходники примера:
Старый
Проблемы с Kotlin и Wasm при создании игры
Запись от GameUnited размещена 03.07.2025 в 21:23 / The biggest game world
Показов 8076 Комментарии 0
Нажмите на изображение для увеличения Название: Проблемы с KotlinWasm при создании игры.jpg Просмотров: 600 Размер: 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 25.03.2026 в 02:50
Показов 10891 Комментарии 0
Метки javascript, webgl
Содержание блога
  1. Все примеры из книги Мацуды и Ли в песочнице JSFiddle
  2. Рисование точки заданного размера
  3. Передача координаты точки из главной программы в программу вертексного шейдера
  4. WebGL 1.0. Рисование точек в цикле по кругу по формулам
  5. WebGL 2.0. Рисование точек в цикле по кругу по формулам
  6. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
  7. WebGL 1.0. Передача цвета точки из главной программы в программу фрагментного шейдера
  8. WebGL. 1.0. Рисование точки с применением буферного объекта (VBO - Vertex Buffer Object)
...
Старый
Рейтинг: 5.00. Голосов: 1.
Основы WebGL. Простой треугольник
Запись от 8Observer8 размещена 01.07.2025 в 19:03 / Блог 8Observer8. Обновил(-а) 8Observer8 12.08.2025 в 13:48
Показов 11125 Комментарии 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
Показов 1632 Комментарии 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
Показов 2768 Комментарии 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
Показов 1628 Комментарии 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
Показов 2805 Комментарии 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
Показов 2595 Комментарии 0
Содержание блога

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

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

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

В примере загружаются стандартные объекты Blender из формата dae без текстур. Цвет каждого объекта задаётся в самой программе - цвет через uniform-переменную передаётся в фрагментный шейдер. Библиотека...
Старый
Рейтинг: 5.00. Голосов: 1.
Пример загрузки кубика из gltf 2.0 на JavaScript и WebGL
Запись от 8Observer8 размещена 14.12.2021 в 15:38 / Блог 8Observer8
Показов 1428 Комментарии 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
Показов 1603 Комментарии 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
Показов 1230 Комментарии 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
Показов 2311 Комментарии 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.
Примеры с 2D/3D графикой на OpenGL/WebGL, C#/OpenTK, JavaScript, TypeScript, Python и C++
Запись от 8Observer8 размещена 29.02.2020 в 23:36 / Блог 8Observer8. Обновил(-а) 8Observer8 23.03.2026 в 04:30
Показов 21752 Комментарии 62
Содержание блога

Одна из лучших книг для начинающих: "WebGL. Программирование трехмерной графики". Она на WebGL на JavaScript, но подходит для понимания базового OpenGL на любых языка:
Простые игрушки:...
Старый
Рейтинг: 5.00. Голосов: 2.
Вращающийся кубик на шейдерах c Diffuse и Ambient освещением на WebGL и TypeScript
Запись от 8Observer8 размещена 13.02.2020 в 22:55 / Блог 8Observer8
Показов 352 Комментарии 0
Метки typescript, webgl
Чуть позже, не успел.
Старый
Рейтинг: 5.00. Голосов: 1.
Понг на TypeScript и WebGL 1.0 из текстового туториала от NoobTuts
Запись от 8Observer8 размещена 15.12.2019 в 23:26 / Блог 8Observer8
Показов 1069 Комментарии 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
Показов 1312 Комментарии 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
Показов 2067 Комментарии 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
Показов 1711 Комментарии 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
Показов 1292 Комментарии 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
Показов 1269 Комментарии 0
Метки typescript, webgl
Я вам приготовил очень короткий пример в песочнице, где вы можете авторизоваться через GitHub одни нажатием кнопки "Войти через Github" в верхнем правом углу. После авторизации можно сделать копию примера, нажав кнопку Fork в левом верхнем углу. Теперь вы можете приступить к программированию на WebGL и...
Старый
Рейтинг: 5.00. Голосов: 1.
Руководство по Скайпу по TypeScript и WebGL
Запись от 8Observer8 размещена 22.07.2019 в 10:00 / Блог 8Observer8
Показов 888 Комментарии 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
Показов 1877 Комментарии 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
Показов 4592 Комментарии 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
Показов 2316 Комментарии 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
Показов 1703 Комментарии 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
Показов 18105 Комментарии 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
...
1 из 2 1 2 »
Новые блоги и статьи
Из невошедшего на форум (диалог с ИИ-гугла)
zorxor 29.07.2026
А вот, что интересно, сказал мне ИИ-гугла: Этот текст — эмоциональный пост пользователя под ником zorxor на интернет-форуме (вероятно, посвященном мистике, непознанному или альтернативной науке). . . .
Был праздник вчера, а я и не знал.
kumehtar 28.07.2026
27. 07. 2026г. Intel Core 2 Duo исполнилось 20 лет Новости компьютерного мира и их обсуждение (4) Салют, шампанское, овации! :drink:
 Нейтральные знания, чистый код - бла-бла-бла-бла, на самом деле кликбейт и самореклама, плагиат, и вот почему
Hrethgir 27.07.2026
То-есть отклонение такой публикации говорит само за себя, и пусть только возьмут на вооружение после отклонения публикации - это будет чистейшим актом плагиата. Отклонял Хабр. Дословно, отклонённая. . .
тв 16 бой ии
anaschu 27.07.2026
Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .
мв 15. непроверенное, возможно, глюк
anaschu 27.07.2026
НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .
Очистка реквизитов и табличных частей документа при копировании (вариант 2)
Maks 26.07.2026
Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРаботу", разработанного в КА2. Задача: Заменить алгоритм запрета копирования документов для сотрудников с ролью "Стажер",. . .
Доктрина интенционального знания - Доктрина для портала "Срез".
Hrethgir 25.07.2026
Может найдётся кто захочет оценить доктрину. . . Написания правил участия для меня роскошь, требующая лимита времени, поэтому все сообщения не прошедшие модерацию будут видны только участникам портала,. . .
сукцессия 44. Решил подать на припринт в межународные сервисы препринтов. Но нужно одобрение от ученых
anaschu 25.07.2026
Английский вариант. Пока кто то не одобрит мою личность, мне не получиться это опубликовать на препринте. Но заявку на публикацию статьи я сегодня подам.
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru