1 LẬP TRÌNH ĐỒ HỌA 3D TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN Th S Trần Thị Minh Hoàn Email hoantm@tlu edu vn 2 Mục đích môn học Giới thiệu đồ họa máy tính 3D và lập trình đồ họa bằng WebGL[.]
TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN LẬP TRÌNH ĐỒ HỌA 3D Th.S Trần Thị Minh Hồn Email: hoantm@tlu.edu.vn Mục đích mơn học Giới thiệu đồ họa máy tính 3D lập trình đồ họa WebGL JavaScript Giúp sinh viên xây dựng chương trình tương tác đồ họa 3D chạy Windows trình duyệt web Bao gồm chủ đề: Giới thiệu JavaScript, Ngơn ngữ tơ bóng OpenGL ES, Toán học đồ họa 3D Các phép biến đổi, kết cấu, chiếu sáng, quản lý cảnh, tương tác đối tượng Nội dung môn học Giới thiệu mơn học, HTML JavaScript Lưới hình học đệm đối tượng Các phép biến đổi Quan sát, quy trình đồ họa Ơn tập, kiểm tra kì Chiếu sáng Tơ bóng Ánh xạ kết cấu Ơn tập cuối kì Tài liệu tham khảo Tài liệu Bài giảng Lập trình WebGL Trần Thị Minh Hồn hoantm@tlu.edu.vn Bản gốc WebGL Programming Guide Kouichi Matsuda, Rodger Lea Trang web môn học: https://sites.google.com/site/laptrinhwebgl Tổng quan WebGL WebGL (Web-based Graphics Library) công nghệ cho phép vẽ, hiển thị, tương tác với đồ họa máy tính ba chiều phức tạp ("đồ họa 3D") từ trình duyệt web Dễ sử dụng tạo giao diện trực quan cho người dùng nội dung trang web Theo truyền thống, đồ họa 3D sử dụng ngơn ngữ lập trình C C++ với thư viện đồ hoạ OpenGL Direct3D Tuy nhiên, với WebGL, đồ họa 3D phần trang web chuẩn với HTML5 JavaScript Có nghĩa WebGL gắn liền với trình duyệt, dựng hình đồ họa 3D, ta sử dụng WebGL trực tiếp mà không cần thư viện hay plugin đặc biệt Ưu điểm WebGL Tạo giao diện trực quan, trò chơi 3D sử dụng 3D để mô thông tin mạng Dễ sử dụng so với công nghệ khác đảm bảo tính hiệu Bạn bắt đầu phát triển ứng dụng đồ họa 3D cách sử dụng trình soạn thảo văn trình duyệt Ưu điểm WebGL Dễ dàng xuất ứng dụng đồ hoạ 3D web chuẩn Tận dụng chức đầy đủ trình duyệt Có sẵn nguồn tài liệu phong phú để nghiên cứu phát triển Bản chất WebGL Ngơn ngữ lập trình để tạo shader gọi OpenGL ES shading language (GLSL ES) Bởi WebGL dựa OpenGL ES 2.0, sử dụng GLSL ES để tạo shaders 10 Hàm main() Javascript Đặt màu ánh sáng trắng 70 gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0); Chuẩn hóa hướng ánh sáng với hàm normalize() cho đối tượng Vector3 (trong cuon-matrix.js) 71 // Set the light direction (in the world coordinate) 72 var lightDirection = new Vector3([0.5, 3.0, 4.0]); 73 lightDirection.normalize(); // Normalize 74 gl.uniform3fv(u_LightDirection, lightDirection.elements); 19 a_Normal Mảng normal lưu trữ vectơ pháp tuyến đỉnh Sử dụng đệm đối tượng cho vectơ pháp tuyến đỉnh, thực bước đệm đối tượng hàm initArrayBuffer gọi hàm dòng 140 140 if(!initArrayBuffer (gl, 'a_Normal', normals, 3, gl.FLOAT)) return -1; 20 Vecto pháp tuyến cho đỉnh var normals = new Float32Array([ 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, ]); 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 0.0, 1.0, 0.0, -1.0, 0.0, 0.0, 0.0,-1.0, 0.0, 0.0, 0.0,-1.0 21 Bổ sung ánh sáng xung quanh LightedCube_ambient.js Tính màu bề mặt phản chiếu xung quanh = x < base color of surface> Tính màu bề mặt kết hợp phản chiếu khuếch tán phản chiếu xung quanh = + < surface color by ambient reflection> 22 Trong vertex shader 'uniform vec3 u_LightColor;\n' + // Light color 'uniform vec3 u_LightDirection;\n' + 10 'uniform vec3 u_AmbientLight;\n' + // Color ambient light 11 'varying vec4 v_Color;\n' + 12 'void main() {\n' + 17 ' float nDotL = max(dot(lightDirection, normal), 0.0);\n' + 18 // Calculate the color due to diffuse reflection 19 ' vec3 diffuse = u_LightColor * a_Color.rgb * nDotL;\n' + 20 // Calculate the color due to ambient reflection 21 ' vec3 ambient = u_AmbientLight * a_Color.rgb;\n' + 22 // Add surface colors due to diffuse and ambient reflection 23 ' v_Color = vec4(diffuse + ambient, a_Color.a);}\n' + 23 Trong main() javascript 36 function main() { 64 // Get the storage locations of uniform variables and so on 68 var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight'); 80 // Set the ambient light 81 gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2); 24 Ánh sáng đối tượng tịnh tiến-xoay Chương trình LightedTranslatedRotatedCube.js, chiếu sáng lập phương xoay 90 độ quanh trục z tịnh tiến 0.9 đơn vị theo trục y 25 Sự thay đổi hướng pháp tuyến biến đổi tọa độ 26 Quy tắc tính hướng pháp tuyến Nhân pháp tuyến với nghịch đảo chuyển vị ma trận mơ hình Ma trận nghịch đảo chuyển vị tính sau: Đảo ngược ma trận gốc Chuyển vị ma trận kết 27 Vertex shader // Transformation matrix of normal 'uniform mat4 u_NormalMatrix;\n'+ 15 // Recalculate normal with normal matrix and make its length 1.0 16 ' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' + 28 Trong main() Javascript 67 var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix'); 85 var modelMatrix = new Matrix4(); // Model matrix 86 var mvpMatrix = new Matrix4(); // Model view projection matrix 87 var normalMatrix = new Matrix4(); // Transformation matrix for normal 89 // Calculate the model matrix 90 modelMatrix.setTranslate(0, 1, 0); 91 modelMatrix.rotate(90, 0, 0, 1); 100 normalMatrix.setInverseOf(modelMatrix); 101 normalMatrix.transpose(); 103 gl.uniformMatrix4fv(u_NormalMatrix, false, 29 normalMatrix.elements); TRƯỜNG ĐẠI HỌC THỦY LỢI KHOA CÔNG NGHỆ THÔNG TIN LẬP TRÌNH ĐỒ HỌA Th.S Trần Thị Minh Hồn Email: hoantm@tlu.edu.vn Ôn tập Cách tạo kiện Javascript Kiến trúc phần mềm trang web sử dụng WebGL Cấu trúc chương trình webGL có sử dụng ngơn ngữ tơ bóng, hệ tọa độ webGL Cách sử dụng biến thuộc tính, biến đồng nhất, biến thay đổi, cho ví dụ minh họa Cách đăng kí trình xử lí kiện, ví dụ minh họa Bộ đệm đối tượng, bước thực hiện, ví dụ minh họa Lệnh vẽ drawArrays Các chế độ vẽ lệnh Các phép biến đổi theo phương trình tốn học Kiểu đối tượng Matrix4, phương thức biến đổi quay, tịnh tiến, co dãn Tạo hoạt cảnh, ví dụ minh họa Cách sử dụng đệm đơn kết hợp nhiều thông tin đỉnh (tọa độ+ kích thước, tọa độ+ màu, ) Các bước để dán ảnh thực (.jpg) vào shape Biến đổi quan sát, phép chiếu phối cảnh, phép chiếu trực giao Mối quan hệ biến đổi mơ hình, biến đổi quan sát phép chiếu Các bước để vẽ hình hộp lập phương, đệm số, phương thức gl.drawElements() Các loại nguồn sáng (hướng, điểm, xung quanh) kiểu phản chiếu (khuếch tán, xung quanh) Ví dụ minh họa