Обзор: https://youtu.be/xxrlb3BlRn8 English: https://youtu.be/Lq2bqSj-k7E GLEngine2D Движок основан на OpenGL. Ориентирован на то что бы заменить собой функции рисования TCanvas. Возможности: -цвет в формате RGBA (альфаканал) -разные возможные варианты работы с альфаканалом (смешивание, добавление) -точки -линии -градиентные линии -кривая по типу молнии -стрелочки -треугольники -градиентные треугольники -четырёхугольники -прямоугольники -градиентные четырёхугольники -эллипс под углом -текст -отрисовка изображений TGA BMP JPEG PNG GIF (с альфаканалом и смешиванием цветов) -поддержка анимации -аппаратное сглаживание (AntiAlias) -рисование в текстуру (FBO) -экспорт текстуры в файл или в TBitMap -аппаратное ускорение -очень просто ----------------------- Page 2----------------------- 1. Инициализация Перед тем как приступить к рисованию, необходимо создать экземпляр класса TGLEngine и произвести инициализацию движка. Procedure TGLEngine.VisualInit(dc: HDC; width, height: word;AntiAlias:integer); dc – поверхность рисовани width, height — ширина и высота холста AntiAlias — сглаживание (0 — выкл) Пример Uses GlEngine // Добавляем юнит движка ... Var GLE:TGLEngine; // экземпляр класса im:Cardinal; .... GLE:=TGLEngine.Create; // создаём движок // Указываем на чём рисуем и каким размером; 2 - 2х сглаживание GLE.VisualInit(GetDC(Panel1.Handle),Panel1.ClientWidth,Panel1.ClientHeight,2); ----------------------- Page 4----------------------- 2. Подготовка к рисованию и дополнительные возможности Рассмотрим функции которые обеспечивают общие настройки движка и самого процесса рисования. Начало рисования должно начинаться со строк GLE.BeginRender; а заканчиваться строками GLE.FinishRender; Только после вызова FinishRender – будет осуществлён вывод сцены на поверхность рисования. Пример Gle.BeginRender; Gle.SetColor(1,1,1,1); Gle.DrawImage(0,0,640,480,0,false,pod); Gle.DrawImage(0,0,640,480,0,false,CreateTex); Gle.FinishRender; Для изменения размера холста используется метод: Procedure Resize(w,h:integer); w,h – новые значание ширины и высоты холста соответственно. Полезными будут следующие методы: function GetTimeDrawFrame:double; function GetFPS:Integer; GetTimeDrawFrame – возвращает время (в миллисекундах) затраченное на прорисовку последнего кадра. GetFPS – количество кадров реально нарисованных за последнюю секунду. 2.1 Работа с цветами и режимами рисования Для установки цвета выводимой фигуры (изображения) используется метод Procedure SetColor(r,g,b,a:single);Overload; Procedure SetColor(color:TGLColor);Overload; где TGLColor это TGLColor = record Red, Green, Blue, alpha:single; end; Для быстрого получения цвета в TGLColor можно использовать метод: function ColorGL(r,g,b,a:single):TGLColor; Для установки цвета фона: Procedure SetBKColor(r,g,b:single); В движке предусмотрен вывод линий со сглаживанием. Включить или выключить его можно методом: ----------------------- Page 5----------------------- Procedure AntiAlias(Enable:boolean); Обратите внимание, что значение величины сглаживания — задаётся при инициализации и потом его изменить нельзя. Если при инициализации выставить значение, которое не поддерживаетс видеокартой — то соответственно сглаживание работать не будет и его включение ничего не даст. Включить / выключить вертикальную синхронизацию модно методом: Procedure VertSynh(Enable:boolean); Сталь заливки графических примитивов (треугольников, четырёхугольников и т.д.) устанавливается при помощи метода: Procedure SetFill(Mode:TGLFill); где, Mode может принимать значения glPoint, glLine, glFill соответственно - точки, линии, сплошна заливка. Следует так же обратить внимание на то, что все цвета задаются в режиме RGBA, и следовательно имеют альфаканал. В GLEngine имеется возможность указать как работать с альфаканалом, для этого следует воспользоваться методом: Procedure SwichBlendMode(BlendMode:TGLBlendMode); где TGLBlendMode=(bmAdd,bmNormal). bmNormal — режим нормального смешивания и является режимом «по умолчанию». bmAdd – режим добавления (умножения цветов). ----------------------- Page 6----------------------- 3. Графические примитивы 3.1 Точки Для вывода на экран точки используется метод: Procedure Point(x1,y1:single); где x1 и y1 – x и y координаты точки соответственно. Так же для точки можно установить её размер: Procedure PointSize(Size:single); где Size – это размер точки в «виртуальных пикселях». При выводе точки размером например 4, в разных задачах это может быть как круг диаметром 4, так и квадрат со стороной 4. Что бы определить однозначно, что выводить используется метод: Procedure PointSmooth(Enable:Boolean); где Enable – указывает режим сглаживания точки при масштабировании. Если Enable = True, то на экране будет круг, если Enable = False – соответственно квадрат. 3.2 Линии Что бы нарисовать линию необходимо вызвать метод Procedure Line(x1,y1,x2,y2:single); где x1,y1,x2,y2 — это координаты начальной (x1,y1) и конечной (x2,y2) точек. Так же можно управлять шириной выводимых линий: Procedure LineWidth(W:single); где W – ширина линии в пикселях. Так же можно осуществить вывод градиентной линии, у которой цвет будет плавно менятьс от цвета начальной точки до цвета конечной. Procedure LineGrad(x1,y1,x2,y2:single;Color1,Color2:TGLColor); где x1,y1,x2,y2 — это координаты начальной (x1,y1) и конечной (x2,y2) точек, а Color1 и Color2 – цвет начальной и конечной точки соответственно. 3.3 Треугольники Треугольники задаются тремя точками своих вершин (X1,Y1) (X2,Y2) (X3,Y3): Procedure Triangle(x1,y1,x2,y2,x3,y3:single); Можно вывести треугольник закрашенный градиентом, для этого необходимо ещё указать цвет каждой вершины: Procedure TriangleGrad(x1,y1,x2,y2,x3,y3:single;c1,c2,c3:TGLColor); где C1,C2,C3 – соответственно цвета первой, второй и третьей вершины. 3.4 Четырёхугольники и прямоугольники Для задания прямоугольника достаточно указать две точки, по которым он будет построен ----------------------- Page 7----------------------- Procedure Bar(x1, y1, x2, y2:single); или можно указать координаты середины(X,Y) прямоугольника, его длину (W) и ширину (H), а так же угол поворота(angle): Procedure Bar(x, y, w, h, angle:single); Для не закрашенного прямоугольника (только рамочка, вне зависимости от настроек SetFill): Procedure Rectangle(x1, y1, x2, y2:single); Четырёхугольник задаётся 4 вершинами: Procedure Bar(x1, y1, x2, y2, x3, y3, x4, y4:single); Можно задать каждой вершине цвет, и тогда получим четырёхугольник с градиентной заливкой: Procedure BarGrad(x1,y1,x2,y2,x3,y3,x4,y4:single;c1,c2,c3,c4:TGLColor); Рисунок 3.4.1 «Пример выполнени Gle.BarGrad(10,10,10,470,630,470,630,10,gle.ColorGL(1,0,0,0.9),gle.ColorGL(0,1,0,0.9),gle.ColorGL(0,0,1, 0.9),gle.ColorGL(1,1,1,0.9));» 3.5 Круги, окружности и эллипс Реализуются одним методом: Procedure Ellipse(x,y,r1,r2,AngleRotate:single;n:integer); где: x,y – координаты центра r1,r2 – радиусы эллипса AngleRotate — угол поворота эллипса в градусах n – количество сегментов из которых состоит эллипс 3.6 Текст Вывести текст в нужной позиции позволяет метод: Procedure TextOut(x,y:single; text:string); ----------------------- Page 8----------------------- где: x,y – координаты начала строки text – сама строка выводимого текста Для изменения шрифта и размера текста используется метод Procedure SetTextStyle(NameFont:string; size:integer); где: NameFont – название шрифта, например «Times New Roman» size – размер шрифта. 3.7 Прочие примитив Так же доступны примитивы, которые несколько упрощают жизнь разработчику: Procedure Bolt(x1,y1,x2,y2:single); Этот метод выводит извилистую линию от точки (x1,y1) до точки (x2,y2). Procedure Arrow(x1,y1,x2,y2, size,angle:single;Solid:Boolean); Стрелочка от точки (x1,y1) в точку (x2,y2). Size – размер самой стрелочки, angle – угол наклона линий, образующих стрелочку, Solid – если равен True – стрелочка закрашенная, иначе — нет. ----------------------- Page 9----------------------- 4. Работа с изображениями 4.1 Загрузка и создание Прежде чем выводить изображение его необходимо загрузить из файла или создать. Работа с изображениями происходит по указателям. Указателем выступает переменная типа Cardinal. Пример Var im:Cardinal; GLEngine может работать с файлами следующих типов: TGA BMP JPEG PNG GIF. Загрузка изображения осуществляется вызовом метода: function LoadImage(Filename: String; var Texture : Cardinal; LoadFromRes : Boolean) : Boolean; где: Filename – строка содержащая путь к загружаемому файлу Texture – переменная которая будет содержать указатель на загруженное изображение LoadFromres – если равен True загрузка происходит из ресурсов, иначе из внешнего файла. Помимо загрузки из файла возможна загрузка из TBitMap: procedure AddBMPImage(Bmp:TBitMap;var Texture : TGLuint); однако следует иметь в виду, что BMP должен быть с 32-битной глубиной цвета. Так же можно создать «пустое» изображение: Function CreateImage(w,h:integer):Cardinal; где: w и h – это ширина и высота создаваемого изображения соответственно. Следует иметь ввиду, что имеются аппаратные ограничения на размер изображений. Как правило это 4096x4096 хотя могут быть и другие. Следует отметить что после завершения работы с изображением, необходимо освободить занимаемую им память методом: Procedure FreeImage(var Texture : Cardinal); Освобождением памяти занимается драйвер вашей видеокарты. 4.2 Отрисовка изображений Для вывода изображения используется метод: Procedure DrawImage(x,y,w,h,Angle:single;Center:boolean;Image:Cardinal); где: x,y – координаты где будет располагаться изображение w,h – ширина и высота выводимого изображения Angle – угол поворота изображения Center – если принимает значение True, то изображение будет центроваться (центр изображения будет находится в координатах X,Y), иначе — X,Y – координаты нижнего левого угла. Image — переменная изображения. Следует отметить что если перед тем как вывести изображение вызвать SetColor, то изображение будет выводиться согласно заданному цвету. 4.3 Рисование на изображении (FBO) По-умолчанию рисование происходит на компоненте, чей хендл был указан при инициализации GLEngine2D. Что бы рисовать не на компоненте, а на изображении используют метод: ----------------------- Page 10----------------------- Procedure BeginRenderToTex(Image:Cardinal; w,h:glint); где: Image – изображение на котором будет происходить рисование. W,H – ширина и высота этого изображения соответственно. Что бы вернуться к рисованию на компоненте надо вызвать метод: Procedure EndRenderToTex; Пример var CreateTex:Cardinal; ... CreateTex:=GLE.CreateImage(640,480); GLE.Resize(640,480); Gle.BeginRenderToTex(CreateTex,640,480); Gle.BarGrad(10,10,10,470,630,470,630,10,gle.ColorGL(1,0,0,0.9),gle.ColorGL(0,1, 0,0.9),gle.ColorGL(0,0,1,0.9),gle.ColorGL(1,1,1,0.9 ; gle.EndRenderToTex; 4.4 Сохранение Для сохранения изображения можно воспользоваться одним из методов: Procedure SaveImage(FileName:string;var Texture : Cardinal); где: FileName – строка, содержащая адрес файла, в который будет сохранено изображение Texture. Изображение будет сохранено в формате BMP с глубиной цвета 32. Procedure SaveImageAsPNG(Filename:String; Im:Cardinal); где: FileName – строка, содержащая адрес файла, в который будет сохранено изображение Im. Изображение будет сохранено в формате PNG с глубиной цвета 32. Procedure GetBMP32FromImage(Im:Cardinal;var BMP32:TBitMap); где: Im – изображение которое будет сохранятся в BMP32. BMP32 должен быть создан и уже существовать. Формат цвета и размеры изменяются автоматически. Пример var bmp:TBitMap; ... bmp:=TBitMap.Create; gle.GetBMP32FromImage(CreateTex,bmp); image1.Picture.Assign(bmp); bmp.Free; ----------------------- Page 11----------------------- 5. Работа с шейдерами 5.1 Введение (взято с gamedev.ru и elite-games.ru) GLSL (OpenGL Shading Language) - glSLang - новый язык высокого уровня для создания фрагментных и вершинных шейдеров. В отличии от HLSL/Cg он создавался в расчете на будущее железо, поэтому теоретически он намного мощнее. В частности, GLSL много взял от RenderMan Shading Language. Существует два вида шейдеров: Вершинный вызывается для каждой вершины. Ему на вход поступает координата вершины в мировой системе координат, текстурные координаты, нормали и еще много разных параметров (в том числе и любые другие, которые вы захотите. Скорость выполнения вершинного шейдера на процессоре видеокарты (GPU) довольно высока, по крайней мере, превышает скорость CPU в разы. Но пиксельные шейдеры – вот настоящая скорость... Пиксельный вызывается для каждого (внимание!) пикселя. Скорость его настолько высока, что у меня, например, на GeForce 6600 пиксельный шейдер, на котором сделано гауссово размытие, замедляет счетчик FPS всего лишь на 20 кадров в секунду. Ни один CPU не сравнится по скорости с GPU. Пиксельному шейдеры поступают на вход измененные данные из вершинного шейдера и из вашей программы, а на выход должен выйти лишь один параметр – цвет пикселя. 5.2 Загрузка и создание Прежде чем работать с шейдерами их необходимо создать или загрузить из файла. Работа с шейдерами происходит, как и с изображениями, по указателям. Указателем выступает переменна типа Cardinal. Пример Var s,b:cardinal; Для загрузки шейдеров из файлов используется метод: Function ShaderCreate(FragmentShaderFileName,VertexShaderFileName:String ): Integer; где: FragmentShaderFileName и VertexShaderFileName — строки, содержащие адреса файлов с текстом шейдеров. Пример s:=Gle.ShaderCreate('b.fp','b.vp'); b:=Gle.ShaderCreate('blur.fp','blur.vp'); где: FragmentShaderFileName и VertexShaderFileName — строки, содержащие адреса файлов с текстом шейдеров. 5.3 Использование Для того что бы использовать загруженный шейдер используется метод: Procedure ShaderStart(Shader:Integer); Что бы вернуться в нормальный режим рисования и отменить действия шейдера используется метод: Procedure ShaderStop(Shader:Integer); Пример ----------------------- Page 12----------------------- gle.ShaderStart(s); gle.Bar(170,165,310,310,0); gle.ShaderStop(s); Продолжение следует...