Webgl-Eintrag unerlässlich

So zeichnen Sie eine einfache Webgl-Grafik

Da ich kürzlich mit etwas anderem beschäftigt war, wurde mein Blog der Webgl-Lernserie nicht aktualisiert, daher werde ich es hier zusammenfassen.

Neues Wissen

Wir haben ein vorläufiges Verständnis von Webgl, das heißt, wir müssen zuerst den Kontext der Leinwand ermitteln und dann heute wissen, wie Bilder auf der Leinwand veröffentlicht werden.

1. Ideen Übergeben Sie die Daten von der Funktion main () an die Attributvariable des Vertex-Shaders!
2. Holen Sie sich zuerst die Adresse der Attributvariablen

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

4. Daten übertragen

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

6. Vertex-Shader : Der Vertex-Shader ist ein Programm zur Beschreibung der Eigenschaften von Vertices (wie Position, Farbe usw.).
7. Fragment Shader : Ein Programm, das den fragmentweisen Prozess verarbeitet (z. B. Farbdaten).
8. Variablen : Attribut einheitlich Zwei Arten von Variablen
   1. Attribut: Überträgt Daten in Bezug auf Scheitelpunkte.
   2. Uniform: Die gleichen Daten für alle Fixpunkte.
   Wir sind es gewohnt, Attributvariablen als a_xxxxx und einheitliche Typvariablen als u_xxxx zu deklarieren

Pufferobjekt : Dann sprechen wir über das Pufferobjekt.
Da in der tatsächlichen Implementierung unsere Scheitelpunkte, Farben, Beleuchtung usw. große Datenmengen enthalten, verwenden wir im Allgemeinen ein Array zum Speichern. Dies ist jedoch problematischer, wenn Sie mit dem Array arbeiten. Daher verwenden wir Pufferobjekte zum Verarbeiten.
1. Erstellen Sie ein Array von Scheitelpunkten.

	var vertices = new Float32Array([]);

2. Erstellen Sie ein Pufferobjekt.

	var vertexBuffer = gl.createBuffer();

3. Binden Sie den Puffer.

	gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer);

4. Schreiben Sie Daten in das Objekt.
5. Weisen Sie das Pufferobjekt der Attributvariablen zu.

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

6. Verbinden Sie die Variable a_Position mit dem ihr zugewiesenen Puffer. (Auch als öffnende Attributvariable bezeichnet)

Gl.enableVertexAttributeArray(a_Position);