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ç:

Bu yazı yorumlara kapalı.