WebGL - Bağlam

Bir WebGL uygulaması yazmak için ilk adım, WebGL oluşturma bağlamı nesnesini almaktır. Bu nesne, WebGL çizim arabelleği ile etkileşime girer ve tüm WebGL yöntemlerini çağırabilir. WebGL içeriğini elde etmek için aşağıdaki işlemler gerçekleştirilir -

HTML-5 tuvali oluşturun
Tuval kimliğini alın
WebGL edinin

HTML-5 Canvas Elemanı Oluşturma

Bölüm 5'te, bir HTML-5 kanvas elemanının nasıl oluşturulacağını tartıştık. HTML-5 belgesinin gövdesi içine bir tuval yazın, ona bir ad verin ve bunu bir parametre olarak öznitelik kimliğine iletin. Genişlik ve yükseklik niteliklerini (isteğe bağlı) kullanarak kanvasın boyutlarını tanımlayabilirsiniz.

Misal

Aşağıdaki örnek, 500 × 500 boyutlarında bir kanvas elemanının nasıl oluşturulacağını göstermektedir. Görünürlük için CSS kullanarak tuval için bir sınır oluşturduk. Aşağıdaki kodu kopyalayıp adıyla bir dosyaya yapıştırınmy_canvas.html.

<!DOCTYPE HTML>
<html>
   <head>
      <style>
         #mycanvas{border:1px solid blue;}
      </style>
   </head>
   <body>
      <canvas id = "mycanvas" width = "300" height = "300"></canvas>
   </body>
</html>

Aşağıdaki sonucu verecektir -

Canvas kimliğini alın

Tuvali oluşturduktan sonra, WebGL bağlamını almanız gerekir. Bir WebGL çizim içeriği elde etmek için yapılacak ilk şey, geçerli tuval öğesinin kimliğini almaktır.

Tuval kimliği, DOM (Belge Nesne Modeli) yöntemi çağrılarak elde edilir getElementById(). Bu yöntem parametre olarak bir dize değerini kabul eder, bu nedenle mevcut tuvalin adını ona iletiriz.

Örneğin, tuval adı my_canvas, ardından aşağıda gösterildiği gibi tuval kimliği elde edilir−

var canvas = document.getElementById('my_Canvas');

WebGL Çizim Bağlamını Edinin

WebGLRenderingContext nesnesini (veya WebGL Drawing bağlam nesnesini veya yalnızca WebGL bağlamını) almak için, getContext() akım yöntemi HTMLCanvasElement. GetContext () sözdizimi aşağıdaki gibidir -

canvas.getContext(contextType, contextAttributes);

Dizeleri geç webgl veya experimental-webgl olarak contentType. contextAttributesparametresi isteğe bağlıdır. (Bu adıma devam ederken, tarayıcınızın WebGL sürüm 1'i (OpenGL ES 2.0) uyguladığından emin olun ).

Aşağıdaki kod parçacığı, WebGL oluşturma bağlamının nasıl elde edileceğini gösterir. Burayagl elde edilen bağlam nesnesinin referans değişkenidir.

var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');

WebGLContextAttributes

Parametre WebGLContextAttributeszorunlu değildir. Bu parametre, aşağıda listelendiği gibi Boole değerlerini kabul eden çeşitli seçenekler sağlar -

Sr.No.	Öznitelikler ve Açıklama
1	Alpha Değeri true ise, tuvale bir alfa arabelleği sağlar. Varsayılan olarak değeri doğrudur.
2	depth Değeri true ise, en az 16 bitlik bir derinlik tamponu içeren bir çizim tamponu alacaksınız. Varsayılan olarak değeri doğrudur.
3	stencil Değeri true ise, en az 8 bitlik bir şablon tamponu içeren bir çizim tamponu elde edersiniz. Varsayılan olarak değeri yanlıştır.
4	antialias Değeri true ise, kenar yumuşatma uygulayan bir çizim tamponu elde edersiniz. Varsayılan olarak değeri doğrudur.
5	premultipliedAlpha Değeri true ise, önceden çarpılmış alfaya sahip renkleri içeren bir çizim tamponu elde edersiniz. Varsayılan olarak değeri doğrudur.
6	preserveDrawingBuffer Değeri doğruysa, tamponlar temizlenmez ve yazar tarafından temizlenene veya üzerine yazılana kadar değerlerini korur. Varsayılan olarak değeri yanlıştır.

Aşağıdaki kod parçacığı, bir şablon arabelleği ile bir WebGL bağlamının nasıl oluşturulacağını gösterir; anti-aliasing.

var canvas = document.getElementById('canvas1');
var context = canvas.getContext('webgl', { antialias: false, stencil: true });

WebGLRenderingContext oluşturulurken bir çizim tamponu oluşturulur. Context nesnesi OpenGL durumunu yönetir ve çizim arabelleğinde işler.

WebGLRenderingContext

WebGL'deki ana arayüzdür. WebGL çizim bağlamını temsil eder. Bu arayüz, Çizim arabelleğinde çeşitli görevleri gerçekleştirmek için kullanılan tüm yöntemleri içerir. Bu arayüzün nitelikleri aşağıdaki tabloda verilmiştir.

Sr.No.	Öznitelikler ve Açıklama
1	Canvas Bu, bu bağlamı yaratan tuval öğesine bir referanstır.
2	drawingBufferWidth Bu özellik, çizim arabelleğinin gerçek genişliğini temsil eder. HTMLCanvasElement'in genişlik özelliğinden farklı olabilir.
3	drawingBufferHeight Bu özellik, çizim tamponunun gerçek yüksekliğini temsil eder. HTMLCanvasElement'in yükseklik özelliğinden farklı olabilir.