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.
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 (adsbygoogle = window.adsbygoogle || []).push({});
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.
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 màn hình, việc xử lý 2 button này tương tự với viêc xử lý di chuyển từ bàn phím, có nghĩa là chỉ cho phép tiến lên (hoặc lùi lại) tới điểm liền kề với điểm hiện tại. Đối với 2 cách này, xử lý trên 1 đoạn đường thẳng sẽ cho kết quả tốt, tuy nhiên, đến những đoạn ngã 3 hay ngã tư, hoặc đoạn rẽ vào những con đường nhỏ, vì chỉ có 2 button (và 2 phím )là tiến và lùi, việc thay đổi phương hướng để rẽ sang ngả khác là không thể thực hiện được. Vấn đề cũng xảy ra khi ta nhìn xung quanh, nếu ta quay ngược lại 180°, khi đó tiến lên hoặc lùi lại sẽ ngược??? Do đó ta cần phải kiểm soát về phương
hướng và góc nhìn của người sử dụng, để có thểđưa người sử dụng tới đúng vị trí mà họ chọn.
- Cách thứ 3, đó là định vị sẵn phương hướng ngay trên bản đồ cho người sử dụng. Google Maps Street View sử dụng 1 đường thằng nằm nối từ điểm hiện tại tới các điểm gần nó nhất, còn MapJack sử dụng các điểm nằm trên đường. Vấn đề đặt ra ở đây là “trục” làm thế nào để nằm được trên đường, khi ta nhìn xung quanh thì trục cũng phải di chuyển theo. Vì tại mỗi điểm thì “trục” sẽ khác nhau (có thể cong sang hướng khác, cũng có thể đến ngã rẽ), do đó việc thiết lập “trục” cho từng điểm là bất khả thi. Ý tưởng ở đây chính là: ta thiết kế một trục đường dựa trên hình dạng con đường thật, trên trục ta định vị tọa độ cho các điểm mà ta chọn làm điểm quan sát (view point), tại điểm nào ta sẽ load ảnh tương ứng với điểm ấy. “Trục” phải được đưa vào trong không gian 3D, với độ quay thích hợp với độ quay của khối lập phương để “trục” không bị lệch ra khỏi đường. Đối với MapJack, do có các điểm xanh nằm trên mặt đường nên việc xác định vị tri điểm tiếp theo dễ dàng hơn, đồng thời cho ta hình ảnh cụ thể về con đường. Còn đối với Google Maps Street View, việc nối từ điểm này tới các điểm liền kề không cho người sử dụng hình dung được hình dạng của con đường, nhất là tại các ngã rẽ.
Google Maps Street View và MapJack đều có bản đồ nhỏ, trên bản đồ nhỏ đó có các điểm ứng với các điểm trên bản đồ lớn. Các điểm đó có thuộc tính là kinh độ (Longitude) và vĩ độ (latitude ), khi người sử dụng click vào bản đồ nhỏ, chương trình sẽ tìm điểm gần với vị trí click chuột nhất, lấy ra 2 giá trị kinh độ và vĩđộ.
Trên bản đồ lớn, nhận 2 giá trị vừa lấy được và hiển thị ra màn hình hình ảnh của điểm có tọa độ tương ứng. Bản đồ lớn và bản đồ nhỏ là 2 flash độc lập với nhau, việc truyền biến thì flash này sang flash khác, ta có thể sử dụng đến hàm localConnection của flash.
Việc tạo sẵn một trục của bản đồ như vậy thường dẫn đến sai lệch giữa trục và hình dạng con đường thật, và việc tính toán độ xoay của góc nhìn người sử dụng sao cho khớp với gọc nhìn của trục cũng khá khó khăn. Liệu có cách nào mà ta xác định được vị trí của các điểm gần với vị trí hiện tại, hiển thị chúng lên và điều quan trọng là “đặt” chúng trên đường, không bị lệch ra ngoài? Câu trả lời là có, đó là sử dụng hotspot (các điểm nóng). Các điểm nóng được đưa lên và cố định vào một vị trí nào đó của flash, hostspot được đưa lên tại layer 2 của flash, trong khi layer 1 xử lý việc hiển thịảnh 360°, khi ta click vào một hotspot, chương trình sẽ gọi một hàm tương ứng (giống như (adsbygoogle = window.adsbygoogle || []).push({});