Tổng Hợp

Tìm hiểu về WebGL phần 1: thư viện đồ họa net.

Posted on by Hoài Thương

Lời Nói Đầu

Vài 5 về trước để lập trình đồ họa trên net người ta dùng những chương trình java – những chương trình này là sự hài hòa của applets và JOGL (1 chương trình được thiết kế để hợp tác Java có OpenGL, nhằm phần phân phối đồ họa 3D được tương trợ bởi hartware cho những chương trình được viết bằng java) có sự tương trợ của GPU. Tuy nhiên do những applets cần JVM để chạy cũng như tính bảo mật ko cao nên người ta đã ngừng dùng nó. Ngoài ấy hãng Adobe cũng phân phối Stage3D API (Flash, AIR) dùng để lập trình những ứng dụng 2D hoặc 3D có sự tương trợ của GPU trên net, tuy nhiên chúng ko được dùng để làm cho chuẩn cho net. Để khắc phục những vấn đề trên WebGL ra đời. WebGL (Net Graphics Library) là 1 thư viện đồ họa dành cho net, nó là chuẩn new cho đồ họa 3D trên net. Được thiết kế để kết xuất ra những đồ họa 2D và đồ họa 3D có thể tương tác được.

Giới thiệu cơ bản về WebGL

1.WebGL là gì?

WebGL (Net Graphics Library) là 1 thư viện đồ họa dành cho net, nó được dẫn xuất từ OpenGL ES (thư viện đồ họa 2D và 3D trên hệ thống nhúng: điện thoại, đồ điện tử, xe cơ giới). WebGL phân phối những chức năng cơ bản tương tự động OpenGL ES và hoạt động phải chăng trên những phân cứng đồ họa 3D tiên tiến. WebGL là javascript API có thể dùng được trong HTML5, WebGL được code trong tag <canvas> của HTML 5, điều này cho phép trình thông qua có thể truy cập và dùng GPU để xuất ra những đồ họa. WebGL được tương trợ bởi đa số những trình thông qua tiên tiến: Chrome, FireFox, IE, Opera…

2.Những ưu điểm của WebGL

  • Ứng dụng WebGL được viết bằng javascript nên những ứng dụng này có thể tương tác quản lý có những phần tử HTML, bên cạnh ra ta có thể dùng thêm những thư viện javascript và những kỹ thuật HTML để tương trợ cho ứng dụng.
  • WebGL cũng tương trợ cho những nền móng di động.
  • WebGL mã nguồn mở.
  • WebGL dùng javascript để code vì vậy nó được tương trợ tự động động quản lý bộ nhớ.
  • WebGL ko cần thiết nên biên dịch để chạy.
  • Dễ dàng thiết lập và chạy, chỉ cần 1 textual content editor và trình thông qua.

3.1 số tri thức cơ bản về đồ họa

3.1.Rendering

Rendering là quy trình sinh ra 1 ảnh (2D hoặc 3D) từ 1 mô hình dùng chương trình máy tính. Trong đồ họa, 1 cảnh ảo (digital scene) được mô tả bởi những thông tin như: hình học, điểm nhìn, cấu trúc bề mặt, bố trí ánh sáng, đổ bóng, cảnh ảo này được truyền qua 1 chương trình render và kết quả output sẽ là 1 ảnh số (digital picture). Có 1 số kiểu rendering:

  • Software program rendering: là quy trình render được thực hành toàn bộ bởi CPU.
  • {Hardware} rendering: là quy trình render được thực hành toàn bộ bởi GPU.
  • Server-base rendering: là quy trình render được thực hiển trên 1 server có hartware đủ manh.
  • Consumer-base rendering: là quy trình reder được thực hành tại shopper.

WebGL dùng những tiếp cận rendering trên shopper để thực hành việc render những cảnh 3D.

3.2.GPU

GPU là 1 chip xử lý được tích hợp engine về: biến dổi chuyển động, tạo ánh sáng, rendering có khả năng xử lý ít nhất 10 triệu đa giác trong 1 giây. Nó gồm hàng nghìn cores bé để xử lý những công việc đồng thời 1 phương pháp hiệu quả. Vì vậy GPU tăng cường quy trình xử lý tạo ra ảnh để xuất ra màn hình.

Xem Thêm  Cụm Từ Verify It Out Là Gì ? Lớn Verify One thing Out: Thử 1 Mẫu Gì Đấy

