Incredible Designs using WebGL- The Future of the Web!
Summary:
Introduction to WebGL
A 15 minute 'mapping' video of the Dubai Burj Hotel (created in WebGL)
PlayCanvas - Game hosting version of WebGL and free hosting!
Verold Studio - Create your own 3D project online and host it for free!
WebGL Tools - Useful resources for WebGL
Access to over 157,000 3D Models for use in 3D projects
I have also included a FREE Open University 5 week course, 6 hrs per week course for beginners.
Introduction to WebGL
There is many gaming websites on the internet, but Adobe is dropping Flash completely with the next two years, it will no longer be supported at all. Online gaming is a multi-billion industry on the internet and relies on Adobe Flash in your browser to correctly work with the .swf files. However, WebGL is the new alternative and as you read through this post you will see for yourself, how powerful this new platform really is, compared to Flash. The future is WebGL and you will soon start seeing why it is not just powerful, but very light-weight compared to compiled Adobe Flash objects.
As many gaming companies will soon be changing their platforms from Flash to WebGL, I thought I would give you an insight in to this new technology, its light-weight and fast, and makes Adobe Flash look out-dated! 3D imagery has always interested me from when I used to use Bryce 3D, that was years ago now. But since the large main corporations are now dropping Adobe Flash and Apple Quicktime, the new approach is WebGL - Fast, lightweight and very clever.
What makes this different from anything you've coded previously is that you can run the actual authoring tool either local or live on a webserver. It is like having a 3D program within your browser, but with many differences. Flash is still a security risk, this as been the problem for awhile now, more so lately with 'ransomware' payload and the many variations.
I thought I would write this post to show you just some of things you can expect to see in adverts and new online gaming, along with the actual online editor, which also contains some simple examples of what you can achieve with WebGL. And the difference between the engines, along with tools that optimize your three.js file, so you don't need all of three.js file loading code when it can be compressed depending on the project.
PlayCanvas - Hosting WebGL
There is also a FREE plan and connectivity to Github and Bitbucket! Another Web3D environmental tool with a difference, this one is mainly aimed at the games market, the few examples will show you why.
https://playcanvas.com/plans
A few examples from PlayCanvas using three.js
BMW i8 car - colour changing made easy, control the car with your mouse. Hover your mouse over the left driver side to get in the vehicle!
http://playcanv.as/p/RqJJ9oU9/
Invaders from Space (Yes, in 3D)
http://playcanv.as/p/fhj58o0W/
Doom 3: Gangnam Style - Funny, but definitely worth watching!
http://playcanv.as/p/iCL6sxgF/
Verold Studio - Hosting WebGL
Another Web3D tool, again it is web based and you can save your 3D work on site! Again, the lowest hosting is totally free!
WebGL Tools:
The web3D Editor can be found here: http://threejs.org/editor/
FREE 3D Models Library:
Many models are available for free for WebGL use here is just one source
https://clara.io/library - this contains over 157,000+ 3D rendered models.
GitHub SOURCES:
https://github.com/mrdoob/three.js/ See more on programming in WebGL, and Usage.
FREE University Course!
Free online Starter Course at Pompeu Fabra University Barcelona. Start date: 4th July 2016 - Duration: 5 weeks - 6 hours per week - Subject: 3D Graphics for Web Developers
The course itself is completely free of any charges, but you can purchase an Achievement Certificate for about £34.00. OU Facilitators are online if you need to ask questions about anything you do not understand, the courses themselves are catered for people worldwide. If you do not complete the course within the 5 weeks, then it just means you will not receive help from the OU Facilitators, but you can ask other students.
REQUIREMENTS
This course is designed for existing web developers who have little or no previous experience in creating 3D graphics applications. You should be capable of manipulating the DOM using JavaScript or JQuery, and familiar with the concepts of AJAX. You should also have at least intermediate-level programming skills and be comfortable manipulating arrays and objects.
They all use the 3D JavaScript three.js which looks amazing of what can be done in just a browser! There are also games that auto-resize to fit mobile phones, hence why the use of WebGL.
All the best!
