Visualize This: 2D and 3D Graphics Programming for Web Apps

by Olga Aksenova

22 Mar 2018

Who first decided to visualize information? — Our ancestors who depicted the hunting scenes on the cave walls? Astronomers who drew star maps? Or grocery shop owners who began use sign boards to advertise their services? — Never mind! Visualization has come a long way and today came to a complex 2D and 3D graphics.

More and more businesses apply 2D and 3D graphics to effectively show their products and services. They use two- and three-dimensional models on their websites, and in their web and mobile applications. Just take a look at the 3D configurator of Toyota Camry cars on the site of the company dealership in Australia. You can choose car modifications, the engine type, body color, and interior. Thanks to 3D graphics the car looks real and beautiful.

Another example is the custom bag designer from LaikaiLike. Using this application, shoppers can choose the size of the handbag, the material, locks, and buttons. The finished bag is an exact copy of its prototype.
Custom bag designer LaikaiLike

2D and 3D graphics libraries: from theory to practice

When you need to develop a web or mobile application with 2D and 3D objects, you can try special tools. The choice depends on the tasks. If you want to show charts, Chart.js will help your developers. This is a fairly simple JavaScript library. It has light weight, it’s easy to install and customize. If your need awesome visual effects in your project, try D3.js. It’s free, powerful, flexible and supported by all known browsers.

D3.js

Want to make a 3D animation? — A good solution will be Three.js, a cross-browser JavaScript library. The functionality is impressive: geometric shapes, complex objects, visual effects, and kinematics. You can choose a rendering as well: SVG, WebGL or HTML5 Canvas.

We built one of our projects using Three.js. The customer was a European company that leases out towers for telecom operators. They needed a web application prototype, where the telecom towers look like three-dimensional models. App users can zoom and rotate these 3D models from different perspectives. Using the application, telecom companies can look at the equipment on towers and choose where to place their gear. It’s very convenient — no need to waste time and go to see the real towers.

3D models

One more tool we like to use when creating apps with 2D and 3D graphics is Konva.js. It’s a JS-framework that allows you to work with Canvas. The tool supports such layers as Canvas elements, animations, styles, and shapes.

We applied Konva.js for the prototype of a training web application. Our customer, the company Alekta already had a desktop editor and its Android-version for creating and changing chemical formulas. The editor had to be transferred to the web along with all its features: different user roles — students and teachers, different types of answers to chemistry tasks — structural, electronic and molecular formulas, reaction equations etc.

Why Konva.js? This framework can cache objects, and helps design high-performance animations and transitions. The biggest advantage of Konva.js is its compatibility with React, that was the core technology on the project. As you can see, everything was in favor of Konva.js.

2D graphics

The more information, the less sense you can grasp. Visualize! Make visual formulas and graphs, mobile and web applications with 2D and 3D effects, apply popular augmented and virtual reality tools. This will increase the loyalty of users and attract new customers.

  • 0 SHARES
Comments
Filter by close

TECHNOLOGIES

INDUSTRIES