Shaders and GLSL

What is OpenGL

Basics OpenGL(ES)

OpenGL is a software interface to graphics hardware. It is designed as a hardware-independent interface to be used for many different hardware platforms. OpenGL programs can also work across a network (client-server paradigm) even if the client and server are different kinds of computers. The client in OpenGL is a computer on which an OpenGL program actually executes, and the server is a computer that performs the drawings.

Versions

Architecture

Coordinates and Viewport

OpenGL expects all the vertices, that we want to become visible, to be in normalized device coordinates after each vertex shader run. That is, the x, y and z coordinates of each vertex should be between -1.0 and 1.0; coordinates outside this range will not be visible.

Programmable Pipeline (Shaders)

Rasterization

()[https://en.wikipedia.org/wiki/Rasterisation#/media/File:Top-left_triangle_rasterization_rule.gif]

Draw a Triangle

Frame Buffer (CPU Client)

Vertex Array

OpenGL Vertex ArrayUsing vertex arrays reduces the number of function calls and redundant usage of shared vertices. Therefore, you may increase the performance of rendering.

VBO

VEO

OpenGL Shader and GLSL (GPU Server)

Question

Reference:

• OpenGL ES 入门 http://vanney9.com/2016/10/29/opengl-es-start-up/
• OpenGL Vertex Buffer Object (VBO) https://www.songho.ca/opengl/gl_vbo.html
• Lecture HelloTriangle https://vis.uni-jena.de/Lecture/ComputerGraphics/Lec2_HelloTriangle.pdf
• Coloring the Triangle https://goharsha.com/lwjgl-tutorial-series/coloring-the-triangle/
• Computer Graphics https://vis.uni-jena.de/?page_id=540
• Lecture 13: OpenGL Shading Language (GLSL) https://slideplayer.com/slide/17079459/
• OpenGL Heart https://gist.github.com/tuanpt216/6e01873e50528c17a35e
• OpenGL ES Transformations with Gestures https://www.kodeco.com/2591-opengl-es-transformations-with-gesturesc
• WebGL - Quick Guide https://www.tutorialspoint.com/webgl/webgl_quick_guide.htm
• WebGL - Cube Rotation https://www.tutorialspoint.com/webgl/webgl_cube_rotation.htm
• WebGL shader examples https://webgl-shaders.com/
• Hello GLSL https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Hello_GLSL
• 图形学和 Shader 简单介绍（Heart Curve） https://blogml.top/2021/05/16/cg/
• Flutter 渲染原理解析 https://zhuanlan.zhihu.com/p/135969091
• Shady Flutter: Using GLSL Shaders in Flutter https://blog.codemagic.io/shady-flutter/
• flutter-gpu-examples https://github.com/bdero/flutter-gpu-examples/blob/master/lib/triangle.dart
• OpenGL_Shading_Language Wiki https://en.wikipedia.org/wiki/OpenGL_Shading_Language
• CoreLanguage(GLSL) https://www.khronos.org/opengl/wiki/Core_Language_(GLSL)
• GLSL Basics https://www.cnblogs.com/mazhenyu/p/3804518.html
• GLSL-Card https://github.com/wshxbqq/GLSL-Card
• OpenGL ES Programming Guide https://developer.apple.com/library/archive/documentation/3DDrawing/Conceptual/OpenGLES_ProgrammingGuide/DrawingWithOpenGLES/DrawingWithOpenGLES.html
• Drawing Offscreen https://developer.apple.com/library/archive/documentation/GraphicsImaging/Conceptual/OpenGL-MacProgGuide/opengl_offscreen/opengl_offscreen.html#//apple_ref/doc/uid/TP40001987-CH403-SW2
• Metal-Shading-Language-Specification https://developer.apple.com/metal/Metal-Shading-Language-Specification.pdf
• HLSL https://learn.microsoft.com/en-us/windows/win32/direct3dhlsl/dx-graphics-hlsl
• SwiftUI Metal Shader Tutorials + Replacement from GLSL to MSL https://medium.com/@ikeh1024/swiftui-metal-shader-tutorials-replacement-from-glsl-to-msl-6e97b7307dc2
• Hello, Metal! https://www.kodeco.com/books/metal-by-tutorials/v2.0/chapters/1-hello-metal
• Metal入门经验与思考 https://zhuanlan.zhihu.com/p/453521934