Với các nhà lập trình viên frontend, chắc hẳn mọi người đã quá quen thuộc với việc phải lặp đi lặp lại những công việc vô tri, rồi HTML, rồi CSS để tạo ra những trang web đẹp và để thoả mãn nhu cầu của khách hàng. Nhưng liệu với sự phát triển của các công nghệ web mới, đến hiện tại thì trên web đã không còn chỉ là HTML hay CSS, chúng ta đã có thể sử dụng được đồ hoạ 3D phức tạp để khiến cho trang web thêm phần sinh động và gia tăng khả năng tương tác cho người dùng. Như tiêu đề đã đề cập, hôm nay chúng ta sẽ cùng bước vào và khám phá khả năng vô tận cùng với đó là gợi ý cách làm quen dễ nhất để bắt đầu tạo ra trải nghiệm 3D của riêng mình.
Chắc hẳn nhiều người trong số các bạn đã nghe về Threejs, một trong những thư viện 3D nổi nhất để làm web hiện nay, và bạn khả năng cao sẽ đinh ninh rằng đây là thư viện nền tảng đầu tiên về 3D trên web. Nhưng, liệu bạn có biết rằng, trước đó cũng đã có nhiều cố gắng được tạo ra để có thể tích hợp 3D trên web, hãy bắt đầu bằng sự cố gắng đầu tiên - Virtual Reality Markup Language
Trang chủ three.js
Vào những ngày xa xưa khi công nghệ web vẫn còn là một thứ gì đó sơ khai(1994) thì chúng ta có một ngôn ngữ tên là Virtual Reality Markup Language(VRML), chúng cho phép các website có thể hiện thị các hình khối, ánh sáng hay âm thanh để các nhà phát triển có thể tạo ra một môi trường 3D tương tác. Tuy nhiên, nó lại không được hỗ trợ trên tất cả các trình duyệt , và kèm theo đó là rất nhiều giới hạn.
Phần mềm làm hoạt ảnh Flash
Macormedia và sau đó là Adobe thống trị nền tảng web vào những năm 1997 cùng với Flash, với việc thông qua việc nhúng plugin đã có khả năng tạo ra đồ hoạ 3D với chất lượng cao và ổn định hơn. Tuy nhiên để có thể viết một trang web bằng Flash thì sẽ cần một phần mềm có bản quyền, và các nhà phát triển cần phải học các phần mềm và ngôn ngữ mới(ActionScript) để có thể làm việc với định dạng này. Cùng với đó dù trang web có hào nhoáng nhưng để có thể tải được cũng tốn rất nhiều dung lượng và thời gian, chúng đặc biệt khó chịu với những người dùng có tốc độ mạng không được cao(ở thời điểm đó).
Một trang web sử dụng WebGL
Cuối cùng, với sự ra mắt của WebGL vào năm 2011 và với những cải tiến đáng kể về hiệu năng với JavaScript vào thời điểm đó đến hiện tại, chúng ta cuối cùng cũng có cho mình một lựa chọn không cần plugin với khả năng tương tích đa trình duyệt siêu tốt. Nhờ vào WebGL mà chúng ta mới có three.js, thư viện đồ hoạ giúp cho việc tạo ra môi trường 3D trên trình duyệt của các nhà phát triển trở nên nhanh hơn nhiều mà không cần các kinh nhiệm khác như các lựa chọn trước đó.
Tuy vẫn còn nhiều giới hạn, đặc biệt về hiệu năng vẫn còn thua kém vì chạy bằng JS, nhưng với nhu cầu của đa số các lập trình viên, đặc biệt là về web, thì như vậy có thể coi là cũng đã quá đủ rồi.
Như đã giới thiệu ở trên thì mọi người chắc cũng đã biết về WebGL, nó là một Javascript API, cho phép bạn kiết xuất đồ hoạ 2D hay 3D tương tác hiệu năng cao cho mọi trình duyệt. Nhưng WebGL đây là một hệ thống thuộc dạng lever rất thấp mà sẽ chỉ cho bạn vẽ các đối tượng cơ bản như điểm, hình vuông hay các đường thẳng. Thêm vào nữa, để lập trình WebGL một cách trực tiếp từ Javascript vô cùng phức tạp và quy trình cũng rườm rà. Với việc nắm chắc kĩ thuật bên trong của WebGL và học một ngôn ngữ đổ bóng phức tạp để có thể tận dụng được hết những gì WebGL có, thì việc làm cho đời bạn bớt khổ sở hơn với ThreeJS có thể sẽ là cứu cánh cho bạn.
/* Step1: Prepare the canvas and get WebGL context */
var canvas = document.getElementById('my_Canvas');
var gl = canvas.getContext('experimental-webgl');
/* Step2: Define the geometry and store it in buffer objects */
var vertices = [-0.5, 0.5, -0.5, -0.5, 0.0, -0.5,];
// Create a new buffer object
var vertex_buffer = gl.createBuffer();
// Bind an empty array buffer to it
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
// Pass the vertices data to the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Unbind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, null);
/* Step3: Create and compile Shader programs */
// Vertex shader source code
var vertCode =
'attribute vec2 coordinates;' +
'void main(void) {' + ' gl_Position = vec4(coordinates,0.0, 1.0);' + '}';
//Create a vertex shader object
var vertShader = gl.createShader(gl.VERTEX_SHADER);
//Attach vertex shader source code
gl.shaderSource(vertShader, vertCode);
//Compile the vertex shader
gl.compileShader(vertShader);
//Fragment shader source code
var fragCode = 'void main(void) {' + 'gl_FragColor = vec4(0.0, 0.0, 0.0, 0.1);' + '}';
// Create fragment shader object
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
// Attach fragment shader source code
gl.shaderSource(fragShader, fragCode);
// Compile the fragment shader
gl.compileShader(fragShader);
// Create a shader program object to store combined shader program
var shaderProgram = gl.createProgram();
// Attach a vertex shader
gl.attachShader(shaderProgram, vertShader);
// Attach a fragment shader
gl.attachShader(shaderProgram, fragShader);
// Link both programs
gl.linkProgram(shaderProgram);
// Use the combined shader program object
gl.useProgram(shaderProgram);
/* Step 4: Associate the shader programs to buffer objects */
//Bind vertex buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
//Get the attribute location
var coord = gl.getAttribLocation(shaderProgram, "coordinates");
//point an attribute to the currently bound VBO
gl.vertexAttribPointer(coord, 2, gl.FLOAT, false, 0, 0);
//Enable the attribute
gl.enableVertexAttribArray(coord);
/* Step5: Drawing the required object (triangle) */
// Clear the canvas
gl.clearColor(0.5, 0.5, 0.5, 0.9);
// Enable the depth test
gl.enable(gl.DEPTH_TEST);
// Clear the color buffer bit
gl.clear(gl.COLOR_BUFFER_BIT);
// Set the view port
gl.viewport(0,0,canvas.width,canvas.height);
// Draw the triangle
gl.drawArrays(gl.TRIANGLES, 0, 3);
Kết quả