Cách tạo 3D siêu ngầu trong website xe đua New Mobile Workforce

  • 04/11/2019
  • 0 Bình Luận

Immersive Garden chia sẻ chi tiết về dự án giành chiến thắng Site of the Month (SOTM) của họ. Đây là cách nhóm Citrix sử dụng dữ liệu để phân tích, mô hình và thiết kế chiếc xe.

Tham khảo đơn vị thiết kế website Doanh nghiệp uy tín, chuyên nghiệp miền Bắc

Chỉ đạo nghệ thuật & thiết kế:

Dự án The New Mobile Workforce được thực hiện phối hợp chặt chẽ giữa Havas San FranciscoImmersive Garden. Havas nảy ý tưởng tạo website doanh nghiệp giống 1 câu chuyện siêu tương tác xoay quanh sự kiện Xe đua công thức 1. Và cách Redbull – Citrix hợp tác để đạt được kết quả tốt nhất trong lĩnh vực chuyên môn của họ.

Ý tưởng chủ đạo là tập trung mang lại hiệu thức thị giác tối đa và phấn khích cao độ. Cần phải tạo ra hai cấp độ điều hướng hoạt động song song làm nổi bật chủ đề cụ thể. Cách kể chuyện về trải nghiệm đưa chúng ta vào cuộc đua từ slide này sang slide khác. Ở cấp độ đầu tiên, người dùng sẽ được trải nghiệm “Livestream Trực Tiếp” nhờ bố cục hình ảnh tách rời các hiệu ứng 3D. Những hiệu ứng này được áp dụng trên các hình ảnh có dự án. Chúng tôi đã hiệu chỉnh chúng một chút nhưng chúng tôi muốn giữ ý tưởng chân thực cho ​​cuộc đua. Vì vậy chúng tôi vẫn giữ hình ảnh hơi thô và thực tế. Ấn tượng về tốc độ sẽ minh họa bằng các hiệu ứng chuyển tiếp hình ảnh bị biến dạng.

Sau đó, trải nghiệm Citrix được tập trung nhiều hơn để tạo sự nhận diện, truy hồi dữ liệu như thấy màn trình diễn Công thức 1. Sẽ dùng gam màu tối hơn và tạo cảm giác nghệ thuật như 1 hậu trường công nghệ tân tiến. Mỗi slide sẽ khác nhau để tương tác tham gia vào các thông tin chính và đồ họa.

Một trong những thách thức thú vị là tạo lượng lớn fan của Redbull đang hò reo đầy hào hứng. Thanh điều hướng đơn giản, hiệu ứng mũi tên và cuộn chuột thiết kế hướng tuyến tính. Nhưng trong đó mỗi cử chỉ có một tác động trực quan. Với mô hình 3D, thị giác(1) và hạt tách khối(2), hiệu ứng chuyển tiếp làm người xem hồi hộp như một cuộc đua F1.

The New Mobile Workforce

Kỹ thuật

Giống hầu hết các dự án khác, cấu trúc DOM được quản lý nhờ Vue.js. CSS đã được biên dịch bằng Stylus, kèm với framework tùy chỉnh và môi trường phát triển trên Browserify.

Các hoạt cảnh động đã được tạo ra cùng với hình ảnh 2D. Với Blender, mô hình 3D được tạo tương đương mẫu thực tế và vẫn tôn trọng từng yếu tố nhỏ.

Sau đó, chúng tôi đã xuất các mô hình này để hiển thị chúng trong thời gian thực với Three.js. Các chuyển động của camera cũng như một số chi tiết cải thiện độ chìm (vật thể, hiệu ứng ánh sáng, khói, v.v.) đã được thêm trực tiếp vào Javascript. Bởi vì camera di chuyển xung quanh cần phải tạo lại kết cấu đằng sau các mô hình 3D.

Hiệu ứng tốc độ trong quá trình chuyển đổi giữa mỗi cảnh đã được tạo bằng hiệu ứng đổ bóng(3). Năm cột phân phối pixel bằng nhau dọc chiều dài ảnh đã được gài để tạo hiệu ứng kéo dài.

Hiệu ứng màu gradient và perlin noise (gây nhiễu Perlin) hiển thị hiệu ứng tốc độ thêm tự nhiên. Khi hiệu ứng tốc độ đã hiển thị hoàn toàn, màn hình nhường chỗ cho màn hình tiếp theo. Hiệu ứng tốc độ sau đó biến mất vì pha trộn màu gradient. Để từ đó chuyển động của camera và thiết kế âm thanh sẽ tăng cường quá trình chuyển đổi này.

Nói chung, hàng tá shader đã được phát triển cho dự án này. Kết hợp giữa cảnh, hiệu ứng và hình họa mà giữ nguyên hiệu suất và tốc tải là khá khó. Giai đoạn này rất cần thời gian để tối ưu hóa và thử nghiệm. Mục đích đảm bảo hình ảnh và mô hình đạt chất lượng tốt ngay cả trên thiết bị di động.

“The New Mobile Workforce” quả là một mẫu website doanh nghiệp điển hình đại diện cho xu hướng thiết kế hiện đại. Nếu bạn muốn tìm hiểu thêm nhiều mẫu website doanh nghiệp đẹp, đừng ngại ngần nhấp chuột nhé!

Nguồn: awwwards.com

Chú thích:

(1) thị giác: nguyên văn bản gốc là “parallax” 
(2) hạt tách khối: nguyên văn bản gốc là “particles” 
(3) hiệu ứng đổ bóng: nguyên văn bản gốc là “shader” 


Tham khảo đơn vị thiết kế website Doanh nghiệp uy tín, chuyên nghiệp miền Bắc

Bài viết liên quan

15 điều NÊN làm trước khi thay đổi giao diện WordPress (21 lượt xem )

Mục lụcChỉ đạo nghệ thuật & thiết kế:Kỹ thuậtChú thích: Nếu bạn đã từng sử dụng WordPress, thì có thể…

Sửa lỗi h-entry với công cụ Xác thực dữ liệu Cấu trúc (30 lượt xem )

Mục lụcChỉ đạo nghệ thuật & thiết kế:Kỹ thuậtChú thích: Tại sao thẻ h-entry (hentry) được coi là lỗi trên…

5 việc cần làm trước khi thuê Designer thiết kế Website (11 lượt xem )

Mục lụcChỉ đạo nghệ thuật & thiết kế:Kỹ thuậtChú thích: Đối với doanh nghiệp nhỏ, thuê một đội thiết kế…

Thiết kế Portfolio trên giao diện di động với Rich Brown (10 lượt xem )

Mục lụcChỉ đạo nghệ thuật & thiết kế:Kỹ thuậtChú thích: Dự án thiết kế Portfolio của Rich Brown là sự…

No ratings!

Chưa có đánh giá

Đánh giá bài viết




Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *