All the above three components has just one purpose and that is to draw Triangles on the canvas (which is the main objective of webGl).
All of the above Components implements IGPUComp interface ( a component is called comp in these documents). It is called GPU comp since (in WebGl) the code runs in GPU and not on CPU.
All the components at the time of creation do not hold any data to draw.
All these comps gets input data through "addTri" method using which we feed it one triangle at a time.
After creation each component needs to be initialized. We call the init method and give it webGl context.
If we change the properties of these comps then we need to call "update" method for these changes to take effect.
Lets look at each component in detail
This is the base component for rest of the two components.
The main difference that BaseTri has from rest of the two comps (Tri and TriCont) is that the BaseTri use WebGl coordinate system (which is from -1 to 1) where as the Tri and TriCont uses coordinate system from zero to hundred (0 percent to 100 percent and we can go negative as well).
As stated above the only difference between Tri comp and BaseTri is that this comp takes screen coordinates in percentages from 0 to 100 (we can also go negative). This is much easy since calculation from -1 to 1 as is a norm in webGl are difficult.
TriCont introduces the concept of x, y, width and height.
The "Tri Container Comp" is the main comp that we will use in this framework. Unlike BaseTri and Tri the TriCont just do not draw triangles onto the screen but contain them inside a box defined by the x, y, width and height properties.
We can move all the contents of this container by changing its x or y and we can all change the sizes by changing width and height properties (properties are called props)
We can make TriCont stretch and cover the whole screen / canvas and we can also layer them on top of each other.
I foresee that TriCont will be the main comp used for display and managing content.
Shapes drawn using BaseTri and Tri are drawn on the main canvas and not inside a container. The shapes draw by TriCont are restricted to the width and height of TriCont.
To move shapes created by BaseTri and Tri we have to move each vertex individually however incase of shapes drawn by TriCont we can simply change the x and y value of the comp and all the shapes will move.
To change shapes width and height created by BaseTri and Tri we have to move each vertex individually however incase of shapes drawn by TriCont we can simply change the width and height value of the comp and all the shapes will widen/shorten etc.
---The primery source is to add one triangle at a time to any of the core comps using "addTri" method. This method takes the x and y values for all the 3 vertex of a triangle and also the color of the triangle in RGB format.
A easy method is to use the "comp.add" object which has some basic Primtive shapes that can be added to each comp.
2022-Nov-08 version 0.0.1