Bước tiếp theo là cách biểu diễn các tệp tin cảnh video 3D đã được đóng gói đó ra nền web cùng một thời điểm.
Hình 3.39 Màn hình biểu diễn 2 diễn viên là 2 cảnh video 3D cùng một thời điểm
Chức năng này hoạt động và xử lý dữ liệu theo luồng sau: khi người dùng chọn xem video 3D từ thư viện video 3D, hệ thống sẽ lấy thông tin video 3D mà người dùng chọn từ cơ sở dữ liệu, và đưa thông tin tệp tin đã đóng gói vào đoạn script.
<script>
var clip3D = new h3r.Clip(document.getElementById("main")); let jsonURL = 'files/3d/<%= json%>';
let prog = clip3D.appendJson(jsonURL); prog.onFinishAll = function () {
totalTime.textContent = formatTime(clip3D.duration); }
</script> <script>
function appendJson(url) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) { var serverResponse = this.responseText;
var h3r = JSON.parse(serverResponse); /** sence video 3d */ progress.needDone = h3r.gltf.length; h3r.gltf.forEach(function (gltf) { appendGLTF(gltf); }); /** audio */ if (h3r.bgm) {
audio = new Audio(h3r.bgm); }
console.log(audio); }
}
xhttp.open("GET", url, true); xhttp.send();
return progress; }
</script>
Trong đó:
clip: là khai báo mới đối tượng video 3D
h3rURL : là đường dẫn đến tệp tin đóng gói trong chức năng upload tệp tin video 3D
prog: là quá tiến trình mà hệ thống tải các tệp tin lên
Hệ thống sử dụng thư viện Three.js và các hàm mở rộng để biểu diễn tất cả các cảnh trong tệp tin json đã đóng gói. Tệp tin json sẽ được đọc để lấy ra các thông tin của tệp tin nhạc, video 3D sau đó hàm mở rộng sẽ nối chúng vào thành một video 3D đầy đủ và biểu diễn lên trình duyệt web.
Với các chức năng trên, hệ thống đã hiện thực hóa được ý tưởng tổng hợp các cảnh diễn vào một vở diễn và thể hiện cùng lúc các cảnh diễn, giúp giảm được thời gian biên tập nội dung 3D, giúp tái sử dụng được các cảnh diễn.
Ngoài các chức năng hỗ trợ việc biên tập nội dung và biểu diễn cùng lúc nhiều nội dung 3D trên nền web, hệ thống cũng đã cung cấp các chức năng biên soạn bài giảng có hỗ trợ việc nhúng nội dung đa phương tiện và nội dung video 3D vào bài giảng, chức năng biên tập nội dung bài giảng có so sánh giữa các vai diễn trong video 3D với video 3D và giữa video 2D với video 3D, chức năng xem nội dung bài giảng,… dưới đây là một số hình ảnh chụp từ hệ thống.
Hình 3.40 Màn hình biên tập bài giảng có hỗ trợ nhúng nội dung đa phương tiện từ thư viện