3.3.Xử lý đồ họa trên GPU

Trong xử lý đồ họa bằng GPU, 1 chương trình sẽ được load vào cpu và xử lý bởi nó cho tới lúc nào gặp những tính toán phức tạo cần sự trợ giúp của GPU thì phần code ấy sẽ được chuyển cho GPU xử lý. Bằng việc GPU có nhiều cores xử lý sẽ làm cho cho quy trình xử lý và render ra những đồ họa 3D nhanh chóng hơn.

4.Giới thiệu về HTML5 canvas

Để có thể viết 1 ứng dụng WebGL ta sẽ dùng thành phần canvas của HTML5. HTML5 canvas phân phối phương pháp dễ dàng để vẽ đồ họa, tạo những ảnh, làm cho những chuyển động đơn giản dùng Javascript. Cú pháp để tạo canvas trong HTML5 là

<canvas id = “mycanvas” width = “100” peak = “100”></canvas>

trong ấy id được dùng để đinh danh cho canvas và ta có thể xác định độ rộng và chiều cao dùng những thuộc tính width và peak.

Canvas mặc định ban đầu là trống. Để vẽ lên canvas ta sẽ truy cập vào rendering context (nôm na là mẫu sẽ phân phối cho ta những hàm mà ta dùng để vẽ lên canvas). HTML5 canvas có 1 hàm getContext() được dùng cho nhiệm vụ trên. Hàm trên có thể nhận tham số “second” giúp chúng ta thu được second context dùng để vẽ những đồ họa second. Để thu được webgl context giúp chúng ta tạo ra những ứng dụng webgl ta cần truyền vào tham số “experimental-webgl”.

5.Cơ bản về WebGL

3.1 Hệ tọa độ trong WebGL.

Hê tọa độ trong WebGL có 3 chiều x, y, z như hệ 3D, tuy nhiên trong ấy z biểu diễn cho chiều sâu. Hệ tọa độ này bị giới hạn trong (1, 1, 1) tới (-1, -1, -1) nghĩa là ví dụ coi màn hình challenge WebGL là 1 hình lập phương thì 1 góc của nó có tọa độ là (1, 1, 1) còn góc đối diện qua tâm là (-1, -1, -1). WebGL sẽ ko hiển thị bất cứ mẫu gì được vẽ bên cạnh giới hạn này.

3.2 Những nền móng của WebGL.

  • Vertices (những đỉnh): thường để vẽ 1 đa giác ta hợp tác những điểm để hình thành đa giác mong muốn. 1 đỉnh là 1 điểm được giao bởi những cạnh của 1 đối tượng 3D. Nó được biểu diễn bởi 3 giá trị số thực tương ứng có từng trục x, y, z. Trong WebGL những đỉnh được lưu trữ bằng mảng javascript.
  • Indices (những chỉ số): là những số nguyên dương dùng để định danh những đỉnh. Những chỉ số được dùng để vẽ những meshes (lưới) trong WebGL. Trong WebGL những chỉ số được lưu trữ bằng mảng javascript.
  • Bufferes (những bộ đệm): Là những vùng bộ nhớ của GPU cấp cho WebGL dùng để giữ information. Có những loại buffer: drawing buffer, body buffer, vertex buffer, index buffer.
    • Vertex buffer object: được dùng để lưu trữ information tương ứng có đỉnh.
    • Index buffer object: được dùng để lưu trữ information tương ứng có chỉ số.
    • Body buffer: là 1 phần của bộ nhớ đồ họa được dùng đẻ lưu trữ information về những cảnh.

3.3 Mesh. (lưới)

Để vẽ 1 đối tượng 3D ta cần tạo 1 hoặc nhiều những đa giác cơ bản dùng những điểm, đường thẳng, hoặc tam giác. Tiếp tục dùng những đa giác này để hình thành lưới đồ họa (mesh). 1 đối tượng 3D được hình thành bằng việc dùng những đa giác cơ bản gọi là mesh.

Xem Thêm  Cafe Đèn Mờ Là Gì – Thiên Đường Cà Phê Đèn Mờ Tại Sài Gòn

6. WebGL Shader Program

