WebGL, Three Js and Angular 2


What is Web GL?

WebGL lets you easily and efficiently create graphics and animation that look and react great on various web platforms. With a Javascript abstraction over OpenGL, WebGL is familiar and quick to learn for any web developer or OpenGL developer that has used either of those platforms. It's quick to learn, easy to use and set up and creates amazing reactive graphics and scenes.


Why use Web GL?

Maybe for fun or to wow your friends or create something interesting for your site. WebGL offers many perks:
  • It's versatile. It's compatable with many frameworks - such as Angular 2, as seen by the quick example below.
  • It works on mobile and multiple browsers.
  • It works with Unity and other powerful graphics libraries
  • It has handfuls of supplemented libraries that make it even easier and more efficient. Look at what you can do with three js
  • It's fast!
  • It simplifies a lot of hard graphics aspects! Such as shaders!
  • It makes programming in the 3D world easy
  • It can be interactive!


What is Three JS?

Three JS is a wonderful and flexible library that helps supplement webGL by making it faster, easier and more efficient. With easy to understand documentation and tutorials available online, Three JS is one of the most worked on and adapted web libraries for creating graphics online.

Angular 2

Angular is a widely used and well supported framework with lots of community extensions open sourced and available. Along with this, it offers reusable components that make it a good choice for quick and efficient implementation. It is also a good fit for any web application. Angular goes hand in hand with either typescript or javascript. Typescript is a superset of javascript, meaning it’s easier to read and understand along with this, typescript has IDE support, making it even more portable and simpler development experience. By using Angular’s components and adapting code to match what Angular offers via reusability projects can be quickly implemented and deployed. This includes projects made using WebGL and Three JS. While playing around with Angular 2 and Three JS some set up problems were encountered, and doing some research, I found that others faced similar problems. Below is a quick tutorial on how I got Three JS to work alongside Angular 2. 

Three JS and Angular 2

Setting up angular 2:

(download and install node js, run command npm i)

npm install -g @angular/cli

WebGL with angular 2:

Comes in webpack in angular but can be install around the web if not included in whatever web framework your using.


Adding three js library:

add the library to your modules with: npm install three --save

In terminal, install and add to typings:

npm install d3 --save
npm install @types/d3 --save-dev
npm install @types/three --save

command in the console.

import * as THREE from 'three';

into app.component.ts to use within app component


Comments

  1. Unknown8 July 2017 at 17:08

    Good job.

    ReplyDelete
  2. Unknown16 November 2017 at 22:04

    Hi Ali! I’m wondering if you have a few moments to chat about speaking at @ngAtlanta. Would love to chat about you doing a talk on this post.

    ReplyDelete
  3. Unknown20 March 2018 at 23:18

    Good one.I appreciate you for sharing this knowledge.Thank you so much for the examples.Its very helpful for me and newbies.I learned much .Have a look on Angular Js development company,

    ReplyDelete
  4. Unknown16 July 2018 at 23:54

    Thanks for providing good information,Thanks for your sharing.Angularjs Online Course Bangalore

    ReplyDelete

Post a Comment

Popular posts from this blog

Smartwatches: a venture in vanity

My father is a man of few words; and yet for the lack of words he has, he has plenty of watches. Some are old, with worn leather straps that are soft to touch, others new, with fancy dials, roman numerals shining silver in the light. The idea of a watch as a piece of history, a piece of art and a cultural collectible piece was deeply ingrained to me and my siblings as we grew up and admired our father’s collection. With the coming of age, each of us were gifted a watch, old and expensive in design. They were heirlooms, given with thought and care. This was a few years before smartwatches became common. Does the practicality of smartwatches truly make them valuable? With the amount of negative reviews and complaints, can they even be considered practical? Should humanity start replacing their old wristwatches, a piece of technology that has been around for hundreds of years, for this new, flashy technology that allows people to be connected at all times? With screens too small t
Read more

A Quick Intro to Big Data

Image
What is Big Data? Big Data exists as a solution that aids both individuals and businesses. Simply using your phone or computer, huge amounts of data gets collected about you, your friends, your colleagues and even your pets. As the digital age grows and expands, your computer can become your best friend, a sort of nosey, extremely informed-about-you kind of friend. This data is stored, allowing marketers to specifically advertise to you. This data helps your phone recommend restaurants to you that are nearby. Social media allows you to interact with others over the internet, easily allowing you to share mass amounts of almost pointless data. This data is readily accessible and easy and cheap to store. With cloud computing, companies can easily use Big Data to bring themselves into the digital age. And this data can be used to benefit the human race in so many ways, but are there risks that come along with this? As the technical arms race continues to quickly try the new te
Read more