Difference between revisions of "IMX8/Multimedia/GPU/OpenGL"

From RidgeRun Developer Connection
< IMX8‎ | Multimedia‎ | GPU
Jump to: navigation, search
(→‎GLES2)
m
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<noinclude>{{IMX8/Head|multimedia,gpu,opengl}}</noinclude>
+
<noinclude>{{IMX8/Head|previous=Multimedia/GPU|next=Multimedia/GPU/OpenCL|metakeywords=multimedia,gpu,opengl}}</noinclude>
  
−
=OpenGL=
+
==OpenGL==
 
OpenGL® is the most widely adopted 2D and 3D graphics API in the industry, bringing thousands of applications to a wide variety of computer platforms. It is window-system and operating-system independent as well as network-transparent. OpenGL enables developers of software for PC, workstation, and supercomputing hardware to create high-performance, visually compelling graphics software applications, in markets such as CAD, content creation, energy, entertainment, game development, manufacturing, medical, and virtual reality. OpenGL exposes all the features of the latest graphics hardware. Refer [https://www.khronos.org/opengl/ this page] for more information.
 
OpenGL® is the most widely adopted 2D and 3D graphics API in the industry, bringing thousands of applications to a wide variety of computer platforms. It is window-system and operating-system independent as well as network-transparent. OpenGL enables developers of software for PC, workstation, and supercomputing hardware to create high-performance, visually compelling graphics software applications, in markets such as CAD, content creation, energy, entertainment, game development, manufacturing, medical, and virtual reality. OpenGL exposes all the features of the latest graphics hardware. Refer [https://www.khronos.org/opengl/ this page] for more information.
  
−
==OpenGL ES (Embedded Systems)==
+
===OpenGL ES (Embedded Systems)===
−
OpenGL® ES is considered the Standard for Embedded Accelerated 3D Graphics. It is a royalty-free, cross-platform API for rendering advanced 2D and 3D graphics on embedded and mobile systems, including consoles, phones, appliances and vehicles. It consists of a well-defined subset of desktop OpenGL suitable for low-power devices, and provides a flexible and powerful interface between software and graphics acceleration hardware. For more information about the API Versions of OpenGL ES, please refer [https://www.khronos.org/opengles/ this page].
+
OpenGL® ES is considered the Standard for Embedded Accelerated 3D Graphics. It is a royalty-free, cross-platform API for rendering advanced 2D and 3D graphics on embedded and mobile systems, including consoles, phones, appliances, and vehicles. It consists of a well-defined subset of desktop OpenGL suitable for low-power devices and provides a flexible and powerful interface between software and graphics acceleration hardware. For more information about the API Versions of OpenGL ES, please refer [https://www.khronos.org/opengles/ this page].
  
−
=Demo Examples=
+
==Demo Examples==
 
There are some examples on [https://github.com/NXPmicro/gtec-demo-framework this repository] that can be used to check the basics required to understand how to write applications on OpenGL. You can find those examples on the '''/opt/imx-gpu-sdk/OpenGL''' directory.
 
There are some examples on [https://github.com/NXPmicro/gtec-demo-framework this repository] that can be used to check the basics required to understand how to write applications on OpenGL. You can find those examples on the '''/opt/imx-gpu-sdk/OpenGL''' directory.
  
−
==Folder Content==
+
===Folder Content===
  
 
In [https://github.com/NXPmicro/gtec-demo-framework this] demo repository you can find and run examples of applications for OpenGL ES2 (GLES2) and OpenGL ES3 (GLES3).
 
In [https://github.com/NXPmicro/gtec-demo-framework this] demo repository you can find and run examples of applications for OpenGL ES2 (GLES2) and OpenGL ES3 (GLES3).
  
−
===GLES2===
+
====GLES2====
  
−
*'''Bloom:''' This is an example of how to create a bloom effect. The idea is not to create the most accurate bloom, but something that is fairly fast to render. Instead of increasing the kernel size to get a good blur the example does a fairly fast approximation by downscaling the original image to multiple smaller render-targets and then blurring these using a relative small kernel and then finally rescaling the result to the original size.
+
*'''Bloom:''' This is an example of how to create a bloom effect. The idea is not to create the most accurate bloom, but something that is fairly fast to render. Instead of increasing the kernel size to get a good blur, the example does a fairly fast approximation by downscaling the original image to multiple smaller render-targets and then blurring these using a relatively small kernel and then finally rescaling the result to the original size.
  
 
[[File:BloomGLES2D.gif|center|Bloom Output]]
 
[[File:BloomGLES2D.gif|center|Bloom Output]]
Line 22: Line 22:
 
*'''Blur:''' Showcases multiple ways to implement a gaussian blur.
 
*'''Blur:''' Showcases multiple ways to implement a gaussian blur.
 
**One pass blur.
 
**One pass blur.
−
**Two pass blur The 2D Gaussian filter kernel is separable. This allows us two produce the same output as a one pass algorithm by first applying a X-blur and then a Y-blur.
+
**Two-pass blur The 2D Gaussian filter kernel is separable. This allows us two to produce the same output as a one-pass algorithm by first applying an X-blur and then a Y-blur.
−
**Two pass linear blur Uses the two pass technique and further reduces the bandwidth requirement by taking advantage of the GPU's linear texture filtering which allows us to reduce the needed kernel length to roughly half its length while producing the same output as the full kernel length.
+
**Two-pass linear blur Uses the two-pass technique and further reduces the bandwidth requirement by taking advantage of the GPU's linear texture filtering which allows us to reduce the needed kernel length to roughly half its length while producing the same output as the full kernel length.
−
**Two pass linear scaled blur Uses the two pass linear technique and further reduces the bandwidth requirement by downscaling the 'source image' to 1/4 its size (1/2w x 1/2h) before applying the blur and and then upscaling the blurred image to provide the final image. This works well for large kernel sizes and relatively high sigma's but the downscaling produces visible artifacts with low sigma's.
+
**Two-pass linear scaled blur Uses the two-pass linear technique and further reduces the bandwidth requirement by downscaling the 'source image' to 1/4 its size (1/2w x 1/2h) before applying the blur and then upscaling the blurred image to provide the final image. This works well for large kernel sizes and relatively high sigma's but the downscaling produces visible artifacts with low sigma's.
  
 
[[File:BlurGLES2D.gif|center|Blur Output]]
 
[[File:BlurGLES2D.gif|center|Blur Output]]
Line 32: Line 32:
 
[[File:DFGGLES2D.gif|center|DFGraphicsBasic2D Output]]
 
[[File:DFGGLES2D.gif|center|DFGraphicsBasic2D Output]]
  
−
*'''DFNativeBatch2D:''' This example shows how to use the Demo Frameworks NativeBatch implementation to render various graphics elements. The native batch functionality works across various 3D backends and also allows you to use the API native textures for rendering. The native batch is very useful for quickly getting something on the screen which can be useful for prototyping and debugging. It is however not a optimized way of rendering things.
+
*'''DFNativeBatch2D:''' This example shows how to use the Demo Frameworks NativeBatch implementation to render various graphic elements. The native batch functionality works across various 3D backends and also allows you to use the API native textures for rendering. The native batch is very useful for quickly getting something on the screen which can be useful for prototyping and debugging. It is however not an optimized way of rendering things.
  
 
[[File:DFNBGLES2D.gif|center|DFNativeBatch2D Output]]
 
[[File:DFNBGLES2D.gif|center|DFNativeBatch2D Output]]
  
−
*'''DFSimpleUI100:''' This is a very basic example of how to utilize the DemoFramework's UI library. The sample displays four buttons and reacts to clicks. The UI framework that makes it easy to get a basic UI up and running. The main UI code is API independent. It is not a show case of how to render a UI fast but only intended to allow you to quickly get a UI ready that is good enough for a demo.
+
*'''DFSimpleUI100:''' This is a very basic example of how to utilize the DemoFramework's UI library. The sample displays four buttons and reacts to clicks. The UI framework that makes it easy to get a basic UI up and running. The main UI code is API independent. It is not a showcase of how to render a UI fast but only intended to allow you to quickly get a UI ready that is good enough for a demo.
  
 
[[File:DFS100BGLES2D.gif|center|DFSimpleUI100 Output]]
 
[[File:DFS100BGLES2D.gif|center|DFSimpleUI100 Output]]
  
−
*'''DFSimpleUI101:''' This is a more complex example of how to utilize the DemoFramework's UI library. It displays various UI controls and ways to utilize them. The UI framework that makes it easy to get a basic UI up and running. The main UI code is API independent. It is not a show case of how to render a UI fast but only intended to allow you to quickly get a UI ready that is good enough for a demo.
+
*'''DFSimpleUI101:''' This is a more complex example of how to utilize the DemoFramework's UI library. It displays various UI controls and ways to utilize them. The UI framework that makes it easy to get a basic UI up and running. The main UI code is API independent. It is not a showcase of how to render a UI fast but only intended to allow you to quickly get a UI ready that is good enough for a demo.
  
 
[[File:DFS101BGLES2D.gif|center|DFSimpleUI101 Output]]
 
[[File:DFS101BGLES2D.gif|center|DFSimpleUI101 Output]]
  
−
*'''EightLayerBlend:''' This demo creates a simple parallax scrolling effect by blending eight 32 bit per pixel 1080p layers on top of each other. This is not the most optimal way to do it as it uses eight passes. But it does provide a good example of the worst case bandwidth use for the operation. The demo was created to compare GLES to the G2D eight blend blit functionality.
+
*'''EightLayerBlend:''' This demo creates a simple parallax scrolling effect by blending eight 32 bit per pixel 1080p layers on top of each other. This is not the most optimal way to do it as it uses eight passes. But it does provide a good example of the worst-case bandwidth use for the operation. The demo was created to compare GLES to the G2D eight blend blit functionality.
  
 
[[File:EightLayerBlendGLES2D.gif|center|EightLayerBlend Output]]
 
[[File:EightLayerBlendGLES2D.gif|center|EightLayerBlend Output]]
  
−
*'''FractalShader:''' This demo can render both the julia and mandelbrot set using a fragment shader. This demo was used to demonstrates GPU shader performance by using up roughly 515 instructions to render each fragment while generating the julia set. It uses no textures, has no overdraw and has a minimal bandwidth requirement. Use the commandline arguments to select the scene and quality.
+
*'''FractalShader:''' This demo can render both the julia and mandelbrot set using a fragment shader. This demo was used to demonstrates GPU shader performance by using up roughly 515 instructions to render each fragment while generating the julia set. It uses no textures, has no overdraw, and has a minimum bandwidth requirement. Use the command line arguments to select the scene and quality.
  
 
[[File:FractalShaderGLES2D.gif|center|FractalShader Output]]
 
[[File:FractalShaderGLES2D.gif|center|FractalShader Output]]
  
−
*'''InputEvents:''' This example demonstrates how to receive various input events and logs information about them onscreen and to to the log. This can also be used to do some basic real time tests of the input system when porting the framework to a new platform.
+
*'''InputEvents:''' This example demonstrates how to receive various input events and logs information about them onscreen and to to the log. This can also be used to do some basic real-time tests of the input system when porting the framework to a new platform.
  
 
[[File:InputEventsGLES2D.gif|center|InputEvents Output]]
 
[[File:InputEventsGLES2D.gif|center|InputEvents Output]]
  
−
*'''ModelLoaderBasics:''' This example demonstrates how to use the FslSceneImporter and Assimp to load a scene and render it using OpenGLES2. The model is rendered using a simple per pixel directional light shader. For a more complex example take a look at the ModelViewer example.
+
*'''ModelLoaderBasics:''' This example demonstrates how to use the FslSceneImporter and Assimp to load a scene and render it using OpenGLES2. The model is rendered using a simple per-pixel directional light shader. For a more complex example take a look at the ModelViewer example.
  
 
[[File:ModelLoaderBasicsGLES2D.gif|center|ModelLoaderBasics Output]]
 
[[File:ModelLoaderBasicsGLES2D.gif|center|ModelLoaderBasics Output]]
  
−
*'''ModelViewer:'''
+
*'''ModelViewer:''' This demo expands the ModelLoaderBasics example with:
 +
**An arcball camera
 +
**Multiple and different scenes (Knight, Dragon, Car, etc)
 +
**More advanced shaders for directional per pixel specular light with support for gloss and normal maps.
  
 
[[File:ModelViewerGLES2D.gif|center|ModelViewer Output]]
 
[[File:ModelViewerGLES2D.gif|center|ModelViewer Output]]
  
−
*'''S01_SimpleTriangle:'''
+
*'''S01_SimpleTriangle:''' This demo shows how to render a single-colored Triangle using OpenGL ES, this sample serves as a good introduction to the OpenGL ES 2 Pipeline and the abstraction classes that the DemoFramework provides. It's basically the typical 'Hello World' program for graphics.
−
*'''S02_ColoredTriangle:'''
+
 
−
*'''S03_Transform:'''
+
[[File:S01_SimpleTriangleGLES2D.gif|center|S01_SimpleTriangle Output]]
−
*'''S04_Projection:'''
+
 
 +
*'''S02_ColoredTriangle:''' This example shows how to render a vertex colored Triangle using OpenGL ES, this demonstrates how to add more than vertex positions to the vertex attributes. This is basically the same as the S01 example it just adds vertex colors to the shader.
 +
 
 +
[[File:S02__ColoredTriangleGLES2D.gif|center|S02_ColoredTriangle Output]]
 +
 
 +
*'''S03_Transform:''' This demo renders an animated vertex colored triangle. This shows how to modify the model matrix to rotate a triangle and how to utilize demoTime.DeltaTime to do frame rate independent animation.
 +
 
 +
[[File:S03_TransformGLES2D.gif|center|S03_Transform Output]]
 +
 
 +
*'''S04_Projection:''' This example shows how to:
 +
**Build a perspective projection matrix.
 +
**Render two simple 3D models using frame rate independent animation.
 +
 
 +
[[File:S04_ProjectionGLES2D.gif|center|S04_Projection Output]]
 +
 
 
*'''S06_Texturing:'''
 
*'''S06_Texturing:'''
 +
 +
[[File:S06_TexturingGLES2D.gif|center|S06_Texturing Output]]
 +
 
*'''S07_EnvironmentMapping:'''
 
*'''S07_EnvironmentMapping:'''
 +
 +
[[File:S07_EnvironmentMappingGLES2D.gif|center|S07_EnvironmentMapping Output]]
 +
 
*'''S08_EnvironmentMappingRefraction:'''
 
*'''S08_EnvironmentMappingRefraction:'''
 +
 +
[[File:S08_EnvironmentMappingRefractionGLES2D.gif|center|S08_EnvironmentMappingRefraction Output]]
 +
 
*'''S09_VIV_direct_texture:'''
 
*'''S09_VIV_direct_texture:'''
 +
 +
[[File:S09_VIV_direct_textureGLES2D.gif|center|S09_VIV_direct_texture Output]]
 +
 
*'''T3DStressTest:'''
 
*'''T3DStressTest:'''
 +
 +
[[File:T3DStressTestGLES2D.gif|center|T3DStressTest Output]]
 +
 
*'''VIVDirectTextureMultiSampling:'''
 
*'''VIVDirectTextureMultiSampling:'''
  
−
===GLES3===
+
[[File:VIVDirectTextureMultiSamplingGLES2D.gif|center|VIVDirectTextureMultiSampling Output]]
 +
 
 +
====GLES3====
  
 
*'''Bloom:'''
 
*'''Bloom:'''

Latest revision as of 03:01, 3 March 2023


NXP Partner Program Registered Vertical.jpg NXP Partner Program Horizontal.jpg
Previous: Multimedia/GPU Index Next: Multimedia/GPU/OpenCL


i.MX8
IMX8
Introduction
SoC Overview
Carrier Boards
i.MX6 vs i.MX8
iMX8M Evaluation Kit (EVK)
Overview
Getting Started
Yocto Support
Android Support
System Recovery
Nitrogen8M
Overview
Getting Started
Yocto Support
Android Support
System Recovery
Multimedia
GPU
VPU
ISP Support
GStreamer Support
RidgeRun Products
Reference Documentation
Contact Us




OpenGL

OpenGL® is the most widely adopted 2D and 3D graphics API in the industry, bringing thousands of applications to a wide variety of computer platforms. It is window-system and operating-system independent as well as network-transparent. OpenGL enables developers of software for PC, workstation, and supercomputing hardware to create high-performance, visually compelling graphics software applications, in markets such as CAD, content creation, energy, entertainment, game development, manufacturing, medical, and virtual reality. OpenGL exposes all the features of the latest graphics hardware. Refer this page for more information.

OpenGL ES (Embedded Systems)

OpenGL® ES is considered the Standard for Embedded Accelerated 3D Graphics. It is a royalty-free, cross-platform API for rendering advanced 2D and 3D graphics on embedded and mobile systems, including consoles, phones, appliances, and vehicles. It consists of a well-defined subset of desktop OpenGL suitable for low-power devices and provides a flexible and powerful interface between software and graphics acceleration hardware. For more information about the API Versions of OpenGL ES, please refer this page.

Demo Examples

There are some examples on this repository that can be used to check the basics required to understand how to write applications on OpenGL. You can find those examples on the /opt/imx-gpu-sdk/OpenGL directory.

Folder Content

In this demo repository you can find and run examples of applications for OpenGL ES2 (GLES2) and OpenGL ES3 (GLES3).

GLES2

  • Bloom: This is an example of how to create a bloom effect. The idea is not to create the most accurate bloom, but something that is fairly fast to render. Instead of increasing the kernel size to get a good blur, the example does a fairly fast approximation by downscaling the original image to multiple smaller render-targets and then blurring these using a relatively small kernel and then finally rescaling the result to the original size.
Error creating thumbnail: Unable to save thumbnail to destination
  • Blur: Showcases multiple ways to implement a gaussian blur.
    • One pass blur.
    • Two-pass blur The 2D Gaussian filter kernel is separable. This allows us two to produce the same output as a one-pass algorithm by first applying an X-blur and then a Y-blur.
    • Two-pass linear blur Uses the two-pass technique and further reduces the bandwidth requirement by taking advantage of the GPU's linear texture filtering which allows us to reduce the needed kernel length to roughly half its length while producing the same output as the full kernel length.
    • Two-pass linear scaled blur Uses the two-pass linear technique and further reduces the bandwidth requirement by downscaling the 'source image' to 1/4 its size (1/2w x 1/2h) before applying the blur and then upscaling the blurred image to provide the final image. This works well for large kernel sizes and relatively high sigma's but the downscaling produces visible artifacts with low sigma's.
Error creating thumbnail: Unable to save thumbnail to destination
  • DFGraphicsBasic2D: This example shows how to use the Demo Frameworks 'basic' 2D rendering capabilities that work across all backends. The basic2D interface allows you to render ASCII strings using a system provided font and draw colored points in batches. The functionality in Basic2D is used internally in the framework to render the profiling overlays like the frame rate counter and graphs.
Error creating thumbnail: Unable to save thumbnail to destination
  • DFNativeBatch2D: This example shows how to use the Demo Frameworks NativeBatch implementation to render various graphic elements. The native batch functionality works across various 3D backends and also allows you to use the API native textures for rendering. The native batch is very useful for quickly getting something on the screen which can be useful for prototyping and debugging. It is however not an optimized way of rendering things.
Error creating thumbnail: Unable to save thumbnail to destination
  • DFSimpleUI100: This is a very basic example of how to utilize the DemoFramework's UI library. The sample displays four buttons and reacts to clicks. The UI framework that makes it easy to get a basic UI up and running. The main UI code is API independent. It is not a showcase of how to render a UI fast but only intended to allow you to quickly get a UI ready that is good enough for a demo.
Error creating thumbnail: Unable to save thumbnail to destination
  • DFSimpleUI101: This is a more complex example of how to utilize the DemoFramework's UI library. It displays various UI controls and ways to utilize them. The UI framework that makes it easy to get a basic UI up and running. The main UI code is API independent. It is not a showcase of how to render a UI fast but only intended to allow you to quickly get a UI ready that is good enough for a demo.
Error creating thumbnail: Unable to save thumbnail to destination
  • EightLayerBlend: This demo creates a simple parallax scrolling effect by blending eight 32 bit per pixel 1080p layers on top of each other. This is not the most optimal way to do it as it uses eight passes. But it does provide a good example of the worst-case bandwidth use for the operation. The demo was created to compare GLES to the G2D eight blend blit functionality.
Error creating thumbnail: Unable to save thumbnail to destination
  • FractalShader: This demo can render both the julia and mandelbrot set using a fragment shader. This demo was used to demonstrates GPU shader performance by using up roughly 515 instructions to render each fragment while generating the julia set. It uses no textures, has no overdraw, and has a minimum bandwidth requirement. Use the command line arguments to select the scene and quality.
Error creating thumbnail: Unable to save thumbnail to destination
  • InputEvents: This example demonstrates how to receive various input events and logs information about them onscreen and to to the log. This can also be used to do some basic real-time tests of the input system when porting the framework to a new platform.
Error creating thumbnail: Unable to save thumbnail to destination
  • ModelLoaderBasics: This example demonstrates how to use the FslSceneImporter and Assimp to load a scene and render it using OpenGLES2. The model is rendered using a simple per-pixel directional light shader. For a more complex example take a look at the ModelViewer example.
Error creating thumbnail: Unable to save thumbnail to destination
  • ModelViewer: This demo expands the ModelLoaderBasics example with:
    • An arcball camera
    • Multiple and different scenes (Knight, Dragon, Car, etc)
    • More advanced shaders for directional per pixel specular light with support for gloss and normal maps.
Error creating thumbnail: Unable to save thumbnail to destination
  • S01_SimpleTriangle: This demo shows how to render a single-colored Triangle using OpenGL ES, this sample serves as a good introduction to the OpenGL ES 2 Pipeline and the abstraction classes that the DemoFramework provides. It's basically the typical 'Hello World' program for graphics.
Error creating thumbnail: Unable to save thumbnail to destination
  • S02_ColoredTriangle: This example shows how to render a vertex colored Triangle using OpenGL ES, this demonstrates how to add more than vertex positions to the vertex attributes. This is basically the same as the S01 example it just adds vertex colors to the shader.
Error creating thumbnail: Unable to save thumbnail to destination
  • S03_Transform: This demo renders an animated vertex colored triangle. This shows how to modify the model matrix to rotate a triangle and how to utilize demoTime.DeltaTime to do frame rate independent animation.
Error creating thumbnail: Unable to save thumbnail to destination
  • S04_Projection: This example shows how to:
    • Build a perspective projection matrix.
    • Render two simple 3D models using frame rate independent animation.
Error creating thumbnail: Unable to save thumbnail to destination
  • S06_Texturing:
S06_Texturing Output
  • S07_EnvironmentMapping:
S07_EnvironmentMapping Output
  • S08_EnvironmentMappingRefraction:
S08_EnvironmentMappingRefraction Output
  • S09_VIV_direct_texture:
S09_VIV_direct_texture Output
  • T3DStressTest:
T3DStressTest Output
  • VIVDirectTextureMultiSampling:
VIVDirectTextureMultiSampling Output

GLES3

  • Bloom:
  • D1_1_VBOs:
  • D1_2_VAOs:
  • DFGraphicsBasic2D:
  • DFNativeBatch2D:
  • DFSimpleUI100:
  • DFSimpleUI101:
  • E1_1_VBOs:
  • E1_2_VAOs:
  • E2_1_CopyBuffer:
  • E3_0_InstacingSimple:
  • E4_0_PRestart:
  • E6_0_MultipleRenderTargets:
  • E7_0_ParticleSystem:
  • EquirectangularToCubemap:
  • FractalShader:
  • FurShellRendering:
  • GammaCorrection:
  • HDR01_BasicToneMapping:
  • ModelLoaderBasics:
  • ModelViewer:
  • MultipleViewportsFractalShader:
  • ObjectSelection:
  • OpenCL101:
  • OpenCLGaussianFilter:
  • ParticleSystem:
  • S01_SimpleTriangle:
  • S02_ColoredTriangle:
  • S03_Transform:
  • S04_Projection:
  • S06_Texturing:
  • S07_EnvironmentMapping:
  • S08_EnvironmentMappingRefraction:
  • S09_VIV_direct_texture:
  • SRGBFramebuffer:
  • Scissor101:
  • Skybox:
  • SpringBackground:
  • T3DStressTest:
  • TextureCompression:
  • VerletIntegration101:


Previous: Multimedia/GPU Index Next: Multimedia/GPU/OpenCL


Retrieved from "http://developer.ridgerun.com/wiki/index.php?title=IMX8/Multimedia/GPU/OpenGL&oldid=46985"