Ngày nay công nghệ đồ họa phát triển vượt bậc. Trong đó vượt trội hơn cả là công nghệ 3D, nó như một cuộc cách mạng, nó xuật hiện như để “dẹp bỏ” công nghệ 2D đã quá già cỗi. Những năm trước đây, để xây dựng 1 ứng dụng hay 1 game 3D chạy được trên máy tính, các lập trình viên phải làm việc rất khổ sở. Nhưng từ khi có sự ra đời của webGL, nó mở ra một chương mới cho công nghệ 3D, đưa công nghệ 3D đến gần cuộc sống hơn. Có thể nói webGL là mối tình ngọt ngào giữa HTML5 và OpenGL ES 2.0.
Trong bài này tôi chủ yếu sẽ giới thiệu làm sao để xây dựng được 1 mô hình 3D render được trên trình duyệt. Các bạn cùng tôi đi vào nhé.
 

Từ đầu bài chúng ta đã nghe khái niệm webGL, vậy webGL là gì?
WebGL là viết tắt của web-base Graphics Library qua đó chúng ta có thể hiểu nó là 1 bộ thư viện ở rộng của Javascript để cho phép nó tạo ra tương tác đồ họa 3D trong bất kỳ trình duyệt nào tương thích. Được phát triển bởi Khronos Group. 
Với cộng đồng phát triển mạnh mẽ, hiện nay có khá nhiều framework được phát triển bởi đông đảo các developer, có thể kể đến PlayCanvas, SceneJS, ThreeJS, BabylonJS. Trong bài này tôi dùng BabylonJS để mô phỏng cho các ví dụ và demo.
                                                                      


Giờ tôi sẽ bắt đầu giới thiệu về cách xây dựng 1 scene đơn giản.
Cấu trúc các file như cây dưới đây:
                                                                         
Với HTML5 đã hỗ trợ <canvas>,  ta tiến hành xây dựng 1 file index.html đơn giản như sau:
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html" charset=utf-8"utf-8" />
    <title>Demo - BabylonJS</title>
    <script src="babylon.js" tppabs="http://localhost/azurewebsites/babylon.js"></script>
    <script src="app.js" tppabs="http://localhost/BabylonAppDemo/app.js"></script>
    <script src="hand.js" tppabs="http://localhost/BabylonAppDemo /hand.js"></script>
    <script src="main.js" tppabs="http://localhost/BabylonAppDemo /main.js"></script>
    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
    <script type="text/javascript">Babylon();</script>
</html>
Ở đây tôi tiến hành import thêm 1 thư viện ngoài (hand.js) hỗ trợ việc tương tác giữa người dùng với các object thông qua bàn phím
Tiếp đến tôi sẽ tạo 1 scene, thành phần quan trọng và không thể thiếu đối với 1 scene đó là khởi tạo 1 Game Scene và active 1 camera
Được định nghĩa ở main.js

var scene;
var Babylon = function () {
    this.canvas = document.getElementById("renderCanvas");
    // Check support
    if (!BABYLON.Engine.isSupported()) {
        window.alert('Browser not supported');
    } else {
        var engine = new BABYLON.Engine(canvas, true);
        var newScene;
        newScene = CreateGameScene(engine);
        newScene.activeCamera.attachControl(canvas);
        scene = newScene;
        engine.runRenderLoop(function () {
            if (scene)
                scene.render();
        });
        window.addEventListener("resize", function () {
            engine.resize();
        });
    }
};

Đến đây chúng ta đã có 1 scene, giống như 1 sân khấu và giờ là việc trang trí, bố trí các Mesh, các object. Các công việc này sẽ được thực hiện ở app.js
Ở đoạn này tôi sẽ trình bày việc tạo 1 số Mesh đơn giản và cách xử lý va chạm giữa các object với nhau
                                                                     
Đây là định nghĩ các trục tọa độ trong scene
-    Tạo 1 khối vuông:
var block1 = new BABYLON.Mesh.CreateBox("top", 3, scene);

Các phương thức
Block1.scaling.z = 2;
block1.scaling.y = 0.6;
block1.position.y = 0;
block1.position.z = -100;

//scaling: scale object theo các phương
//position: set vị trí đặt object

Thực hiện di chuyển 1 object:
Ta thực hiện theo nguyên lý thay đổi position object trong quá trình render, được thực hiện trong registerBeforeRender
Xử lý va chạm:
Tương tự như object block1, tôi tạo được block2
Block1 di chuyển và va chạm đến block2
Ta tiến hành xử lý va chạm, babylonjs đã hỗ trợ việc này thông qua block2.intersectsMesh(block1, false)
Return true nếu giữa block1 và block2 có va chạm trong quá trình render

Các bạn có thể xem ví dụ demo ở đây:
https://googledrive.com/host/0B-eqpBXqeFbtRml1ZlQwZi0xMmM
Download source code tại đây
Còn đây là đồ án tốt nghiệp của tôi sử dụng babylonJS, các bạn có thể trải nghiệm (chịu khó đợi 1 tí, vì các element sẽ load hơi chậm)

Xem tại đây
Lời kết: Trên đây là bài giới thiệu của tôi về Babylonjs, 1 framework mới cho webGL. Cảm ơn các bạn đã theo dõi bài viết này. Lời văn chưa được trôi chảy mong các bạn thông cảm.


Leave a Comment

Fields with * are required.