Điều đầu tiên chúng ta nên biết về 3D và Flash, đó là không hề có 3D trong Flash, thậm chí là không hỗ trợ. Các công cụ trên nền Web như Director, Cult3D và Anark vốn đã hỗ trợ 3D, do đó thật là dễ dàng để kết hợp các phần tử 3D vào những thước phim trên nền web. Flash thì lại không như thế, những gì Flash biết chỉ là làm thế nào để hiển thị các kiểu vector lên màn hình và làm thế nào tính toán được các biểu thức toán học. Vì vậy chúng ta có thẻ giả 3D. Thông thường có 2 cách để giả 3D. Thứ nhất là tạo ra một quang cảnh 3D (3D scene) từ một chương trình nằm ngoài Flash, và đưa vào trong quá trình pre- rendered các hoạt ảnh 3D, những thứ mà được thể hiện theo từng frame (khung hình) một. Một cách khác là tạo một thuật toán tính toán 3D động thông qua ActionScript. Chúng ta sẽ tìm hiểu kỹ hơn về cách làm này ngay sau đây.
Trong bước pre-rendered, chúng ta có thể dùng Swift3D và Plasma, chúng là những sản phẩm dùng để vẽ ra một quang cảnh 3D mà bạn muốn xây dựng bên trong chương trình, chúng sẽ được xuất ra thành file swf, file phim như .avi, .mov hay một số định dạng như dãy các hình ảnh, các file này sẽđược đưa vào trong và thao tác bên trong Flash. Hiển nhiên, với file swf, bạn không cần phải sử dụng đến Flash nữa nếu như kết quả của file swf là những gì bạn muốn (ví dụ với Plasma, đó là một môi trường phát triển rất tốt, có thể bạn sẽ không cần phải sử dụng đến Flash để tạo ra một phim Flash với đầy đủ các hàm). Những sản phẩm đó là một giải pháp hay cho các vòng lặp 3D hay phim ảnh, tuy nhiên chúng mang tính chất tuyến tính, tính chất này có thể giới hạn mức độ tương tác mà bạn muốn. Nói cách khác, bạn có thể thực hiện được một số lượng rất ít cá thao tác khi mà phim đã chạy. Mọi thứ nằm trong quá trình pre-rendered và không thể thay đổi trong lúc được chạy bằng Flash player.
Tuy vậy, điều đáng mừng ở đây là mọi kỹ thuật trả về 3D cũng như tính toán trên 3D đều dựa trên toán học, và Flash biết toán! Điều đó có nghĩa là chính ta có thể bắt đầu của mình làm việc, từ sơ khai, sử dụng Flash ActionScript để tạo nên 3D cơ bản sở dụng cơ sở toán học. Chúng ta có thể tạo ra các kiểu vector riêng sử dụng những tính toán và
API về qua trình vẽ của Flash. Bản thân Flash không hề biết chút nào về 3D, chúng chỉ nhìn vào các biểu thức toán học và một vài movieClip trên màn hình hoặc vài phép toán vẽ. Cái mà người sử dụng nhìn thấy, nói cách khác là một sự hiển thị các hình ảnh tinh tế thông qua toán học của một hình thức thể hiện 3D.
Chương 3. Bài toán 3.1. Mục tiêu của bài toán
Bài toán cung cấp quang cảnh đường phố Hà Nội là bài toán đặt ra nhằm mục đích cung cấp được cho người sử dụng các tính năng tương tự như Google Maps Street View hoặc MapJack, có nghĩa là tạo cho người sử dụng cảm giác nhưđang có mặt tại địa điểm đó.
3.2. Phân tích bài toán
Dựa vào các tính năng của Google Maps Street View và MapJack, ta có thể thấy được 2 chức năng nổi trội, đó là quan sát cảnh vật với một góc 360° và việc di chuyển đến các vị trí khác nhau. Do đó, bài toán của chúng ta có thểđược phân tích như sau:
- Xây dựng chương trình cho phép người sử dụng nhìn xung quanh 360° tại 1 điểm. - Cho phép người sử dụng dịch chuyển tới các điểm khác nhau (ý tưởng)
- Cách lưu trữ CSDL (các file ảnh và file xml nếu có)
3.3. Các lý thuyết liên quan
Có nhiều ngôn ngữ lập trình có thể thực hiện được điều này, tuy nhiên trong những ngôn ngữ mà tôi tìm hiểu thì Adobe Flash hoặc Flex Builder cùng với Action Script là công cụ lập trình tốt nhất. Google Maps Street View và MapJack cũng sử dụng công cụ này. Một lý do khác mà tôi chọn công cụ này, đó là chúng tạo ra các tệp tin swf, có thể chạy độc lập, cũng có thể được nhúng (embed) lên một trang web nào đó, chính điều này phù hợp với mục đích của đề tài, đó là cung cấp dịch vụ quan sát quang cảnh đường phố “trên Internet”, với những đoạn mã (code) được viết sẵn, các tệp tin swf dễ dàng nắm bắt và xử lý các sự kiện, cũng như dễ dàng thay đổi đường dẫn tới các tài nguyên bên ngoài thư viện. SWF là viết tắt của ShockWave Flash (hay ShockWay File, ShockWave Format), nhưng do lẫn lộn với ShockWave Director Format, nên hãng Macromedia đã điều chỉnh lại, và từđó SWF là viết tắt của Small Web Format (hay Small Web File).
Adobe Flash hay còn một cách đơn giản là Flash là kỹ thuật đa phương tiện lẫn phần mềm để hiển thị Macromedia Flash Player. Thực ra Macromedia Flash được dùng để ám chỉ chương trình tạo ra các tập tin Flash. Còn từ Flash Player ám chỉ các ứng dụng có nhiệm vụ thi hành hay hiển thị các tập tin Flash đó. Tuy vậy, chữ Flash được dùng để chỉ cả hai chương trình nói trên.
Hình 9. Adobe Flash CS3 Lịch sử Flash
Xuất hiện từ những năm 1993, Adobe Flash (trước đây là Macromedia Flash và trước đó FutureSplash), hay còn gọi một cách đơn giản là Flash, được dùng để chỉ chương trình sáng tạo đa phương tiện (multimedia) lẫn phần mềm dùng để hiển thị chúng Macromedia Flash Player. Chương trình điện toán này được viết và phân phối bởi Adobe Systems (công ty đã mua Macromedia). . Ban đầu, Flash chỉ dựa trên các hiệu ứng ảnh động, những phiên bản đầu tiên thiếu khả năng tương tác với người sử dụng, khả năng tích hợp scripts rất là hạn chế. Phiên bản được sử dụng trong chương trình demo là phiên bản Adobe Flash CS3 và Action Script 3.0; hiện nay hãng adobe đã cho ra mắt phiên bản adbo flash cs4 đi kèm với Adobe Flash Player 10 và Action Script 4.0.
Những phiên bản gần đây sử dụng ActionScript, ngôn ngữ khá giống với JavaScript. Ngôn ngữ này cho phép người sử dụng tương tác tốt hơn trong các (nút ấn, thanh cuộn, mục lục, tiêu đề …) trong các hiệu ứng động Flash.
Định dạng đóng
Tệp tin Flash, với phần đuôi mở rộng .swf được mã hóa và những tài nguyên ảnh, phim sẽ không thể trích ra được một cách trực tiếp. Tuy nhiên có nhiều phần mềm cho phép trích nội dung. Tuy nhiên, mã .swf là một mã đóng. Tuy nhiên tương lai Adobe có vẻ sẽđi theo hướng mở cho cộng đồng.
Ứng dụng
Kỹ thuật Flash có thể được đính vào trang Web hoặc sử dụng như một ứng dụng Internet độc lập (Thực thi tệp tin .swf độc lập không cần phần mềm, ngay cả khi ngắt kết nối Internet). Flash được sử dụng đặc biệt cho các nội dung “RichMedia” hoặc “Motion Design”. Chúng ta có thể trích dẫn ra vài ví dụ sau :
• Tạo trang Web hoặc trò chơi • Tạo ra các hướng dẫn • Tạo các Video truyền hình hoặc điện ảnh • Các ứng dụng Multimedia • Các diaporama tương tác • Các banner quảng cáo
• Truyền chiếu Video qua Internet
Ngoài ra, ứng dụng Flash còn dùng trong nhiểu các phần mềm và định dạng khác, ví dụ :
• Flash Video với đuôi mở rộng .flv
• FlashPaper, định dạng tương tự Acrobat PDF
• Flash Remoting Mx
3.3.2. Flex builder 3.0
Flex Builder 3.0 là phần mềm thiết kế Web, lập trình Web của Adobe. Hổ trợ tốt đối với các sản phẩm thuộc bộ Adobe Creative Suite 3.
Hình 10. Adobe Flex Builder 3.0
Sự ra đời của web thế hệ mới (web 2.0) hình thành nhu cầu tạo ra các ứng dụng trên nền web, gọi là Rich Internet Application (RIA), có khả năng hoạt động tương tựứng dụng Desktop truyền thống. Để tạo RIA, các nhà phát triển thường sử dụng 2 giải pháp:
Một là dùng DHTML (gồm HTML, CSS, Javascript) kết hợp với AJAX. Đây là công cụ rất mạnh, tuy nhiên HTML không phải là một công cụ trình diễn, mà là một chuẩn tài liệu. Javascript chưa đủ mạnh, và thiếu chặt chẽ. DHTML thường gặp vấn đề về tương thích với các trình duyệt. (adsbygoogle = window.adsbygoogle || []).push({});
Giải pháp thứ 2 là dùng Flash (công nghệ ảnh động vector của Adobe). Công cụ này ngày nay được cải tiến rất nhiều, có thể làm các ứng dụng RIA khá tốt. Nhưng Flash sinh ra không phải để làm ứng dụng; công cụ lập trình không chuyên nghiệp, giao diện lập trình hạn chế; chi phí để viết ứng dụng rất lớn do thiếu các thành phần giao diện, thư viện hỗ trợ…
Để khắc phục những nhược điểm này, Adobe đưa ra công nghệ Flex - một nền tảng công nghệ, công cụ phát triển ứng dụng RIA chuyên nghiệp. Với Flex, lập trình viên có thể kết hợp giữa phương pháp thiết kế kéo - thả và phương pháp viết mã lệnh, giúp xây dựng từng phần của ứng dụng một cách thích hợp. Sản phẩm của Flex có thể được xuất sang thành ứng dụng Desktop (AIR). Flex hiện gồm 2 thành phần chính là MXML (Macromedia XML) và ActionScript 3.0 (xây dựng theo ECMAScript 4). ActionScript 3.0 giống Javascript, dễ học và có thể lập trình hướng đối tượng.
Để xây dựng RIA, người ta sử dụng Flex Builder kết hợp với công nghệ dịch vụ dữ liệu Flex (Flex Data Services – FDS) và biểu đồ Flex (Flex Charting). Các công nghệ này giúp đơn giản hoá việc phát triển ứng dụng và tạo ra các ứng dụng có chất lượng tốt hơn. Nếu không mua Flex Builder, các nhà phát triển có thể sử dụng công cụ Flex SDK miễn phí và có khá đầy đủ tính năng. Ngoài ưu thế công nghệ, so với các giải pháp thiết kế RIA khác, Flex có sự hậu thuẫn mạnh mẽ vì phát triển trên nền tảng Flash nổi tiếng và được nhiều người sử dụng. Những người dùng Flash nay chuyển lên Flex không cần phải thay một nền tảng khác.
AIR của Adobe giữ vai trò làm môi trường hoạt động cho các chương trình RIA được xây dựng trong các ứng dụng Adobe Flash, HTML, và AJAX. Sản phẩm AIR bao gồm Safari WebKit browser engine, chức năng cơ sở dữ liệu cục bộ SQLite và các hàm APIs.
Với khả năng chạy trên Windows và Macintosh, AIR mang lại cho các ứng dụng trên Web có khả năng thao tác giống với một ứng dụng thông thường chạy trên môi trường desktop như kéo thả, thông tin hệ thống ( system notification ), và khả năng truy xuất file hệ thống cục bộ.
Một ưu điểm của AIR đó chính là các ứng dụng được viết ra để hoạt động với AIR sử dụng cùng một công nghệ như khi xây dựng các ứng dụng Web thông thường, bao gồm có Adobe Flex, Flash,HTML và JavaScript vì vậy sẽ rất thuận lợi cho các nhà phát triển cũng như các lập trình viên.
… Các công ty này đều cho biết họ sẽ triển khai và sử dụng công nghệ này do không cần phải đào tạo hay tuyển dụng thêm nhân viên.
3.3.3. Action Script
ActionScript là một ngôn ngữ lập trình hướng đối tượng (object-oriented
programming language) với các đối tượng như class, interface và packages được dùng cho các văn lệnh kịch bản (script) cho các phim dùng Adobe Flash
Hình 11. Action Script 3.0 Logo
3.3.4. Open Sources
Adobe Flash CS3 và Action Script 3.0 không hỗ trợ 3D, do đó tôi đã tìm hiểu các open source (mã nguồn mở) hỗ trợ 3d cho flash, bao gồm papervision3d, sandy và away3d. Sau một thời gian tìm hiểu, ý tưởng chung của 3 open source này tương đối giống nhau, khác chăng chỉ là các đặt tên các class và bố cục của nó. Tôi đã chọn sử dụng away3d.
Các Class có liên quan của away3d sẽđược nêu trong mục giải quyết bài toán.
3.4. Giải quyết bài toán
o Xây dựng chương trình cho phép người sử dụng nhìn xung quanh 360° tại 1 điểm.
o Cho phép người sử dụng dịch chuyển tới các điểm khác nhau (ý tưởng)
o Cách lưu trữ CSDL (các file ảnh và file xml nếu có)
3.4.1. Xây dựng chương trình cho phép người sử dụng nhìn xung quanh 360°
Đây có thể coi là hạt nhân, là phần quan trọng nhất của bài toán.
Trong bài toán “cung cấp quang cảnh đường phố Hà Nội”, đối với việc xử lý nhìn góc 360 độ tại 1 điểm, tạo cảm giác 3d, có nhiều phương pháp thực hiện khác nhau:
- Xử lý 1 ảnh 360 độ, cắt ảnh thành nhiều phần, mỗi phần 1 pixel, sau đó bắt sự di chuyển của chuột để đưa vào mảnh nào thích hợp, Action Script hỗ trợ bằng lệnh copyPixel. Yêu cầu: có ảnh 360 độ
Ví dụ:
Hình 12. Ví dụ vềảnh 360°
- Tạo một khối lập phương (cube) trong không gian 3d, đưa ảnh vào các mặt trong của khối lập phương đó. Yêu cầu: phải có ảnh thích hợp với từng mặt của khối. - Các phương pháp khác
Cách thứ nhất có thể thực hiện dễ dàng, tuy nhiên kết quả thu được không tạo cho người sử dụng cảm giác 3d, đơn giản chỉ là 1 bức ảnh 2d có thể kéo qua kéo lại.
MapJack cũng sử dụng ảnh 360°, nhưng ảnh được chia thành từng mảnh nhỏ (pieces), có thuật toán xử lý với các mắt cá (fisheyes) và các thuật toán xác định từng pixel nào của ảnh đang nằm ở vị trí nào trên màn hình, và với độ zoom cùng với việc co giãn ảnh (scale) ứng với từng pixel, các pixel càng gần 2 lề của màn hình thì càng đc zoom to, tạo cho ta cảm giác nhưđang “nhìn”, có nghĩa là càng ở gần thì vật càng lớn (ở 2 lề), càng xa thì vật càng nhỏ (ở giữa). Hạn chế của MapJack là chỉ cho nhìn 360° xung quanh chứ không cho phép nhìn phía trên và bên dưới.
Cách thứ 2 cho kết quả khá khả quan, Google Maps Street View cũng sử dụng cách làm này, tuy nhiên, để có thể chụp được ảnh cho cả 6 mặt của khối lập phương, cần phải có sựđầu tư về phương tiện. Phương tiện đó là 1 chiếc máy ảnh với 6 camera được bố trí để chụp 6 hướng tại một điểm bất kỳ, chụp 6 ảnh tại cùng một thời điểm, các ảnh này khi ghép vào khối lập phương sẽ khớp với nhau, người sử dụng khó có thể phát hiện ra mối nối.
Để phục vụ cho việc sử dụng cách này, hiện nay tôi đã chụp ảnh 4 hướng tại 1 điểm để gán vào 4 mặt xung quanh của khối lập phương, 4 ảnh này có thểđược tạo bằng cách chia bức ảnh 360 độ thành 4 phần bằng nhau. Nếu dùng máy ảnh thông thường chụp các bức ảnh tại 1 điểm theo các hướng khác nhau rồi ghép lại thành ảnh 360 độ thì sai số sẽ rất cao, đồng thời khó tìm được nơi nào mà cảnh vật và con người đều bất động cho ta chụp vì khi ta chụp với góc nhìn này, chuyển sang góc nhìn khác để chụp tiếp sẽ mất một khoảng thời gian, con người, phương tiện di chuyển sẽ gây sai số khi ghép nối các ảnh.
Về mặt lý thuyết, nhưđã nêu ở trên, cách tạo ra ảnh nhìn 360° là sử dụng một khối lập phương với 6 mặt được gán ảnh. Chúng ta cần tạo 1 khối lập phương như vậy, cần 1 container để chứa các đối tượng 3d, cần một điểm nhìn (view point) và 1 camera để quan sát các đối tượng được đưa vào không gian 3D này. (adsbygoogle = window.adsbygoogle || []).push({});
Có một phương pháp khác là là sử dụng ảnh mặt cầu, tưởng tượng bề mặt của quả địa cầu, trong các sách giáo khoa địa lý, để thể hiện bề mặt địa cầu, người ta thường giãn ra thành một bức ảnh trên giấy, tương tự, đây là một ví dụ vềảnh mặt cầu (sphere)
Hình 13. Ảnh mặt cầu
3.4.2. Xử lý việc cho phép người sử dụng dịch chuyển tới các vị trí khác nhau
Việc di chuyển từđiểm này tới điểm khác trong chương trình, đơn giản chỉ là thay đổi hình ảnh hiển thịđược gán trên 6 mặt của khối lập phương.
- Sử dụng bàn phím: Bắt sự kiện người sử dụng bấm vào một phím nào đó của bàn phím, nếu phím được bấm là lên (hoặc xuống), ta thay đổi đường dẫn tới 6 ảnh ứng với 6 mặt. Khi sử dụng bàn phím, chỉ cho phép dịch chuyển tới điểm liền kề phía trước (hoặc phía sau).
- Sử dụng các button có trên màn hình: ta sẽ tạo ra 2 button tiến lên và lùi lại trên