Real-Time Ray Tracing Dynamic Scenes Based on WebGL

WebGL is an immediate mode 3D rendering API designed for the Web. Ray tracing is a method that can generate photo-realistic image. For the past decades, ray tracing on the Internet browsers is an impossible task. WebGL’s appearance gives this impossible t

  • PDF / 1,766,956 Bytes
  • 6 Pages / 439.37 x 666.142 pts Page_size
  • 77 Downloads / 238 Views

DOWNLOAD

REPORT


Real-Time Ray Tracing Dynamic Scenes Based on WebGL Sam At Chea and Fuyan Liu

Abstract WebGL is an immediate mode 3D rendering API designed for the Web. Ray tracing is a method that can generate photo-realistic image. For the past decades, ray tracing on the Internet browsers is an impossible task. WebGL’s appearance gives this impossible task coming true. In this paper, we introduced a WebGL-based ray tracing for small dynamic scenes (about 3 K triangles) in real time. Keywords Ray tracing

 WebGL  Illumination model  Uniform grid

21.1 Introduction Internet browser becomes more and more important in our life. In the past years, most of the contents which were shown on browsers are two dimensional. It is very difficult to draw three-dimensional (3D) contents on the browsers, still using less ray tracing method. WebGL’s appearance gives this impossible task coming true. WebGL is the abbreviation of Web Graphics Library [1]. It is a new technology and was released on December 10, 2009. WebGL is a low-level 3D graphic JavaScript API for developing 3D Web applications. It is based on OpenGL ES 2.0, but there are

S. A. Chea (&)  F. Liu School of Computer Engineering and Science, Shanghai University, Shanghai 200072, China e-mail: [email protected] F. Liu e-mail: [email protected]

Z. Zhong (ed.), Proceedings of the International Conference on Information Engineering and Applications (IEA) 2012, Lecture Notes in Electrical Engineering 218, DOI: 10.1007/978-1-4471-4847-0_21, Ó Springer-Verlag London 2013

169

170

S. A. Chea and F. Liu

some differences. By using WebGL, we can construct 3D graphics on the webpage without any external plug-in. Ray-tracing method is a hotspot of study in computer graphics area. It is an important method for generating realistic images. This method was proposed by Turner Whitted, in the paper of ‘‘An Improved Illumination Model for Shaded Display’’ in 1980 [2]. The concept of Turner Whitted ray-tracing algorithm is very simple. In brief, generated rays intersect with objects in the scene, rays that intersected with objects will have an intersection point, the color of the ray and the object at this point accumulates again and again until the last ray traced. Ray-tracing method is simple, but there are also some barricades in rendering photo-realistic images on browsers. In the ray-tracing method, the most time consuming process is doing ray-triangle intersection. Even in some professional ray-tracing software, it is hard to achieve real time for some complex scenes. In this paper, we focus on the implementation of ray-tracing method on webpages, and achieve real time for simple scenes.

21.2 Improved Uniform Grid Construction on Webpage Uniform grid is the best spatial subdivision structure on GPU. The main idea of this spatial subdivision structure is to subdivide the axis aligned bounding box of the whole scene into the same size units along each of the three axes X, Y, and Z. The critical factor for constructing the best uniform grid is to determine the number of units of the whole