Khóa luận Nghiên cứu phát triển hệ thống thử nghiệm cung cấp quang cảnh đường phố Hà Nội

ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Đinh Nhật Minh NGHIÊN CỨU PHÁT TRIỂN HỆ THỐNG THỬ NGHIỆM CUNG CẤP QUANG CẢNH ĐƯỜNG PHỐ HÀ NỘI KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin HÀ NỘI - 2009 ĐẠI HỌC QUỐC GIA HÀ NỘI TRƯỜNG ĐẠI HỌC CÔNG NGHỆ Đinh Nhật Minh NGHIÊN CỨU PHÁT TRIỂN HỆ THỐNG THỬ NGHIỆM CUNG CẤP QUANG CẢNH ĐƯỜNG PHỐ HÀ NỘI KHOÁ LUẬN TỐT NGHIỆP ĐẠI HỌC HỆ CHÍNH QUY Ngành: Công nghệ thông tin Cán bộ hướng dẫn: TS. Nguyễn Ngọc Hóa HÀ NỘI - 2009 LỜI CẢM ƠN Em xin gửi lời cảm ơn chân thành và biết ơn sâu sắc tới Tiến sĩ Nguyễn Ngọc Hóa (Bộ môn Công Nghệ Thông Tin - Trường Đại học Công Nghệ) đã chỉ bảo và hướng dẫn tận tình cho em trong suốt quá trình thực hiện khoá luận này. Em xin gửi lời cảm ơn và biết ơn sâu sắc tới các thầy, cô đã dạy dỗ em trong suốt 4 năm học tập tại trường Đại học Công Nghệ. Những kiến thức các thầy, cô dạy là vô cùng quý báu và sẽ là hành trang để em vững bước vào đời. Em cũng xin chân thành cảm ơn các anh, chị trong phòng Công nghệ phần mềm – Trung tâm Công nghệ phần mềm – Tập đoàn Điện lực Việt Nam đã tạo điều kiện, giúp đỡ về mặt kỹ thuật và động viên tinh thần cho em trong quá trình làm khoá luận. Tôi xin gửi lời cảm ơn tới các bạn sinh viên trong lớp K50HTTT hiện nay và các thành viên lớp K50CA trước đây, cùng bạn bè đã ủng hộ và khuyến khích tôi trong quá trình nghiên cứu và làm khoá luận này. Và cuối cùng, con xin gửi lời cảm ơn và lòng biết ơn tới bố, mẹ, anh chị, cảm ơn những người thân yêu của tôi, đã nuôi nấng, dạy dỗ và luôn động viên, làm chỗ dựa tinh thần cho tôi trong cuộc sống cũng như trong học tập và làm việc. Xin chân thành cảm ơn! Hà Nội, ngày 25 tháng 05 năm 2006 Sinh viên Đinh Nhật Minh Tóm tắt nội dung: Tên đề tài của khóa luận là : Nghiên cứu phát triển hệ thống thử nghiệm cung cấp quang cảnh đường phố Hà Nội. Cung cấp quang cảnh đường phố Hà Nội có nghĩa là cho phép người sử dụng quan sát được các hướng xung quanh tại một điểm, tạo cho người sử dụng cảm giác đang đứng tại vị trí đó, đồng thời cho phép họ di chuyển tới các vị trí khác. Nội dung khóa luận này sẽ giới thiệu về các dịch vụ nổi tiếng trên thế giới trong lĩnh vực tương tự, nêu lên phương pháp và công cụ mà họ sử dụng, từ đó nêu lên tính cần thiết cũng như khả thi của đề tài. Khóa luận sẽ nêu lên bài toán cần thực hiện, phân tích bài toán thành các module nhỏ, đồng thời đưa ra cơ sở lý thuyết, phương hướng thực hiện cho từng module. Cuối cùng sẽ là chương trình demo sản phẩm, các hạn chế và phương hướng phát triển. Mục lục Danh sách các hình vẽ được sử dụng trong khóa luận Hình 1. Hình ảnh quang cảnh đường phố của Google Maps Street View 6 Hình 2. Hình ảnh quang cảnh đường phố của MapJack 7 Hình 3. Giao diện công cụ của MapJack 8 Hình 4. Ba phép chiếu trực giao của một đối tượng 14 Hình 5. Phép chiếu cùng kích thước của một đối tượng lên bề mặt quan sát 15 Hình 6. Phép chiếu vuông góc lên mặt phẳng chiếu 16 Hình 7. Phép chiếu phối cảnh của trên mặt phẳng chiếu. 18 Hình 8. Các quang cảnh phối cảnh của một hình lập phương. 20 Hình 9. Adobe Flash CS3 24 Hình 10. Adobe Flex Builder 3.0 26 Hình 11. Action Script 3.0 Logo 28 Hình 12. Ảnh 360° 29 Hình 13. Ảnh mặt cầu 31 Hình 13. Cách định hướng của Google Maps Street View 32 Hình 14. Ảnh mờ của ảnh mặt cầu 34 Hình 15. Ảnh mờ của 6 mặt khối lập phương 34 Hình 16. Ảnh 6 mặt tại một điểm 41 Hình 17. Kết quả thu được 41 LỜI MỞ ĐẦU Du lịch là nhu cầu khá phổ biến hiện nay tại nhiều quốc gia, trong đó có Việt Nam, nhưng thật khó khăn cho khách hàng trong việc lựa chọn địa điểm du lịch, nếu chỉ thông qua tranh ảnh, các tờ rơi, quảng cáo thì chắc chắn sẽ không được chính xác. Còn gì tiện lợi hơn khi bạn có thể “xem” “tận mắt” những địa điểm mà bạn đang đắn đo, để xem mình thích nơi nào hơn khi mà bạn chẳng phải đến tận nơi, vẫn ngồi nhà, nhâm nhi cốc café hay đang tán gẫu cùng bạn bè về chuyến du lịch sắp tới. Tất cả những gì bạn cần làm là một trình duyệt web và kết nối internet. Như chúng ta đã biết, Google Maps Street View là một dịch vụ khá nổi tiếng trên thế giới hiện nay. Dịch vụ này cho phép người sử dụng “đi lại” trên đường phố tại một nơi nào đó. “Đi lại” ở đây được hiểu theo nghĩa bạn có thể thấy được phong cảnh, đường phố tại nơi bạn chọn, những cảnh này được chụp lại nên tính trung thực rất cao, bạn hoàn toàn có thể yên tâm không phải lo nghĩ rằng phong cảnh nơi sắp đến có làm bạn thất vọng hay không. Tuy nhiên, do hạn chế về mặt quy mô, nên Google Maps Street View mới chỉ thực hiện được trên một số thành phố tại một số quốc gia. Còn tại Việt Nam thì sao? Nếu Google để mắt tới Việt Nam, thì may chăng chỉ có một số thành phố lớn được đưa vào CSDL của Google Maps. Vậy tại sao chúng ta không tự xây dựng một dịch vụ tương tự như vậy trên chính đất nước của mình? Với thực trạng đó, mục tiêu chính của khoá luận tốt nghiệp của tôi được tập trung xoay quanh tìm câu trả lời cho câu hỏi trên. Trong quá trình nghiên cứu, tìm hiểu và thực hiện khóa luận này, những kết quả bước đầu thu được chứng minh được việc cung cấp dịch vụ quang cảnh đường phố là hoàn toàn có thể thực hiện được với những công nghệ và kỹ thuật hiện nay của Việt Nam. Chương 1. Tìm hiểu về các dịch vụ cung cấp quang cảnh đường phố Như chúng ta đã biết, Google Maps Street View và MapJack là 2 dịch vụ khá nổi tiếng trong lĩnh vực này, để có thể nắm rõ hơn về mục tiêu của khóa luận, trước hết chúng ta hày cùng tìm hiểu đôi nét về 2 dịch vụ này Google Maps Street View Google Maps (thời gian trước còn gọi là Google Local) là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google và hỗ trợ nhiều dịch vụ dựa vào bản đồ như Google Ride Finder và một có thể dùng để nhúng vào các trang web của bên thứ ba thông qua Google Maps API (Application Programing Interface). Nó cho phép thấy bản đồ đường xá, đường đi cho xe đạp, cho người đi bộ (những đường đi ngắn hơn 6.2 dặm) và xe hơi, và những địa điểm kinh doanh trong khu vực cũng như khắp nơi trên thế giới. Google Maps trước đây chỉ có ảnh chụp từ vệ tinh, với độ phóng to, thu nhỏ mà vẫn cho hình ảnh khá rõ, qua đó ta có thể biết được tuyến đường này, khu vực này ở đâu, đi từ vị trí này đến vị trí kia bằng cách nào. Cách đây không lâu, Google Maps đưa thêm một tính năng mới với tên: Google Maps Street View. Tính năng này cho phép người sử dụng nhìn cận cảnh đường phố, nhà cửa, tạo cho người sử dụng cảm giác như chính họ đang đi trên con đường đó vậy. Có thể nói đây là một bước đột phá của Google. Hình 1. Hình ảnh quang cảnh đường phố của Google Maps Street View Google Maps Street View cho phép người sử dụng nhìn xung quanh bằng cách sử dụng chuột hoặc các button phía trên bên trái của bản đồ, cũng có thể dùng 2 phím mũi tên sang trái, sang phải để nhìn 2 bên cùng với 2 phím page up và page down để nhìn bên trên và bên dưới. Người sử dụng có thể di chuyển đến địa điểm khác, có các cách sau: Sử dụng 2 phím mũi tên lên và xuống để di chuyển đến điểm liền kề trước hoặc sau trên bản đồ Sử dụng mũi tên có trên màn hình để di chuyển đến điểm liền kề trước hoặc sau trên bản đồ Di chuyển hình người trên bản đồ nhỏ (mini map) tới vị trí cần đến (không giới hạn là chỉ đi đến những điểm ngay kề với vị trí hiện tại) Chế độ zoom của Google Maps Street View khá tốt, cho ảnh có độ nét chấp nhận được khi phóng to. Tương tự như khi nhìn xung quanh, có thể sử dụng chuột giữa (wheel mouse) hoặc 2 button + và – có trên bản đồ. Ngoài ra, trên mini map có thể zoom in hoặc zoom out để hiển thị chi tiết cũng như thu gọn đường phố. MapJack MapJack là một công ty, làm việc giống như Google. Mục đích của MapJack, theo như những gì được nói trên trang chủ của mình là cung cấp một bức tranh toàn cảnh về các thành phố trên toàn thế giới. Nhưng hiện tại MapJack mới chỉ cung cấp quang cảnh cho một số thành phố của Thái Lan. Hình 2. Hình ảnh quang cảnh đường phố của MapJack Các tiện ích của MapJack về cơ bản giống như Google Maps Street View, tuy nhiên cũng có nhưng điểm khác nhau, đó là: Để thay đổi góc nhìn, người sử dụng có thể sử dụng chuột hoặc 2 phím mũi tên sang trái và sang phải Để thay đổi vị trí quan sát, có thể dùng 2 phím mũi tên lên và xuống, hoặc 2 button góc dưới bên trái của bản đồ lớn. Chế độ zoom tương tự như của Google Maps Street View, đó là dùng chuột giữa (wheel mouse) hoặc 2 button zoom in và zoom out góc dưới bên trái của bản đồ lớn. Ngoài ra MapJack còn đưa thêm 2 phím Z và X tương ứng với zoom in và zoom out. Bản đồ nhỏ (mini map) đặt ở vị trí bên dưới bản đồ lớn, kích thước lớn hơn so với mini map của Google Maps Street View, do đó dễ xác định vị trí hơn. Khác với Google Maps Street View sử dụng một đường thẳng làm trục chính, MapJack sử dụng các điểm xanh (Blue Dots) làm trục cho con đường của mình, người dùng có thể thay đổi vị trí đến bất cứ điểm xanh nào mà họ nhìn thấy bằng cách click chuột trái vào điểm đó, trong khi Google Maps Street View chỉ cho phép tiến đên điểm ngay sau đó. MapJack cung cấp thêm các công cụ (tools) tùy chọn cho người sử dụng như độ sắc nét (Sharpness), chất lượng ảnh (Quality), hay đổi độ rộng góc nhìn của mắt (Prjection), ánh sáng (Brightness)… Hình 3. Giao diện công cụ của MapJack Chương 2. Một số lý thuyết về đồ họa 3D Giới thiệu Đồ họa máy tính 3D là công việc tạo ra nghệ thuật đồ họa, nghĩa là tạo ra với sự trợ giúp của máy tính kĩ thuật số và các phần mềm 3D. Nói chung thuật ngữ này có thể hiểu như là tiến trình tạo ra đồ họa, hoặc việc nghiên cứu công nghệ đồ họa máy tính 3D và liên quan tới công nghệ đó. Đồ họa máy tính 3D khác với đồ họa máy tính 2D vì nó có chiều thứ 3 và các dữ liệu hình học được máy tính lưu trữ với mục đính để tính toán và tạo lại các hình ảnh 2D của đối tượng mô phỏng 3D. Đôi khi các hình ảnh này sẽ hiển thị sau theo dạng được tạo ảnh trước, và đôi khi chúng được tạo trong quá trình trực tiếp luôn (real-time). Nói chung nghệ thuật của các mô hình 3D, được tạo bởi các dữ liệu hình học được máy tính lưu trữ gần giống với các hình ảnh vật thể đó ở bên ngoài thực tế hay các ảnh chụp, trong khi đồ họa 2D là phần tính để tô lại giống thì đồ họa 3D là vẽ lại theo các công thức toán học để tạo ra các hình ảnh 2D về vật thể 3D đó. Trong các phần mềm đồ họa máy tính sự phân biệt này thi thoảng là mờ nhạt; một số ứng dụng 2D sử dụng công nghệ 3D để tạo các hiệu ứng như ánh sáng, trong khi một số phần mềm 3D lại sử dụng công nghệ 2D để tạo 3D ảo. Một số kiến thức cơ bản Đồ hoạ 3D cho phép mô phỏng không gian 3 chiều trong máy tính. Về mặt toán học, đây là một công việc cực kỳ phức tạp, tuy nhiên hầu hết những công việc phức tạp này được thực hiện bởi phần cứng chuyên dụng với tốc độ rất cao. Để biểu diễn không gian 3 chiều, người ta dùng hệ trục toạ độ Đề các, với các trục toạ độ vuông góc với nhau. Mỗi điểm trong không gian được đặc trưng bởi 3 toạ độ: x, y và z. Một đoạn thẳng được biểu diễn bằng 2 điểm và một tam giác được biểu diễn bằng 3 điểm trong không gian. Để biểu diễn một hình khối phức tạp, người ta chia bề mặt thành các tam giác và biểu diễn toàn bộ vật thể thông qua tập các đỉnh của các tam giác. Số lượng tam giác dùng để biểu diễn một vật thể càng nhiều thì vật thể trông càng mượt nhưng tốc độ tạo hình sẽ càng chậm, do đó cần phải cân bằng giữa chất lượng và hiệu năng. Sau khi các vật thể được mô hình hoá, công việc tiếp theo là phải thể hiện được các vật thể trong không gian lên màn hình máy tính. Mỗi công nghệ có một cách làm riêng, tuy nhiên về mặt ý tưởng, có thể tóm tắt qua các bước sau: Bước 1: Transform Transform là thao tác biến đổi vật thể trong không gian 3 chiều. Có ba phép biến đổi cơ bản là phép tịnh tiến (translation), phép xoay (rotation) và phép tỉ lệ (scaling). Bước 2: View Ngầm định, hướng nhìn là dọc theo trục z, đầu hướng lên theo trục y. Chúng ta có thể thay đổi được hướng nhìn bằng cách cung cấp toạ độ mắt, điểm nhìn vào và hướng đầu. Bước 3: Projection Một khi đã có hướng nhìn các vật thể trong không gian, phép chiếu (projection) sẽ quyết định hình ảnh vật thể được thể hiện trên màn hình. Phép chiếu là một thao tác để biến đổi từ toạ độ trong không gian 3 chiều thành toạ độ trong không gian hai chiều để có thể thể hiện trên màn hình máy tính. Có 2 phép chiếu thường dùng là phép chiếu song song với mặt phẳng chiếu vuông góc với tia chiếu và phép chiếu phối cảnh với mặt phẳng chiếu vuông góc với tia chiếu. Phép chiếu song song thường được dùng trong các ứng dụng kỹ thuật, hay tạo giao diện người dùng còn phép chiếu phối cảnh thường được dùng trong các trò chơi hoặc các ứng dụng mô phỏng. Cụ thể về 2 phép chiếu này sẽ được nói rõ hơn trong phần sau. Như vậy để có thể thể hiện hình ảnh cơ bản của vật thể trên mặt phẳng chiếu, thì một điểm trong không gian phải được biến đổi qua 3 bước với 3 phép nhân ma trận. Tuy nhiên trên thực tế tích của 3 ma trận được tính sẵn, khi đó toạ độ điểm trong không gian chỉ phải nhân một lần với ma trận tích mà thôi. Ba bước trên đều được xử lý bởi ma trận (Matrix3D). Sau ba bước trên chúng ta mới chỉ thu được toạ độ các đỉnh được chiếu lên mặt phẳng chiếu, chưa thấy được vật thể. Cách đơn giản nhất là nối các đỉnh với nhau, khi đó chúng ta sẽ thu được một mạng các đoạn thẳng biểu diễn vật thể (wireframe). Để có thể thu được hình ảnh thật hơn, các bước sau tiếp tục được áp dụng: Bước 4: Depth test Với hình ảnh thu được ở trên, chúng ta không biểu diễn được việc các vật thể ở gần che lấp các vật thể ở xa. Có 2 kỹ thuật để thực hiện được việc này, đó là dùng z-buffer và dùng cây BSP. Trong kỹ thuật dùng z-buffer, một vùng nhớ với kích thước màn hình được tạo ra để lưu độ sâu của các điểm. Phép chiếu thực chất là một phép nhân ma trận, do đó sau phép nhân một toạ độ một điểm trong không gian 3 chiều với ma trận chiếu chúng ta vẫn thu được 3 toạ độ x, y, và z. Các toạ độ x, y là toạ độ trên mặt phẳng chiếu, biểu diễn vị trí của điểm chúng ta sẽ nhìn thấy trên màn hình, còn toạ độ z gọi là độ sâu (xa) của điểm. Toạ độ z có đặc điểm là nằm trong khoảng từ 0 đến 1, trong đó giá trị 0 tương ứng với điểm gần nhất có thể chiếu được, giá trị 1 tương ứng với điểm xa nhất có thể chiếu được. Điểm càng gần thì giá trị càng nhỏ (càng gần 0), điểm càng xa thì giá trị càng lớn (càng gần 1). Ban đầu, z-buffer được điền đầy bởi các giá trị 1. Nếu một điểm tại x, y có độ sâu z nhỏ hơn 1 thì giá trị này được ghi vào z buffer tại vị trí x, y. Giả sử có điểm khác sau khi chiếu được thể hiện trên màn hình trùng với vị trí x, y, khi đó độ sâu z được đem ra so sánh, nếu giá trị này nhỏ hơn thì có nghĩa điểm trong không gian 3 chiều tương ứng sẽ gần tâm chiếu hơn, do đó điểm mới này sẽ đè điểm cũ. Nếu z lớn hơn, có nghĩa là điểm mới xa hơn, và sẽ được bỏ qua. Kỹ thuật dùng cây BSP (Binary Space Partitioning) dựa trên ý tưởng phân không gian thành nhiều phần (partition) rồi sắp xếp theo thứ tự từ xa đến gần. Khi tạo hình, các phần sẽ được vẽ theo thứ tự từ xa đến gần, khi đó các phần ở gần được vẽ sau sẽ đè các phần ở xa đã vẽ trước đó. Kỹ thuật dùng cây BSP cần tính toán tương đối nhiều, do đó chỉ nên áp dụng với các vật thể tĩnh (như đồi núi, nhà cửa, cây cối…), còn đối với các vật thể động (như nhân vật trong trò chơi) thì nên dùng z-buffer. Bước 5: Color, Light, Fog, Texture Mapping, Blending Tạo màu là bước cho phép thể hiện màu sắc tại các đỉnh của một tam giác cũng như các điểm bên trong một tam giác dựa vào màu sắc của các đỉnh tam giác. Để thể hiện bề mặt người ta dùng các thuật toán tạo shading. Có một số thuật toán như Flat Shading (tốc độ nhanh, chất lượng thấp do thấy đường giao giữa các tam giác) hay Phong Shading (tốc độ thấp, chất lượng cao). Hiệu ứng ánh sáng có thể được đưa vào việc tạo hình. Hình ảnh thu được phụ thuộc vào chất liệu bề mặt (độ bóng, độ phản xạ ánh sáng, độ nhiễu xạ ánh sáng…) và các nguồn sáng (vị trí nguồn sáng, kiểu nguồn sáng, cường độ sáng, hướng chiếu sáng…). Hiệu ứng ánh sáng cho phép tạo hình ảnh thật hơn, mô tả được không gian sáng tối. Hiệu ứng sương mù cho phép mô phỏng sương mù vào không gian ba chiều. Vật thể càng gần thì nhìn càng rõ, vật thể càng xa càng mù. Thông thường độ mù sẽ tăng theo hàm mũ của khoảng cách, và được điều khiển bởi hệ số mật độ sương mù đặc trưng cho sương dày hay mỏng. Texture mapping là kỹ thuật cho phép dùng một ảnh thật lát lên một bề mặt trong không gian. Kỹ thuật này cho phép thể hiện các vật thể thật hơn, ví dụ như việc sử dụng ảnh vân gỗ để lát lên bề mặt bàn trong không gian 3 chiều. Blending cho phép thể hiện một vật thể với độ trong nào đó. Các vật thể đặc không cho phép nhìn qua, còn các vật thể trong thì có thể nhìn xuyên qua và thấy được các vật đằng sau vật đó. Tham số đặc trưng cho độ trong suốt thường gọi là Alpha, trong đó Alpha bằng 0 có nghĩa là vật trong hoàn toàn, Alpha càng lớn thì vật càng đặc. Ngoài ra còn có một số hiệu ứng đặc biệt khác đem lại chất lượng hình ảnh cao như phản xạ gương, đổ bóng, tạo bề mặt sần sùi… Lý thuyết về phép chiếu Phép chiếu song song Các hình ảnh được hình thành bằng phép chiếu song song có thể được xác định dựa vào góc hợp bởi hướng của phép chiếu hợp với mặt phẳng chiếu. Khi hướng của phép chiếu vuông góc với mặt phẳng, ta có phép chiếu trực giao (hay phép chiếu vuông góc - orthographic projection). Một phép chiếu có thể không vuông góc với mặt phẳng chiếu được gọi là phép chiếu xiên (oblique projection). Các phép chiếu trực giao hầu như được dùng để tạo ra quang cảnh nhìn từ phía trước, bên sườn, và trên đỉnh của đối tượng. Quang cảnh phía trước, bên sườn, và phía sau của đối tượng được gọi là “mặt chiếu” (elevation), và quang cảnh phía trên được gọi là “mặt phẳng” (plane). Các bản vẽ trong kỹ thuật thường dùng các phép chiếu trực giao này, vì các chiều dài và góc miêu tả chính xác và có thể đo được từ bản vẽ. Hình 4. Ba phép chiếu trực giao của một đối tượng Chúng ta cũng có thể xây dựng các phép chiếu trực giao để có thể quan sát nhiều hơn một mặt của một đối tượng. Các quang cảnh như thế được gọi là các phép chiếu trực giao trục lượng học (axonometric orthographic projection). Hầu hết phép chiếu trục lượng học được dùng là phép chiếu cùng kích thước (isometric projection). Một phép chiếu cùng kích thước được thực hiện bằng việc sắp xếp song song mặt phẳng chiếu mà nó cắt mỗi trục tọa độ ở nơi đối tượng được định nghĩa (được gọi là các trục chính) ở các khoảng cách như nhau từ ảnh gốc. Hình 5 trình bày phép chiếu cùng kích thước. Có tám vị trí, một trong tám mặt, đều có kích thước bằng nhau. Tất cả ba trục chính được vẽ thu gọn bằng nhau trong phép chiếu cùng kích thước để kích thước liên hệ của các đối tượng được bảo tồn. Đây không là trường hợp phép chiếu trực giao trục lượng học tổng quát, khi mà các hệ số tỷ lệ theo ba trục chính có thể khác nhau. Các phương trình biến đổi để thực hiện một phép chiếu song song trực giao thì dễ hiểu. Đối với điểm bất kỳ (x, y, z), điểm chiếu (xp, yp, xp) trên bề mặt chiếu được tính như sau: xp = x, yp = y, zp = 0 Hình 5. Phép chiếu cùng kích thước của một đối tượng lên bề mặt quan sát Một phép chiếu xiên đạt được bằng việc chiếu các điểm theo các đường thẳng song song, các đường thẳng này không vuông góc với mặt phẳng chiếu. Hình 6 trình bày hình chiếu xiên của điểm (x, y, z) theo một đường thẳng chiếu đến vị trí (xp, yp). Các tọa độ chiếu trực giao trên mặt phẳng chiếu là (x, y). Đường thẳng của phép chiếu xiên tạo một góc α với đường thẳng trên mặt phẳng chiếu (đây là đường nối điểm (xp, yp) với điểm (x, y)). Đường này, có chiều dài L, hợp một góc φ với phương ngang trên mặt phẳng chiếu. Chúng ta có thể diễn tả các tọa độ chiếu qua các số hạng x, y, L, và φ: xp = x + L cosφ yp = y + L sinφ Hình 6. Phép chiếu vuông góc của điểm (x, y, z) thành điểm (xp, yp) lên mặt phẳng chiếu Phương chiếu có thể định nghĩa bằng việc chọn các giá trị cho góc α và φ. Các chọn lựa thông thường cho góc φ là 30o và 45o, là các góc hiển thị một quang cảnh của mặt trước, bên sườn, và trên đỉnh (hoặc mặt trước, bên sườn, và dưới đáy) của một đối tượng. Chiều dài L là một hàm của tọa dộ z, và chúng ta có thể tính tham số này từ các thành phần liên quan. tan α = z/L = 1/L1 ở đây L1 là chiều dài của các đường chiếu từ (x, y) đến (xp, yp) khi z = 1. Từ phương trình trên, chúng ta có L = z L1 và các phương trình của phép chiếu xiên có thể được viết lại như sau xp = x + z(L1 cosφ) yp = y + z(L1 sinφ) Ma trận biến đổi để tạo ra bất kỳ việc chiếu song song có thể được viết như sau Một phép chiếu trực giao có thể đạt được khi L1 = 0 (xảy ra ở góc chiếu α=90o). Các phép chiếu xiên được sinh ra với giá trị L1 khác không. Ma trận chiếu 6-6 có cấu trúc tương tự ma trận của phép làm biến dạng theo trục z. Thực tế, kết quả của ma trận chiếu này là làm biến dạng mặt phẳng của hằng z và chiếu chúng lên mặt phẳng quan sát. Các giá trị tọa độ x và y trong mỗi mặt của hằng z bị thay đổi bởi một hệ số tỷ lệ đến giá trị z của mặt phẳng để các góc, các khoảng cách, và các đường song song trong mặt phẳng được chiếu chính xác. Phép chiếu phối cảnh Để đạt được phép chiếu phối cảnh của đối tượng ba chiều, chúng ta chiếu các điểm theo đường thẳng chiếu để các đường này gặp nhau ở tâm chiếu. Trong hình 6-10, tâm chiếu trên trục z và có giá trị âm, cách một khoảng d phía sau mặt phẳng chiếu. Bất kỳ điểm nào cũng có thể được chọn làm tâm của phép chiếu, tuy nhiên việc chọn một điểm dọc theo trục z sẽ làm đơn giản việc tính toán trong các phương trình biến đổi. Hình 7. Phép chiếu phối cảnh của điểm P ở tọa độ(x, y, z) thành điểm (xp, yp, 0) trên mặt phẳng chiếu. Chúng ta có thể đạt được các phương trình biến đổi cho phép chiếu phối cảnh từ các phương trình tham số mô tả các đường chiếu từ điểm P đến tâm chiếu (xem hình 7). Các tham số xây dựng các đường chiếu này là x’ = x – xu y’ = y – yu z’ = z - (z + d)u Tham số u lấy giá trị từ 0 đến 1, và các tọa độ (x’, y’, z’) thể hiện cho bất kỳ điểm nào dọc theo đường thẳng chiếu. Khi u = 0, phương trình 12-7 làm cho điểm P ở tọa độ (x, y, z). Ở đầu mút kia của đường thẳng u =1, và chúng ta có các tọa độ của tâm chiếu, (0, 0, d). Để thu được các tọa độ trên mặt phẳng chiếu, chúng ta đặt z’ = 0 và tìm ra tham số u: u = z / (z + d) Giá trị của tham số u tạo ra giao điểm của đường chiếu với mặt phẳng chiếu tại (xp, yp, 0). Thế giá trị của u vào phương trình trên, ta thu được các phương trình biến đổi của phép chiếu phối cảnh. Khi các đối tượng ba chiều đựợc chiếu lên một mặt phẳng dùng các phương trình biến đổi phối cảnh, bất kỳ tập hợp các đường thẳng song song nào của đối tượng mà không song song với mặt phẳng chiếu được chiếu thành các đường hội tụ (đồng quy). Các đường thẳng song song với mặt phẳng khi chiếu sẽ tạo ra các đường song song. Điểm mà tại đó tập hợp các đường thẳng song song được chiếu xuất hiện hội tụ về đó được gọi là điểm ảo (vanishing point). Mỗi tập hợp các đường thẳng song song được chiếu như thế sẽ có một điểm ảo riêng (xem hình 8). Hình 8. Các quang cảnh phối cảnh của một hình lập phương. Điểm ảo cho bất kỳ tập các đường thẳng, tức các đường song song với một trong các trục tọa độ thế giới thực được nói đến như một điểm ảo chính (principal vanishing point). Chúng ta quản lý số lượng các điểm ảo chính (một, hai, hoặc ba) với hướng của mặt phẳng chiếu, và các phép chiếu phối cảnh được phân loại dựa vào đó để có các phép chiếu: một-điểm (one-point), hai-điểm (two-point), hoặc ba-điểm (three-point). Số lượng các điểm ảo chính trong một phép chiếu được xác định bởi số lượng các trục của hệ tọa độ thế giới thực cắt mặt phẳng chiếu. Hình 8 minh họa hình ảnh của các phép chiếu phối cảnh một-điểm và hai-điểm của hình lập phương. Trong hình 8(b), mặt phẳng chiếu có phương song song với mặt xy để chỉ có trục z bị cắt. Phương này tạo ra phép chiếu phối cảnh một-điểm với một điểm ảo trên trục z. Với quang cảnh trong hình 8(c), mặt phẳng chiếu cắt cả hai trục x và z nhưng không cắt trục y. Kết quả, phép chiếu phối cảnh hai-điểm này chứa cả hai điểm ảo: trên trục x và trên trục z. 3D trong Flash Đ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 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 đó. 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ó) 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 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. Khả năng lập trình 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 Flash Communication Sever 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. Hiện nay đã có rất nhiều các công ty lớn đang sử dụng các ứng dụng dạng này ở mức thứ nghiệm, như Nasdaq Stock Market Inc., American Cancer Society, FedEx Corp., … 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. 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 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. Giải quyết bài toán Như đã nói ở trên, bài toán gồm 3 phần chính cần quan tâm 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ó) 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 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ẽ. Hình 13. Cách định hướng của Google Maps Street View không cho ta hình dạng của con đường 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ư javascript), và khi đó ta sẽ load lại file swf với các thông số được thay đổi, cụ thể là đường dẫn đến file ảnh tương ứng với vị trí của hotspot. Các thuộc tính và chỉ số của hotspot thường được lưu trong file xml. Khi dịch chuyển từ điểm này sang điểm khác, vì thời gian load ảnh có thể sẽ lâu, do đó trước khi ảnh được load, màn hình sẽ hiện ra một màu xám (màu mặc định khi giá trị truyền vào là null), để khắc phục, ta sẽ đưa lên một ảnh mờ (độ phân giải rất thấp) của ảnh định load, do dung lượng của ảnh này khá nhỏ nên load sẽ nhanh. Người sử dụng sẽ biết được “lờ mờ” về quang cảnh tại điểm đó, và hiểu rằng dữ liệu tại điểm đó đang được load lên. Sau đây là ảnh mờ của một điểm, dùng cho cả 2 phương pháp: sử dụng khối lập phương 6 mặt và sử dụng ảnh mặt cầu. Hình 14. Ảnh mờ của ảnh mặt cầu Hình 15. Ảnh mờ của 6 mặt khối lập phương Cách lưu trữ Cơ sơ dữ liệu Flash có thể cho phép import các file vào trong thư viện của mình, do đó việc sử dụng các file đó khá đơn giản và tốc độ truy cập là rất nhanh, tuy nhiên số lượng file được import vào bị hạn chế, càng nhiều file được import thì file flash có kích thước càng lớn, và việc load file flash lên một trang web càng lâu. Do đó, ta sẽ lưu trữ các file ảnh cùng với các file xml ở bên ngoài flash và đặt trên máy chủ (server). Ta sẽ có 1 file xml để xác định điểm có kinh độ x và vĩ độ y trên bản đồ nhỏ ứng với thư mục lưu trữ ảnh nào được sử dụng trên bản đồ lớn. Để phục vụ cho chức năng tìm kiếm theo tên sẽ được hoàn thiện sau này, ta nên lưu trữ theo cấu trúc: Tên_thư_mục_gốc/Tên_thành_phố/Tên_đường/Vị_trí_điểm_trên_đg/các_file_ảnh Ví dụ: images/Hà Nội/Nguyễn Trãi/3/front.jpg Trong đó, 3 chính là vị trí của điểm được thể hiện trên màn hình, giá trị này được lưu trong file xml xác định tọa độ điểm được nói ở trên. Ảnh có kích thước càng lớn thì tốc độ load ảnh càng lâu, ngược lại, ảnh có kích thước nhỏ thì tốc độ load nhanh hơn. Lấy một ví dụ, bằng thực nghiệm với Adobe Flash CS3 và Action Script 3.0, khi load một bức ảnh có kích thước 600 x 800 (pixel) vào một biến, đặt độ trễ trước khi xử lý với biến đó là 0,2s (300 ms), kết quả trả về cho biến là null (kiểm tra bằng câu lệnh trace(tên_biến);), có nghĩa là trong 0,2s ảnh vẫn chưa được load lên. Cũng với ảnh đó, ta chia thành 4 ảnh nhỏ kích thước 300 x 400 (pixel), với cùng độ trễ như vậy, kết quả trả về cho biến là 1 Bitmap Object. Như vậy, ta nên chia ảnh panorama ra thành các ảnh với kích thước nhỏ để tăng tốc độ load ảnh. Như đã nói ở phần trước, việc sử dụng hotspot rất tiện lợi, flash sẽ đọc file xml để biết được vị trí, số lượng của hotspot đối với từng điểm, đồng thời biết được hành động khi ta click vào một hotspot nào đó. Cách lưu file xml là, với mỗi thử mục chứa ảnh của mỗi điểm, ta đều có một file xml, trong đó có lưu theo dạng: <spot id="1" pan="0" tilt="0" url="hotspot.jpg" zoom="1" Street=”….” Point=”….” onClick="…………………." /> Ở mục này id=”1” để phân biệt giữa các hotspt với nhau, tại một điểm (“điểm” là nơi ảnh 360° được hienr thị, và hotspot được gán lên trên đó) có thể có số lượng hotspot kahcs nhau, ví dụ tại ngã ba thì số lượng hotspot sẽ nhiều hơn trên đường thẳng. pan=”0” và tilt=”0” là 2 biến để định vị trí của hotspot, 2 biến này quan hệ chặt chẽ với 2 biến lastPanAngle và lastTiltAngel trong flash. url=”hotspot.jpg” là đường dẫn đến file hình ảnh hiển thị cho hotspot. Zoom=”1” là mức độ zoom của hotspot, giá trị này thay đổi theo giá trị zoom của flash. Street và point là 2 thuộc tính xác định đường dẫn đến fie ảnh cần thiết onClick=”……….”, trong phần …. là đoạn script mà flash sẽ thực hiện khi ta click vào hotspot, ở chương trình của chúng ta, đơn giản chỉ là thay đổi đường dẫn tới thư mục có ảnh tương ứng. Thực nghiệm Môi trường thực nghiệm CPU: Genuine Intel(R) T2130 @ 1.86GHz 782 MHz RAM: 1024MB OS: Microsoft Windows XP Professional Version 2002 Service Pack 3 HDD: 80GB (33,6GB – 32,9GB – 7,98GB) Công cụ thực nghiệm Adobe Flash CS3 Adobe Flash Player 10.0 Flex Builder 3.0 Internet Explorer 7.0 Away3d ver 2.3 Quá trình thực nghiệm Các Class liên quan được sử dụng gồm có: import away3d.cameras.HoverCamera3D; import away3d.containers.Scene3D; import away3d.containers.View3D; import away3d.core.utils.Cast; import away3d.events.*; import away3d.lights.DirectionalLight3D; import away3d.materials.BitmapMaterial; import away3d.primitives.Skybox; import flash.display.*; import flash.events.*; import flash.net.URLLoader; import flash.net.URLRequest; import flash.utils.Timer; Trong đó: away3d.cameras.HoverCamera3D: là lớp nằm trong away3d, tạo một camera mở rộng lơ lửng xung quanh một đối tượng được chỉ định. away3d.containers.Scene3D: là lớp nằm trong away3d, là một container gốc chứa tất cả các đối tượng 3d trong một phông cảnh đơn (single scene). away3d.containers.View3D: là lớp nằm trong away3d, là một Sprite container dùng để lưu trữ camera, scene, session, renderer và các clip có liên quan, bên cạnh đó lớp View3D cũng dùng để xử lý các sự kiện của chuột. away3d.core.utils.Cast: là lớp nằm trong away3d, đây là lớp trợ giúp dùng để bắt trả về một kiểu dữ liệu được chỉ định của các đối tượng được sử dụng, trong chương trình này, ta đưa đối tượng về kêiur dũ liệu BitmapData. away3d.events.*: là lớp nằm trong away3d, các class nằm trong events, để nắm bắt và xử lý các sự kiện như là CameraEvent, LoaderEvent hay Object3Devent…. away3d.lights.DirectionalLight3D: là lớp nằm trong away3d, là nguồn sáng để tô màu tất cả các nguyên liệu (material) bóng mờ theo tỉ lệ điểm sinh ra của vector có khoảng trống với vector thường. Giá trị vô hướng của khoảng cách không ảnh hưởng đến kết quả cường độ sáng, chúng được tính toán ngay cả khi nguồn là một khoảng cách vô hạn với một độ sáng vô hạn. away3d.materials.BitmapMaterial: là lớp nằm trong away3d, là nguyên liệu kiểu Bitmap cơ bản. away3d.primitives.Skybox: là lớp nằm trong away3d, đây chính là bức tranh toàn cảnh 360° được thiết lập với 6 mặt, giống như 6 mặt bên trong của một khối lập phương. flash.display.*: là lớp có sẵn của flash, bao gồm các lớp phục vụ cho việc hiển thị của chương trình. flash.events.*: là lớp có sẵn của flash, gồm các lớp thực hiện việc nắm bắt và xử lý các sự kiện như MouseEvent, KeyboardEvent… flash.net.URLLoader và flash.net.URLRequest: là 2 lớp sẵn có của flash, phục vụ cho việc tải các tài nguyên từ bên ngoài mà không cần phải đưa các tài nguyên đó vào trong thư viện của flash, ta sẽ giải thích kỹ hơn về vấn đề này trong phần sau. flash.utils.Timer: là lớp sẵn có của flash, sử dụng với mục đích dừng chương trình trong một khoảng thời gian nhất định để cho các dữ liệu bên ngoài được tải về một cách đầy đủ. Đầu tiên, khi tiến hành thực hiện công việc đầu tiên là xây dựng chương trình cho phép người sử dụng nhìn 360° tại một điểm, việc khởi tạo một scene, một điểm nhìn (view point) và một camera tương đối đơn giản, đó là các hàm có sẵn trong away3d. Sau đó là việc tải (load) các ảnh nằm ngoài thư viện vào chương trình, flash có hay kiểu dữ liệu về ảnh là Bitmap và BitmapData, ta không thể trực tiếp đưa ảnh vào các biến có kiểu như trên mà phải thông qua biến kiểu Loader. Hai lớp flash.net.URLLoader và flash.net.URLRequest chính là để phục vụ cho bước này. Sau khi đã load được ảnh vào trong các biến thích hợp, ta sẽ khởi tạo một khối lập phương với 6 mặt là 6 ảnh đã load, đó là Skybox, tuy nhiên tham số đầu vào của Skybox lại là kiểu dữ liệu dùng riêng cho away3d là BitmapMaterial chứ không phải là Bitmap hay BitmapData, do đó, ta phải dùng đến lớp away3d.core.utils.Cast, lớp này cho phép ta đọc kiểu dữ liệu Bitmap hoặc BitmapData về kiểu dữ liệu BitmapMaterial. Một vấn đề khác nảy sinh, đó là biến kiểu Loader do phải đọc dữ liệu từ bên ngoài vào nên tốc độ xử lý chậm, nếu thực hiện việc gán giá trị ngay lúc đó thì các biến sẽ có giá trị là null, và kết quả khi đưa ra màn hình sẽ là một lưới các tam giác (TriangleGrid). Để khắc phục, tôi đã sử dụng đến class flash.utils.Timer để dừng chương trình trong một khoảng thời gian đủ để load xong các ảnh và gán giá trị vào các biến. Sau khi đã có được khung ảnh, có điểm nhìn, camera và cả đối tượng 3D, việc cuối cùng chúng ta cần làm là xử lý việc xoay của khối lập phương bằng chuột. Ta sẽ dùng hàm addEventListrner với các sự kiện của chuột, ta nắm bắt các sự kiện sau: Chỉ xử lý khi chuột tiến vào trong màn hình (ENTER_FRAME), khi đó ta cần có một biến lưu trạng thái (có được di chuyển hay không), đặt tên là move, kiểu dữ liệu Boolean, việc di chuyển chỉ được thực hiện khi move = true; Khi chuột ra khỏi màn hình (MOUSE_LEAVE), bất kể trạng thái của chuột như thế nào (click chuột trái, click chuột phải hay không, di chuyển hay không di chuyển…), trạng thái màn hình không thay đổi, khi đó gán move = false; Khi chuột di chuyển (MOUSE_MOVE): Khi chuột trái được bấm và giữ (MOUSE_DOWN): thực hiện di chuyển, bằng cách gán move = true; Khi chuột trái được thả (MOUSE_UP): không thực hiện gì, bằng cách gán move = false; Thứ hai, khi thực hiện việc cho phép người sử dụng dịch chuyển từ vị trí này sang vị trí khác, việc xử lý khi click vào button trên màn hình cũng như bấm mũi tên tiến, lùi là tương đối giống nhau, chỉ khác nhau ở cách gọi sự kiện, bởi vì mục tiêu của chúng là đưa người sử dụng đến vị trí liền trước hoặc liền sau so với vị trí hiện tại. Điều quan trọng hiện nay là cho phép người dùng “tự do” chọn những địa điểm mà mình đưa ra, không nhất thiết phải tiến hay lùi lần lượt từng bước một. Việc tạo hotspot đã thành công, tuy nhiên, việc sắp xếp và lưu trữ, cũng như nội dung của file xml hiện nay vẫn chưa được hoàn thiện. Kết quả thực nghiệm Thiết kế và xây dựng được chương trình cho phép người sử dụng “xoay” và nhìn xung quanh 360° tại một điểm. Đối với những bức ảnh được chụp từ camera chuyên dụng (tìm và download trên mạng), kết quả thu được rất khả quan. Sau đây là hình ảnh về 6 bức ảnh với thứ tự được sắp xếp từ trái qua phải, từ trên xuống dưới: Sau (back) – Trái (left) – Trước (front) – Phải (right) – Dưới (down) – Trên (up) Hình 16. Ảnh 6 mặt tại một điểm Và bên dưới là kết quả thu được Hình 17. Kết quả thu được Kết quả thu được tuy không thể có nhiều chức năng nhự của Google Maps Street View hay MapJack nhưng đã đáp ứng được các yêu cầu đề ra của bài toán, cơ bản tạo cho người sử dụng cảm giác đang đứng tại đúng vị trí như ngoài đời thật, có thể nhìn bao quát xung quanh (tuy hạn chế về phía trên và bên dưới). Chương trình thu được các kết quả như sau: Cho phép người dùng “nhìn” xung quanh 360° Tạo được các hotspot trên màn hình, làm tiền đề cho việc định dạng con đường và các dự định sau này. Cho phép người sử dụng tiến hoặc lùi lần lượt tới các điểm liền kề dựa vào bàn phím hoặc button trên màn ảnh. Bên cạnh đó, chương trình còn có những điểm thiếu sót, cần bổ sung: Chưa có chế độ zoom in và zoom out Chưa có phần hỗ trợ công cụ (độ tương phản, độ nét, ánh sáng…) Chưa vận hành trên mô hình client-server, chỉ kiểm tra trên local host Và các ý tưởng khác Chương 4. Kết luận Đóng góp của mình Trong khuôn khổ thực hiện khoá luận tốt nghiệp với mục tiêu nghiên cứu, tìm hiểu và xây dựng thử nghiệm hệ thống cung cấp quang cảnh đường phố, tôi đã thu được những kết quả chính sau: Tìm hiểu về công nghệ Flash và ngôn ngữ lập trình Action Script Nghiên cứu, tìm hiểu Google Maps API và công cụ hỗ trợ là Krpano Tìm hiểu, đánh giá các open source hỗ trợ cho chương trình, như away3d, papervision3d, sandy… Phân tích bài toán mục tiêu và đưa ra hướng giải quyết Xây dựng thành công chương trình demo cho một đoạn đường nhỏ Hướng phát triển của đề tài Việc nghiên cứu và phát triển Street View tại Việt Nam sẽ đem lại nhiều lợi ích to lớn, đặc biệt là trong ngành du lịch. Bước đầu, chúng ta có thể xây dựng Street View tại các thành phố du lịch, để du khách trong và ngoài nước biết và lựa chọn. Việc cập nhật Cơ sở dữ liệu đơn giản chỉ là cập nhật (thêm mới hoặc chỉnh sửa) lại các hình ảnh về tuyến đường, về khu vực. Chính do việc đặt cơ sở dữ liệu bên ngoài flash nên việc cập nhật sẽ không phức tạp như khi đặt trong flash. Trên các tuyến đường, các nhà hàng, khách sạn, địa điểm kinh doanh, vui chơi giải trí có thể đăng ký để được quảng cáo trên dịch vụ Street View. Ý tưởng hiện nay là: khi đến địa điểm của một nhà hàng nào đó, người sử dụng có thể click vào hình ảnh của nhà hàng, khi đó sẽ hiện ra các thông tin về nhà hàng đó. Phát triển cao hơn nữa, chúng ta có thể cho phép người sử dụng “tham quan” bên trong nhà hàng đó. Việc “tham quan” bên trong một kiến trúc thực hiện tương tự như việc chúng ta cho người sử dụng “đi lại” và “quan sát” trên đường phố, chỉ thay đổi về cảnh vật. Street View có tích hợp với hệ thống bản đồ, do đó việc tìm đường sẽ dễ dàng hơn, việc tìm các điểm mốc sẽ dễ hơn khi có hình ảnh cụ thể. Bên cạnh đó, do hạn chế về mặt thời gian cũng như phương tiện, chương trình demo chưa thực hiện đầy đủ các chức năng như mong muốn của tác giả, nếu đề tài này được đầu tư và phát triển, tôi tin rằng kết quả sẽ tốt hơn và lợi ích mà nó mang lại cũng không nhỏ. Tài liệu tham khảo Các tài liệu về adbo flash và Action Script: [1] OReilly. Learning.ActionScript.3.0.A.Beginners.Guide.Jan.2008 [2] Friends of Ed Foundation ActionScript Animation Making Things Move [3] Trang web: Các tài liệu về away3d: [4] Trang web: Các tài liệu về về lý thuyết không gian 3d: [5] Giáo trình Kỹ thuật đồ họa