WEBGL nedir? -5 Ekrana üçgen, dörtgen çizdirme

Bu yazıda artık ilk 4 yazıda öğrenmemiz gereken şeyleri öğrendikten sonra birşeyler çizmeye başlayabiliriz. webgl ile ekrana bir kırmızı üçgen ve dörtgen çizimi şlemi yapacağız. Kaynak kodlara buradan ulaşabilirsiniz.

Kaynak kodu verdikten sonra biraz kodumuzu incelemeye geçelim.

gereksinimler

ilk olarak shader sınıfı ve matematik kütüphanesini import ediyorum. Webgl için gerekli matrix ve matematiksel işlemler için gl-matrix kütüphanesini kullandım. İsterseniz kaynak kodunu inceleyebilirsiniz. Uzun uzun matematik kodlarına girmeyeceğim.

import { CreateShaderProgram } from “../Shader/shader.js”
import { mat4, mat3, glMatrix} from “../lib/Math/gl-matrix.js”

gl parametrelerinin ayarlanması

Canvas ve shader programını oluşturduktan sonra gl objemi alıyorum. Daha sonra bazı gl kodları ile başlıyorum:

this.gl.viewport(0,0,this.canvas.width, this.canvas.height) // görüntü alanı 
                    //olarak kanvasın bütününü kullanacamızı belirtiyoruz
this.gl.enable(this.gl.DEPTH_TEST) // eğer derinlik oalrak üst üste gelen
                                   // bir pixel değeri varsa fragment shaderde 
                                   //işleneceğini ayarlıyor.
this.gl.clearColor(0.4689,0.5006,1,1) // arka fona verdiğim renk
this.gl.clear(this.gl.COLOR_BUFFER_BIT) // ayarlanan renk ile ekranı siler
this.gl.useProgram(this.shaderProgram) // shader kullnaımını set ediyorum.

Shader adresleri

Bu ksımdan sonra önceki shader yazılarından anlayacağımız üzere shaderden model matrix, position ve renk değişken adreslerini alıyorum:

this.vertexPos= this.gl.getAttribLocation(this.shaderProgram,"aVertexPosition")
this.ModelLoc = this.gl.getUniformLocation(this.shaderProgram,"uModelViewMatrix")
this.colorPos= this.gl.getUniformLocation(this.shaderProgram,"vColor")

Gene önceki yazılardan tanıdığımız bir kod vertexPos attribute adresini aktif ediyorum

this.gl.enableVertexAttribArray(this.vertexPos)

Model matrisi ve çizim

Sonraki adımda model düzlemimi belirleyen matrisi ayarlıyorum. Ben ortogonal yani dikey düzlem kullanacağım. dikey düzlemde perspektif olmaz. Dümdüz görürsünüz.
this.ModelMatrix = new Float32Array(16)
mat4.ortho(this.ModelMatrix,-2,2,-2,2,-2,2) // ilk iki sayı genişlik, sonraki yükseklik ve ensondaki derinliği ifade eder.
console.log(this.ModelMatrix);

Daha sonra çizim işlemi için vertex verileri ve bufferları dolduruyorum ve çizim yapıyorum.

var vertex =[
-0.5,-0.5,0,
-0.5, 0.5,0,
0.5,-0.5,0,
]

var vertexBuffer=this.FillBuffer(vertex)

this.gl.uniformMatrix4fv(this.ModelLoc, false, this.ModelMatrix)
this.gl.uniform4fv(this.colorPos, [1,0,0,1])

this.gl.bindBuffer(this.gl.ARRAY_BUFFER,vertexBuffer)
this.gl.vertexAttribPointer(this.vertexPos, 3, this.gl.FLOAT, false, 0 ,0)
this.gl.drawArrays(this.gl.TRIANGLES,0,3)

Ve sonuç biçok yazıdan sonraki sonuç: