turborium / glengine2d Goto Github PK
View Code? Open in Web Editor NEWThis project forked from dev-demi/glengine2d
2d opengl engine for Delphi / 2D библиотека основанная на OpenGl для Delphi
Home Page: http://sites.google.com/site/boxdemi/
This project forked from dev-demi/glengine2d
2d opengl engine for Delphi / 2D библиотека основанная на OpenGl для Delphi
Home Page: http://sites.google.com/site/boxdemi/
Обзор: 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); Продолжение следует...
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.