Dart + WebGL так ли вкусны печеньки на тёмной стороне

в 12:48, , рубрики: dart, web, WebGL, Программирование, программирование для чайников, метки: , , ,

Dart + WebGL так ли вкусны печеньки на тёмной стороне
История развития веб-приложений очень сильно напоминает жизнь Энакена Скайуокера. Лет 15 назад они были слабыми и неуклюжими. Но вот прошло время, тестостерон бьёт в голову и наш “Энакен” падает в раскалённую лаву требований к качеству и функциональности браузерных программ. Своей единственной уцелевшей джаваскриптой он подгребает под себя землю. Здесь внимательный читатель заметит, что так мы далеко не уползём. Неожиданный, а на самом деле вполне закономерный сюжетный поворот и на сцене появляется два спасителя Dart и TypeScript. Давайте попробуем встать на сторону одного из трёх персонажей.

Почему Dart, просто потому, что он типизированный и у него си-подобный синтаксис. TypeScript на первый взгляд ничем не хуже, но Microsoft, который разрабатывает этот язык, очень любит играть в одни ворота, что не добавляет ему плюсов. К тому же Google разрабатывает VirtualMachine для Dart, что в перспективе может дать значительное преимущество в производительности этого языка.

Почему WebGL, потому, что эта технология, как и Dart, находится на передовой, и 3D в браузере, на мой взгляд, это очень интересная тема.

Ожидать от браузерной технологии качества настольных игр не имеет смысла. WebGL это OpenGL 2.0, а значит у нас в руках только вершинные и фрагментные шейдеры, а это значит, что качество картинки будет отставать от настольных игр примерно на 5 лет. Для мастеров своего дела это не преграда, танки онлайн это доказали, а в руках создателей первых танков даже этого не было.

Для начала нам потребуется IDE Dart editor. Его можно скачать с официального сайта www.dartlang.org/
В основе этой IDE лежит, многим привычный, Eclips, поэтому, желательно, скачивать версию той битности, какой у вас установлена Java. Иначе не удастся запустить.

Создадим новый проект: File->New application.

import 'dart:html';

void main() {
}

Это минимальная комплектация приложения на Dart. Остальное можно смело удалять.
Чтобы получить в свои руки элемент со страницы с определённым id, надо вызвать функцию query вот так:
var someElement = query(“#someid”);
Взглянем на минимальный html файл, который мы будем использовать для экспериментов:

<!DOCTYPE html>
<html>
<body>
<!-- Выделяем место для сообщений из кода-->
    <p id="status"></p>
<!-- Создаём холст для рисования-->
   <canvas id="canvas3d" width="800" height="600"></canvas>
<!-- Подключаем рабочий код для страницы -->
   <script src="Simple.dart" type="application/dart"></script>
   <script src="http://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
 </body>
</html>

Вот так будет выглядеть код на Dart выводящий короткое сообщение на страницу:

import 'dart:html';

void main() {
    var status = query('#status');
    status.innerHtml = '<p>Добро пожаловать в мир Dart.</p>';
}

Проверить работоспособность можно нажав кнопку запуска:
Dart + WebGL так ли вкусны печеньки на тёмной стороне
А скомпилировать для публикации в веб — нажав ПКМ на dart файл в окне с деревом файлов проекта и нажав “Run as JavaScript”:
Dart + WebGL так ли вкусны печеньки на тёмной стороне
Для вывода 3D графики нам надо получить 3D контекст от холста на котором мы будем рисовать.

//Получаем холст
canvas = document.query('#canvas3d');
//Берём webGl контекст для вывода графики
gl = (canvas.getContext("webgl")!=null)?canvas.getContext("webgl") :  
canvas.getContext("experimental-webgl");

Если после этого запроса gl равен null, значит браузер не поддерживает webGl.

if (gl == null) 
{
    status.innerHtml = '<p>Простите, ваш браузер не поддерживает WebGl</p>';
}

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

gl.viewport(0, 0, canvas.width, canvas.height);

Чтобы отобразить хоть что-то на холсте, надо загрузить два шейдера, один вершинный и один фрагментный(он же пиксельный).

//Пиксельный шейдер
String vsSource = """
    attribute vec3 aPosition;
    void main() 
    {
        gl_Position = vec4(aPosition, 1);
    }""";
   
// Фрагментный шейдер
String fsSource = """
    precision mediump float;
    uniform vec4 uColor;
    void main() {
        gl_FragColor = uColor;
    }""";
//Шейдеры написаны, теперь их надо скомпилировать и загрузить в контекст.
//Компилируем
WebGLShader vs = gl.createShader(WebGLRenderingContext.VERTEX_SHADER);
gl.shaderSource(vs, vsSource);
gl.compileShader(vs);
WebGLShader fs = gl.createShader(WebGLRenderingContext.FRAGMENT_SHADER);
gl.shaderSource(fs, fsSource);
gl.compileShader(fs);
   
// Загружаем шейдеры в GPU
WebGLProgram p = gl.createProgram();
gl.attachShader(p, vs);
gl.attachShader(p, fs);
gl.linkProgram(p);
gl.useProgram(p);
//Проверяем всё ли удачно скомпилировалось.
if (!gl.getShaderParameter(vs, WebGLRenderingContext.COMPILE_STATUS)) { 
    print(gl.getShaderInfoLog(vs));
}
   
if (!gl.getShaderParameter(fs, WebGLRenderingContext.COMPILE_STATUS)) { 
    print(gl.getShaderInfoLog(fs));
}
   
if (!gl.getProgramParameter(p, WebGLRenderingContext.LINK_STATUS)) { 
    print(gl.getProgramInfoLog(p));
}

Команда print выводит информацию в дебажную консоль используемой IDE. Если что-то пошло не так, то о причинах можно будет прочитать.
Теперь надо загрузить вершинный буфер в GPU:

//Задаём координаты в трехмерном пространстве
Float32Array vertices = new Float32Array.fromList([
                                                      -0.4, 0.4, 1,
                                                      0.4,  0.4, 1,
                                                      -0.4, -0.4,1
                                                      ]);
//Создаём буфер и загружаем в него координаты
gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, gl.createBuffer());
gl.bufferData(WebGLRenderingContext.ARRAY_BUFFER,
                      vertices, WebGLRenderingContext.STATIC_DRAW);
