Форум программистов, компьютерный форум, киберфорум
Наши страницы
8Observer8
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 2.

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

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

Написал пример для начинающих в WebGL на TypeScript. Пример рисует треугольник: https://plnkr.co/edit/PkqSZGwhv9zKSnUNSiXo?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/
Изображения
 
Размещено в Без категории
Просмотров 65 Комментарии 0
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.