Примеры построения графиков в 2D и 3D на шейдерном OpenGL и WebGL

Gamedev и графика Статьи, материалы про gamedev и графику
#1

Примеры могут быть на любом языке программирования, но главное, чтобы они были на шейдерном OpenGL или WebGL, а не на deprecated/legacy OpenGL версии 1 из 90-х.

Я использую два языка: C# и TypeScript. Для C# я выбрал библиотеку OpenTK для доступа к OpenGL, как самую популярную, на данный момент, и самую живую. Устанавливается эта библиотека через NuGet. Здесь туториал, как создать первое окно с помощью OpenTK из консольного проекта: https://opentk.net/learn/chapter1/1-creating-a-window.html Порт уроков из learnopengl.com на OpenTK на официальном сайте: https://opentk.net/learn/index.html

С помощью OpenTK можно создавать приложения c 2D и 3D графикой для: Windows, Linux, macOS, Android и iOS. Компания Microsoft сделала Fork библиотеки OpenTK и встроила её в платформу Xamarin. Здесь хороший туториал, как начать использовать OpenGL на Xamarin: Creating Cross Platform Games with Xamarin Первые 3 урока бесплатные, а остальные можно бесплатно скачать за триал-период с сайта Packtpub по этой ссылке.

OpenTK имеет контролл OpenTK.GLControl, который можно строить в WPF и WinForms приложение, чтобы в одном окне можно было расположить 2D/3D графику и стандартнрое GUI. Устанавливается через NuGet. Я сделаю примеры с рисованием 2D/3D графиков на WPF и WinForms с помощью шейдерного OpenGL версии 3.

Содержание:

Обучающие материалы по не игровой 2D и 3D графике на OpenGL
#2

График синуса на C# и OpenGL 3

Исходники: https://github.com/8Observer8/Sin_ConsoleAppOpenTkOpenGL30CSharp

#3

В вебе для графиков d3.js часто используют (в простых случаях вроде без WebGL).

Мои примеры простых графиков + карта через Leaflet:

https://alexp11223.github.io/D3FlightsDataVisualization/index.html

Внизу ссылка на исходник на Гитхабе.

#4

Что может означать ошибка при запуске

Failed to compile the VertexShader shader. Message: ERROR: 0:1: '' :  version '130' is not supported
Failed to compile the FragmentShaderArb shader. Message: ERROR: 0:1: '' :  version '130' is not supported

В какую сторону копать?

#5

А я думал, что наоборот, что d3.js проще. Просто на шейдерах очень много кода получается: матрицы трансформаций, матриц вида, матрица проекции. Очень важно на графике выводить текст, а на WebGL нет вывода текста по умолчанию, поэтому нужно шрифты загружать, например, после обработки BMFont. Нужно организовать переключение шейдерных программ с цветной на текстурированную, чтобы график рисовать в цвете, а буквы выводить в виде текстур. Файл с шрифтом нужно распарсить. Сделать заданную толщину у графика на WebGL - непростая задача, потому что WebGL и шейдерный OpenGL не умею рисовать линии с заданной толщиной, поэтому нужно уметь рисовать с помощью треугольников. Например, линия рисуется в виде прямоугольника, который состоит из двух треугольников. Рисовать графики на D3 намного проще, чем на WebGL. Но шейдеры дают больше возможностей и позволяют строить графики в 3D, то есть, например, можно построить 3D диаграммы в виде цилиндров и вывести текст внутри 3D пространства.

#6

Так я и сказал это ) но оно вроде позволяет и вебгл, и что угодно.

#7

Пишет, что версия OpenGL 3.0 не поддерживается на данной машине. Вы на ноутбуке запускаете?

#8

Извините. Я неправильно прочитал. Я прочитал “в простых случаях используют WebGL”

#9

Это вообще извращение - Visual Studio for Mac
Я подозревал, что будут ошибки )
Но скомпилировалось без особых проблем, а при запуске черное окно и эти сообщения в консоли.

Так это железо виновато? Или какой-то софт?

#10

А точнее, он проще с точки зрения быстрого старта. Но когда серьёзно нацелен изучать WebGL и OpenGL, то проще на шейдерах, потому что идёт тренировка при рисовании разной 2D/3D графики на шейдерах. Получается, уже проще с языка на язык переносить, накапливаются наработки, знания, навыки. Не нужно переключаться с разных библиотека, потому что OpenGL и WebGL выглядит одинаково. А ещё идёт чистая математика в компьютерной графике, появляется полная свобода. Тут ещё кому что ближе, то и выбирают. Я любые типы графиков буду строить на WebGL и OpenGL - даже отрезок буду нарисовать с текстом по осям. Сейчас WebGL 1.0 поддерживается на всех платформах. Проще то, чем давно занимаешься.

#11

Меня удивляет, что выдало именно такой тип ошибки при запуске на macOS. У меня же подключение идёт OpenTK.dll, то есть “.dll” - это же библиотека для Windows, а на macOS должны быть другой формат динамической библиотеки. А на macOS можно посмотреть какая используется версию OpenGL? Я могу добавить вывод версии OpenGL.

#12

Я в шоке. Получается, что библиотеки “.dll” работают и на macOS тоже?

Я добавил в код строку:

Console.WriteLine("OpenGL Version: " + GL.GetString(StringName.Version));

Она выводит версию OpenGL:
SinOpenGLVersion

Пример использует OpenGL версии 3.0. Я обновил пример на GitHub.

#13

6 пост был перенесен в новую тему: .NET на MacOS и Linux?

#14

Сперва оно потребовало включить AutoGenerateBindingRedirects

#15

А если сейчас запустить, то какую версию OpenGL выводит? Интересно, почему не запускается и говорит, что версия OpenGL ниже 3.0.

#16

OpenGL Version: 2.1 INTEL-14.3.9

1 лайк
#17

Под Windows проблем нет

OpenGL
OpenGL831×544 6.62 KB

1 лайк
#18

Я всегда думал, что OpenGL версии 3.0 уж точно везде есть. Я сделал ещё один проект на OpenGL версии 2.0, попробуйте на macOS: https://github.com/8Observer8/Sin_ConsoleAppOpenTkOpenGL20CSharp

Я просто шейдеры немного поменял. Изменил версию с “130” на “110”. Заменил “in” на “attribute”, убрал строку “out vec4 fragColor;” и заменил “fragColor” на “gl_FragColor”

VertexShader.glsl

#version 110

attribute vec2 position;

uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;

void main()
{
	gl_Position = projectionMatrix * viewMatrix * vec4(position, 0.0, 1.0);
}

FragmentShader.glsl

#version 110

void main()
{
	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
#19

Этот вариант заработал и тут
Снимок экрана 2019-12-13 в 00.52.08

1 лайк
#20

@BlackFregat, спасибо! Для меня большая радость узнать, что проект созданный в VS на Windows запускается на VS на Mac. Я думаю, что в MonoDevelop на Linux тоже должен проект открыться и запуститься.