Những shaders là những chương trình cho GPU và được viết bằng ngôn ngữ GLSL (OpenGL Embedded System Shader Language). Những chương trình shaders này được dùng để định nghĩa phương pháp những đỉnh biến đổi, ánh sáng, và digital camera tương tác có nhau để tạo ra 1 ảnh cụ thể. Nói những khác nó định nghĩa, cài đặt những thuật toán để từ những điếm ảnh ta có thể tạo ra 1 ảnh vật thể.

6.1 Vertex Shader.

Vertex shader là chương trình được gọi để biến đổi đỉnh. Nó được dùng để biến đổi hình học từ 1 nơi này sang nơi khác. Nó xử lý dữ liệu của từng đỉnh như: tọa độ, màu sắc sắc, texture (cấu trúc bề mặt). Những nhiệm vụ của vertex shader bao gồm:

  • Biến đổi những đỉnh.
  • Vận dụng màu sắc sắc.
  • Tạo ánh sáng.
  • Sinh ra texture
  • Biến đổi texture.

6.2. Fragment Shader (Px Shader).

1 lưới đồ họa được ghép bởi nhiều hình tam giác, và bề mặt của từng 1 tam giác được hiểu là 1 mảnh (fragment). Fragment Shader là phần code chạy trên mọi những điểm của 1 mọi những mảnh. Nó thường dùng để tính toán và tạo màu sắc cho những điểm. Những nhiệm vụ của Fragment Shader là:

  • Truy cập texture.
  • Vận dụng texture.
  • Tạo độ mờ.
  • Tính toán màu sắc sắc.

6.3. 1 vài biến thông thường của OpenGL ES SL (GLSL).

Ta viết những shader program bằng việc dùng ngôn ngữ GLSL. Để xử lý dữ liệu trong shader program GLSL phân phối 1 số biến sau:

  • Attributes: là những biến giữ giá trị đầu vào (enter) của những vertex shader.
  • Uniforms: là những biến giữ dữ liệu đầu vào chung cho cả vertex và fragment shader: vùng ánh sáng, texture, màu sắc sắc.
  • Varyings: là những biến được dùng để truyền dữ liệu từ vertex tới fragment shader.

7.Graphics Pipeline

Để render đồ họa 3D ta cần thực hành 1 chuỗi những bước -> chúng được gọi là graphics pipeline. Có WebGL quy trình này được thực hành như sau:

  • Bước chuẩn bị bằng Javascript, javascript có thể thực hành những hành động sau:
    • Khởi tạo WebGL: trên bước này Javascript được dùng để lấy WebGL context (mẫu chúng ta dùng để thực hiện và vẽ lên canvas).
    • Tạo mảng dữ liệu: ta dùng Javascript để tạo mảng giữ dữ liệu của hình ta cần vẽ.
    • Tạo buffer object: ta tạo buffer object và truyền vào dữ liệu vừa tạo trên trên.
    • Tạo Shader: ta tạo, biên dịch và hợp tác những shader dùng javascript.
    • Tạo Attribute: tạo những attribute và hợp tác chúng có những buffer object dùng Javascript.
    • Tạo Uniforms: tạo và hợp tác những Uniform dùng javascript.
    • Ma trận biến đổi: dùng javascript ta tạo ma trận biến đổi chuyển động.

Lúc dữ liệu của những hình cần vẽ được tạo xong bởi Javascript, ta sẽ truyền chúng cho những shader dưới dạng những đối tượng buffer để xử lý.

  • Vertex Shader.

    • Những dữ liệu được truyền cho vertex shader dạng buffer object được xử lý để render lúc những phương thức sau được gọi drawElements() và drawArray(). Nhiệm vụ của vertex shader là tính toán vùng của những vertex tiếp tục lưu vào biến gl_position, bên cạnh ra nó cũng tính toán màu sắc sắc, texture, và những đỉnh liên quan tới nhau.

  • Primitive Meeting

    • Dữ liệu ta truyền vào những shader xử lý là những đỉnh của những hình học mà ta muốn vễ. Sau thời điểm được những shader xử lý, quy trình primitive meeting sẽ diễn ra để nối những đỉnh lại tạo thành hình cần vẽ.

  • Rasterization

    • Vậy là công việc có vertices đầu vào đã hoàn thành. Việc tiếp theo là biểu diễn vùng những vertices này trên màn hình. Đấy là công việc của rastersizer.
    • Rastersizer sẽ nhận tọa độ vertices đầu vào (đã được biến đổi từ những bước trước) và generates fragment(s) cho những vertices ấy.

  • Fragment shader

    • Trong bước này, fragment shader sẽ lấy từng fragment từ rastersizer và tính toán những giá trị depth, stencil và màu sắc của fragment ấy. Trong bước này, màu sắc của 1 fragment sẽ được quyết định. 1 ưu thế của fragment shader là chúng có thể được dùng có kĩ thuật texture mapping để áp texture lên bề mặt vật thể. Thay đổi vì tô màu sắc, chúng ta có thể “tô” texture.

  • Body buffer: bước cuối cùng để hình muốn vẽ được xử lý về màu sắc sắc, texture và được hiển thị ra màn hình.

