BỘ GIÁO DỤC VÀ ĐÀO TẠO CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

TRƯỜNG ĐẠI HỌC CẦN THƠ Độc lập - Tự do - Hạnh Phúc

ĐỀ CƯƠNG CHI TIẾT HỌC PHẦN

1. Tên học phần: Công nghệ web 3D - 3D Web Technology
- Mã số học phần: TN212
- Số tín chỉ học phần: 3 tín chỉ
- Số tiết học phần: 30 tiết lý thuyết, 30 tiết thực hành, 60 tiết tự học.
2. Đơn vị phụ trách học phần:
- Bộ môn: Tin học ứng dụng
- Khoa: Công nghệ Thông tin & Truyền thông
3. Điều kiện tiên quyết:
4. Mục tiêu của học phần:
4.1. Kiến thức:
4.1.1. Các nguyên tắc cơ bản đồ họa 3D
4.1.2. Các đối tượng trong môi trường 3D
4.1.3. Xây dựng mô hình sử dụng WebGL và X3D
4.1.4. Sử dụng Javascript ở mức cơ bản để xây dựng các ứng dụng WebGL và
thực hiện các chương trình đồ họa 3D cơ bản
4.2. Kỹ năng:
4.2.1. Sinh viên có khả năng sử dụng thành thạo các môi trường, công cụ hỗ trợ
thiết kế web 3D
4.2.2. Phân tích và lựa chọn các mô hình thiết kế phù hợp
4.2.3. Thiết kế và lập trình các web 3D
4.2.4. Kỹ năng giải quyết vấn đề
4.2.5. Kỹ năng khám phá, kỹ năng sáng tạo trong thiết kế
4.3. Thái độ:
4.3.1. Đánh giá đúng các điểm mạnh yếu của các kỹ thuật thiết kế Web 3D
4.3.2. Lên lớp đầy đủ và chuẩn bị theo yêu cầu của giáo viên
5. Mô tả tóm tắt nội dung học phần:
Môn học này giúp cho sinh viên có kiến thức và kỹ năng về lập trình Web3D
bao gồm: nguyên tắc cơ bản đồ họa 3D, các đối tượng trong môi trường 3D; xây
dựng mô hình sử dụng WebGL và X3D; sử dụng Javascript ở mức cơ bản để xây
dựng các ứng dụng WebGL và thực hiện các chương trình đồ họa 3D cơ bản. Môn
học hỗ trợ sinh viên sẽ có cái nhìn tổng quát về các bước xây dựng ứng dụng 3D trên
nền web, trong từng nội dung sẽ có các ứng dụng minh họa các vấn đề thực tế.
Thông qua các bài tập, môn học này sẽ làm nền tảng kiến thức cho sinh viên có thể
tự nghiên cứu và ứng dụng vào các môn học khác như: lập trình ứng dụng web, xây
dựng ứng dụng thương mại điện tử…

1
6. Cấu trúc nội dung học phần: 6.1. Lý thuyết
Nội dung Số tiết Mục tiêu
Chương 1. Tổng quan Web3D 3
1.1. Giới thiệu Web3D 1 4.1.1,4.3.1
1.2. Các phiên bản Web3D 2 4.1.1,4.3.1
Chương 2. Công nghệ WebGL 4
2.1. Định nghĩa kỹ thuật 1 4.1.3,4.3.1
2.2. Đồ họa 3D 1 4.1.3,4.3.1
2.3. WebGL API 2 4.1.3,4.3.1
Chương 3. JavaScript 3D Engine 3
3.1. Giới thiệu Three.js 1 4.1.4,4.3.1
3.2. Cài đặt và sử dụng Three.js 2 4.1.4,4.3.1
Chương 4. Đồ họa với WebGL 4
4.1. Khởi tạo lưới - Mesh 1 4.1.3,4.3.1
4.2. Sử dụng vật liệu, kết cấu, và ánh sáng 1 4.1.3,4.3.1
4.3. Xây dựng hệ thống phân cấp chuyển đổi 1 4.1.3,4.3.1
4.4. Tùy chỉnh hình học 1 4.1.3,4.3.1
Chương 5. Chuyển động trong WebGL 4
5.1. Khởi tạo Tween 1 4.1.3,4.3.1
5.2. Sử dụng các gói kết nối 3 4.1.3,4.3.1
Chương 6. Tương tác trong WebGL 4
6.1. Cài đặt tương tác đối tượng 2 4.1.3,4.3.1
6.2. 2. Thiết lập camera tương tác 2 4.1.3,4.3.1
Chương 7. Tích hợp 2D và 3D trong môi trường web 4
7.1. Kết hợp HTML và WebGL 2 4.1.3,4.3.1
7.2. Tạo ảnh 3D trên trang 2D 2 4.1.3,4.3.1
Chương 8. Công nghệ X3D 4
8.1. Giới thiệu X3D 1 4.1.3,4.3.1
8.2. Sử dụng X3D 3 4.1.3,4.3.1
6.2. Thực hành
Nội dung Số tiết Mục tiêu
Bài 1. Bài thực hành 1 5 4.1.1,4.2.1,4. 2.2,4.2.3,4.3
Bài 2. Bài thực hành 2 5 4.1.2,4.2.1,4. 2.2,4.2.3,4.3
Bài 3. Bài thực hành 3 5 4.1.3,4.2.1,4. 2.2,4.2.4,4.3
Bài 4. Bài thực hành 4 5 4.1.4,4.2.1,4. 2.2,4.2.4,4.3
Bài 5. Bài thực hành 5 5 4.1.4,4.2.1,4. 2.2,4.2.4,4.3
Bài 6. Bài thực hành 6 5 4.1.4,4.2.1,4. 2.2,4.2.4,4.3
7. Phương pháp giảng dạy:
- Thuyết trình kết hợp với trình chiếu
- Vấn đáp
8. Nhiệm vụ của sinh viên:
Sinh viên phải thực hiện các nhiệm vụ như sau:
- Tham dự tối thiểu 80% số tiết học lý thuyết.
- Tham gia đầy đủ 100% giờ thực hành và có báo cáo kết quả.

