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

Получение WebGL контекста на языке TypeScript в песочнице

Запись от 8Observer8 размещена 22.07.2019 в 13:27
Обновил(-а) 8Observer8 22.07.2019 в 14:09

Я вам приготовил очень короткий пример в песочнице, где вы можете авторизоваться через GitHub одни нажатием кнопки "Войти через Github" в верхнем правом углу. После авторизации можно сделать копию примера, нажав кнопку Fork в левом верхнем углу. Теперь вы можете приступить к программированию на WebGL и GLSL, сохранять свои примеры на кнопку Save в песочнице, делить ссылкой с друзьями в VK и с форумчанами. Каждый сможет запускать ваши работы на свой ОС и даже на смартфоне или планшете под управлением ОС: Android и iOS. Представляете, как быстро - вы нажимаете кнопку Save и ваше приложение доступно на всех основных платформах, где есть браузер с поддержкой WebGL.

WebGL и OpenGL - это практически одно и тоже. Сравните код на C++ и на TypeScript, который задаёт цвет фона (gl.сlearColor) и заливает весь экран заданным цветом (gl.clear). В данном случае весь холст будет залит тёмно-зелённым цветом:

C++
1
2
glClearColor(0.0f, 0.4f, 0.0f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
Javascript
1
2
gl.clearColor(0.0, 0.4, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
То есть вы можете читать книгу Мацуды и Ли по WebGL (WebGL. Программирование трехмерной графики) и переводить примеры на C++, C#, TypeScript, Java, и т.д. На всех этих языках код будет почти одинаковый, за исключением незначительных нюансов.

Объясню подробно работу примера, что я привёл выше. Ещё раз приведу ссылку на песочницу с примером.

Первое, что нужно - это создать HTML5 элемент <canvas> в теле index.html:

HTML5
1
2
3
4
5
<body>
    <canvas id="renderCanvas" width="256" height="256">
        Your browser does not support HTML5 "canvas" element.
    </canvas>
</body>
Из кода получаем ссылку на элемент <canvas> по Id:

Javascript
1
let canvasElement = document.getElementById("renderCanvas") as HTMLCanvasElement;
Получаем WebGL контекст рисования по ссылке на полученный элемент <canvas>:

Javascript
1
let gl = canvasElement.getContext("webgl");
Задаём цвет очистки холста тёмно-зелённым:

Javascript
1
gl.clearColor(0.0, 0.4, 0.0, 1.0);
Очищаем холст, используя установленный ранее цвет очистки холста:

Javascript
1
gl.clear(gl.COLOR_BUFFER_BIT);
Весь код:

Program.ts

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
class Program
{
    public static Main(): void
    {
        let canvasElement = document.getElementById("renderCanvas") as HTMLCanvasElement;
        let gl = canvasElement.getContext("webgl");
 
        gl.clearColor(0.0, 0.4, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
    }
}
 
Program.Main();
Изображения
 
Размещено в Без категории
Просмотров 123 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru