Deployment of 3d graphics on websites
Internet development became possible thanks to the birth of a new format of electronic documents called HTML. Its origin comes from SGML markup language used to form blocks in text files which are easy to write and read. The main information blocks were framed with a special order of symbols, angle-brackets and tags, block type names. Cyber reference addresses were added in HTML to open other documents, it gave the opportunity to store linked structures of documents in network similar to web. Thus Internet with HTML documents was called web, and programs of network browsing of HTML documents web-browsers.
The Web was in rapid evolution. HTML started to support not only formatted text, but also graphic images, video, sounds. Web-browsers swiftly swallowed media and communication industries from announcement boards and electronic newspapers up to online web stores and desktop applications. And now it is a turn for cinema industry where it is a common thing to adapt into a film storylines and images from 3d games.
Today’s programmer must understand the growth path of web and follow HTML5 new version releases, as well as browser technologies of integration with network, file-oriented and media technologies. Even today without actual HTML5 knowledge programmers experience difficulties in applying their skills on employment market, as all modern program applications work with web browsers to some extent.
The standard of 3d graphics with WebGL
Understanding the aims of web development leaders of software industry united in Khronos consortium and elaborated their own method which allows to integrate 3d technologies into web browsers. OpenGL and DirectX video games technologies were taken as a basis.The main purpose concerned the functionality of 3d scenes on the most part of mobile and desktop devices and OpenGL ES 2.0/3.0 standard working on the major amount of Android devices was chosen as mainstream. Converter of OpenGL ES 2.0/3.0 operations was written for DirectX.
The full version of WebGL standard was released on the 3d of March 2011, and WebGL became integral part of HTML5. One of the first program packages allowing to work with WebGL was Blend4Web. Keeping traditions of projects with open code, for the most 3d artists Blend4Web became a sort of window into a web browser directly from Blender rapidly developing 3d software. One of the main purposes of Blend4Web was a possibility to deploy 3d scenes in a web browser in a quick and easy way. A huge set of tools was developed by programmers like a kit of editors to prepare different WebGL 3d effects.
Deployment of 3d scene in Blender using Blend4Web
The main components of 3d scene in OpenGL context are firstly incoming vector object and material data serving to calculate lighting parameters and to create a rectangle image from projections of 3d points onto display (camera). Projection parameters are defined with trapezoidal model viewing frustum.
A programmer can control the succession of calculating operations with the help of GLSL programming language, the order of data delivery on different objects depending on their distance from the camera, and use intermediate images resulting from video card calculation process for the effects. In order to speed up and simplify the process of deploying 3d graphics and effects ready programming library can be used during the process, Blend4Web as an example.
In case when Blend4Web is being used it is easier to create 3d models in Blender and export them into web without deep programming knowledge. Several types of scenes can be created by 3d artists without any help. And the programmers have the opportunity to focus on application programming of interactive web applications without diving into OpenGL/WebGL details.
Demonstration of a 3d scene in a web browser
HTML file “city_car.html”
Using Blend4Web player
HTML file “city_car_player.html”
HTML file “city_car_app”
3d graphics are easy to insert into web-pages. Techniques of inserting 3d scenes doesn’t differ much from images and video. However with Blend4Web programmers can quickly create websites with 3d scenes where they can add behaviour algorithms from unsophisticated all-round preview up to complex game mechanisms.
Examples of commercial projects can be found on Blend4Web site: https://www.blend4web.com/en/demo/.
And we keep on seeing closely to 3d technologies in our next Blend4Web development articles.