2
 - Thực hiện đầy đủ các bài tập và được đánh giá kết quả thực hiện.
- Tham dự kiểm tra giữa học kỳ.
- Tham dự thi kết thúc học phần.
- Chủ động tổ chức thực hiện giờ tự học.
9. Đánh giá kết quả học tập của sinh viên:
9.1. Cách đánh giá
Sinh viên được đánh giá tích lũy học phần như sau:
TT Điểm thành phần Quy định Trọng số Mục tiêu
1 Điểm kiểm tra giữa kỳ - Thi thực hành 90 phút 30% 4.1;4.2;4.3
trên máy - Có cộng thêm điểm chuyên cần cho
các sinh viên tích cực
- Bắt buộc dự thi
2 Điểm thi kết thúc học - Thi trắc nghiệm 75 phút 70% 4.1;4.2;4.3
phần - Làm bài tập đồ án môn học
- Tham dự đủ 80% tiết lý thuyết và
- 100% giờ thực hành
- Bắt buộc dự thi
9.2. Cách tính điểm
- Điểm đánh giá thành phần và điểm thi kết thúc học phần được chấm theo thang
điểm 10 (từ 0 đến 10), làm tròn đến một chữ số thập phân.
- Điểm học phần là tổng điểm của tất cả các điểm đánh giá thành phần của học
phần nhân với trọng số tương ứng. Điểm học phần theo thang điểm 10 làm tròn
đến một chữ số thập phân, sau đó được quy đổi sang điểm chữ và điểm số theo
thang điểm 4 theo quy định về công tác học vụ của Trường.
10. Tài liệu học tập:
Thông tin về tài liệu Số đăng ký cá biệt
[1] Don Brutzman, Leonard Daly, X3D: Extensible 3D Graphics
for Web Authors, Morgan Kaufmann, 2010.
[2] Tony Parisi, WebGL: Up and Running, O’Reilly Media,
2012.
[3] Jos Dirksen, Learning Three.js: The JavaScript 3D Library
for WebGL, Packt Publishing, 2013
11. Hướng dẫn sinh viên tự học:
Lý Thực
Tuần Nội dung thuyết hành Nhiệm vụ của sinh viên
(tiết) (tiết)
1 Chương 1 3 0 -Nghiên cứu trước:
1.1 Giới thiệu Web3D +Tài liệu [1]: nội dung từ mục 1.1
1.2 Các phiên bản Web3D đến 1.5, Chương 1
2 Chương 2 4 0 -Nghiên cứu trước:
2.1 Định nghĩa kỹ thuật +Tài liệu [2]: nội dung từ mục 2.1
2.2 Đồ hoạ 3D đến 2.5, Chương 2
2.3 WebGL API

3
3 2.3 WebGL API (tt) Chương 5 0 -Nghiên cứu trước:
3: +Tài liệu [3]: nội dung từ mục 2.1
3.1 Giới thiệu Three.js đến 2.6, Chương 2
3.2 Cài đặt và sử dụng Three.js
4 3.2 Cài đặt và sử dụng Three.js 3 0 -Nghiên cứu trước:
(tt) +Tài liệu [3]: nội dung từ mục 3.1
Chương 4 đến 3.3, Chương 3
4.1 Khởi tạo lưới - Mesh
4.2 Sử dụng vật liệu, kết cấu, và
ánh sáng
5 4.3 Xây dựng hệ thống phân cấp 5 0 -Nghiên cứu trước:
chuyển đổi +Tài liệu [3]: nội dung từ mục 3.4
4.4 Tùy chỉnh hình học đến 3.5, Chương 3 +Tài liệu [2]: nội
Chương 5 dung từ mục 4.1 đến 4.2, Chương 4
5.1 Khởi tạo Tween
6 5.2 Sử dụng các gói kết nối 3 0 -Nghiên cứu trước:
+Tài liệu [2]: nội dung từ mục 4.3
đến 4.4, Chương 4
7 Chương 6 3 0 -Nghiên cứu trước:
6.1 Cài đặt tương tác đối tượng +Tài liệu [2]: nội dung từ mục 5.1
6.2 Thiết lập camera tương tác đến 5.3, Chương 5
8 6.2 Thiết lập camera tương tác 3 0 -Nghiên cứu trước:
(tt) +Tài liệu [2]: nội dung từ mục 5.4
Chương 7 đến 5.5, Chương 5
7.1 Kết hợp HTML và WebGL +Tài liệu [2]: nội dung từ mục 6.1
đến 6.3, Chương 6
9 7.2 Tạo ảnh 3D trên trang 2D 3 0 -Nghiên cứu trước:
Chương 8 +Tài liệu [2]: nội dung từ mục 6.4
8.1 Giới thiệu X3D đến 6.6, Chương 6
+Tài liệu [1]: nội dung từ mục 2.1
đến 2.4, Chương 2
10 8.2 Sử dụng X3D 3 0 -Nghiên cứu trước:
+Tài liệu [1]: nội dung từ mục 3.1
đến 3.5, Chương 3
11 Bài thực hành 1 0 5
12 Bài thực hành 2 0 5
13 Bài thực hành 3 0 5
14 Bài thực hành 4 0 5
15 Bài thực hành 5 0 5
Bài thực hành 6