entrée webgl indispensable

Comment dessiner un graphique webgl simple

Depuis que je me suis engagé dans quelque chose d'autre récemment, mon blog de série d'apprentissage webgl n'a pas été mis à jour, je vais donc le résumer ici.

De nouvelles connaissances

Nous avons une compréhension préliminaire de webgl, c'est-à-dire que nous devons d'abord obtenir le contexte de la toile, puis nous devons savoir aujourd'hui pour publier l'image sur la toile.

1. Idées Passez les données de la fonction main () à la variable d'attribut du vertex shader!
2. Obtenez d'abord l'adresse de la variable d'attribut

3. Gl.program. a_Position = gl.getAttribLocation(Program, ‘a_program’);
   

4. Transférer des données

5. Gl.vertexAttribute3f(a_Postition, (数据));// 顶点的位置数据属性
   

6. Vertex shader : Vertex shader est un programme utilisé pour décrire les caractéristiques des sommets (comme la position, la couleur, etc.).
7. Fragment shader : programme qui traite le processus fragment par fragment (comme les données de couleur).
8. Variables : attribut uniforme Deux types de variables
   1. attribut: transmet les données relatives aux sommets.
   2. Uniforme: les mêmes données pour tous les points fixes.
   Nous sommes habitués à déclarer les variables d'attribut comme a_xxxxx et les variables de type uniforme comme u_xxxx

Objet tampon : Ensuite, nous parlons de l'objet tampon.
Parce que dans la mise en œuvre réelle, nos sommets, couleurs, éclairage, etc. ont une grande quantité de données, généralement nous utilisons un tableau pour stocker, mais c'est plus gênant lors de l'exploitation sur le tableau, nous utilisons donc des objets tampons pour traiter.
1. Créez un tableau de sommets.

	var vertices = new Float32Array([]);

2. Créez un objet tampon.

	var vertexBuffer = gl.createBuffer();

3. Liez le tampon.

	gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

4. Écrivez des données dans l'objet.
5. Attribuez l'objet tampon à la variable d'attribut.

	gl.vertexAttributePointer(a_Position, 2, gl.FLOAT, false, 0, 0);

6. Connectez la variable a_Position au tampon qui lui est alloué. (Également appelé variable d'attribut d'ouverture)

Gl.enableVertexAttributeArray(a_Position);