//Указываем сколько вершин нарисовано
int numItems = 3;
// Устанавливаем позицию, которая будет передана в вершинный шейдер
int aPosition = gl.getAttribLocation(program, "aPosition");
gl.enableVertexAttribArray(aPosition);
gl.vertexAttribPointer(aPosition, 3, WebGLRenderingContext.FLOAT, false, 0, 0);

//Очищаем холст заливая его новым цветом(RedGreenBlueAlpha)
gl.clearColor(0.9, 0.9, 0.9, 1);
gl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT);

// Устанавливаем цвет, который будет передан фрагментному шейдеру
WebGLUniformLocation uColor = gl.getUniformLocation(program, "uColor");
// Как и для очистки холста он задаётся в формате RGBA
gl.uniform4fv(uColor, new Float32Array.fromList([0.5, 0.9, 0.9, 1.0]));
   

Единственное, что нам осталось сделать, это дать команду отрисовки:

gl.drawArrays(WebGLRenderingContext.TRIANGLES, 0, numItems);

Теперь можно запустить проект и посмотреть на результат:
Dart + WebGL так ли вкусны печеньки на тёмной стороне
Скачать целый исходный файл dart вы можете здесь: dl.dropbox.com/u/41059365/Simple.dart
Целью данной статьи было показать что Dart может то же, что и JS, но удобнее. Статическая типизация и автодополнение сильно сокращают время разработки, позволяя не держать в голове ненужную информацию. Об этих и других плюшках хорошо рассказывают в видео, ссылка в первом комментарии.

Наш ситх всё еще молод, но он быстро меняется и взрослеет. WebGl крепнет вместе с ним, пусть и несколько медленее. Сравнивая Dart и JS хочется выразить глубочайшее почтение к тем, кто способен написать действительно сложные проекты на втором из них. Количество сторонних библиотек для Dart в несоизмеримо меньшем числе чем для JS, но язык и инструменты прилагающиеся к нему настолько хороши, что за новыми проектами не заржавеет. А пошаговая отладка кода, это сокровище для начинающих программистов. Печеньки на стороне Dart и вскоре он станет властелином всего интернета.

Автор: Vilyx

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js