Xem Thêm  Kassadin mùa 11 – bảng Ngọc và Phương pháp lên đồ Kassadin new nhất

Thí dụ về những bước xử lý của WebGL.

pineline.PNG

8.Thí dụ cơ bản về WebGL

Dưới đây là dí dụ để vẽ hình tam giác bằng WebGL

<!doctype html> <html> <physique> <canvas width = “300” peak = “300” id = “my_Canvas”></canvas> <script> /* Chuẩn bị canvas và get WebGL context */ var canvas = sentayho.com.vnlementById(‘my_Canvas’); var gl = sentayho.com.vnontext(‘experimental-webgl’); /* Tạo tọa độ những đỉnh dưới dạng mảng và lưu nó vào buffer object */ //Tạo tọa độ đỉnh var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,]; // Tạo buffer object var vertex_buffer = gl.createBuffer(); // bind buffer object có 1 mảng buffer rỗng gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); // Lưu trữ dữ liệu những đỉnh vào buffer. gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); // Unbind buffer gl.bindBuffer(gl.ARRAY_BUFFER, null); /* tạo và biên dich shader program */ // code cho vertex shader var vertCode = ‘attribute vec2 coordinates;’ + ‘void essential(void) {‘ + ‘ gl_Position = vec4(coordinates,0.0, 1.0);’ + ‘}’; //Tạo vertex shader object var vertShader = gl.createShader(gl.VERTEX_SHADER); //gán vertex shader code cho vertex shader object gl.shaderSource(vertShader, vertCode); //biên dịch vertext shader gl.compileShader(vertShader); //Tương tự động có fragment shader var fragCode = ‘void essential(void) {‘ + ‘gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);’ + ‘}’; var fragShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragShader, fragCode); gl.compileShader(fragShader); // Tạo shader program object để lưu trữ shader. var shaderProgram = gl.createProgram(); // gán những shader object cho shasder program gl.attachShader(shaderProgram, vertShader); gl.attachShader(shaderProgram, fragShader); // Hợp tác 2 shader gl.linkProgram(shaderProgram); // Dùng shader program gl.useProgram(shaderProgram); /* Hợp tác shader program có buffer object */ //Bind vertex buffer object gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); //Lấy attribute location của shader program var coord = gl.getAttribLocation(shaderProgram, “coordinates”); gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(coord); /* Vẽ hình */ // Set màu sắc cho canvas gl.clearColor(0.5, 0.5, 0.5, 0.9); gl.allow(gl.DEPTH_TEST); gl.clear(gl.COLOR_BUFFER_BIT); // thiết lập view port gl.viewport(0,0,canvas.width,canvas.peak); // Vẽ hình bắc buộc trên đây là tam giác gl.drawArrays(gl.TRIANGLES, 0, 3); </script> </physique> </html>

Kết quả của đoạn code trên lúc chạy.

Kết Luận

Trên phần trên mình vừa giới thiệu cơ bản nhất về WebGL, và 1 dí dụ về code WebGL để vẽ 1 hình tam giác. Bài viết chưa quá đi sau vào làm cho rõ code, mà dành cho những bài viết tiếp theo sẽ giới thiệu cụ thể hơn về những kểu dữ liệu, những phương thức dùng trong WebGL để vẽ và tạo đồ họa 2D và 3D.

Tài Liệu Tham Khảo

  1. https://www.tutorialspoint.com/webgl/index.htm.
  2. http://vietgamedev.internet/weblog/6906/sử-dụng-opengl-4-3-core-profile-phần-3-rendering-pipeline-i/
  3. http://bookcase.chromeexperiments.com/
  4. http://madebyevan.com/webgl-water/
Hoài Thương