Пример для начинающих в компьютерной графике на WebGL и TypeScript

Запись от 8Observer8 размещена 07.10.2019 в 15:22

Показов 2088 Комментарии 0

Метки typescript, webgl

Содержание блога

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

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

Отмечу, что размер, положение и угол поворота треугольника задаётся в файле ShaderProgram в виде, соответственно: матрицы масштабирования, матрицы поворота, и матрицы переноса:

JavaScript
1
2
3
4
5
6
7
let modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0, 0.5, 0));
mat4.rotateZ(modelMatrix, modelMatrix, 20.0 * Math.PI / 180.0);
mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.5, 0.5, 1));
 
let u_ModelMatrix = gl.getUniformLocation(this.program, "u_ModelMatrix");
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);

Я использую библиотеку glMatrix для работы с матрицами и векторами: http://glmatrix.net/

Рекомендую книгу на русском: WebGL. Программирование трехмерной графики https://www.ozon.ru/context/detail/id/31239396/
Либо её оригинал на английском: WebGL Programming Guide https://sites.google.com/site/webglbook/

Метки typescript, webgl

Размещено в Без категории

« Инструкция. Добавляем OpenGL графику на WPF форму с помощью OpenTK.GLControl Главная страница Книги по математике в компьютерной графике для начинающих »

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

8Observer8 8Observer8 вне форума

Регистрация 05.10.2013
Адрес Саратов
Сообщений 8,116
Записей в блоге 243

Новые блоги и статьи Все статьи Все блоги /
Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .
Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .	[EasyBuilder Pro] Памятка по разработке для панелей Weintek ФедосеевПавел 26.08.2026 Памятка по разработке для панелей Weintek ВВЕДЕНИЕ Ранее, при реализации проектов основное внимание уделял разработке управляющей программы для контроллера, а панели оператора доставалось время. . .	Модель по догадкам anaschu 25.08.2026 Прошло две недели. Я уже рассказывал, как разговаривал с сотрудниками у сортировки и как понял, что главная ветка — не про приёмку, а про отбор. Но тогда я думал, что понял механику. На этой неделе я. . .	Запись в регистр сведений независимо от заполненности табличной части Maks 25.08.2026 Реализация из решения ниже выполнена на нетиповом документе с несколькими табличными частями, разработанного в КА2. Задача: Обеспечить запись документа в регистр сведений независимо от. . .

Наверх

Сообщение форума

Отменить изменения