In this session, we continued our exploration of 3D modeling and animation with a deep dive into WebGL and BabylonJS.
Quincy Jacobs and I gave explanation on the basic concepts and illustrated these with code walkthroughs of WebGL and BabylonJS examples. The class could also gain some experience with two handson labs in which graphics and animations were implemented.
In the WebGL part, Quincy explained us the Graphics pipeline that is used to draw graphics. The concepts of a Vertex array buffer, Element array buffer, Vertex shader, Fragment shader and a Shader program have all been explained and illustrated based on a code example in which a triangle object was drawn on the screen. An effective way of really getting to know technology. There is a lot of math involved, so we also needed some recap of stuff we learned a long time ago :).
Quincy has published his WebGL explanations and examples on his GitHub site: https://github.com/QuincyJacobs/WebGLTutorial
First I explained the basic concepts of BabylonJS. Basically, a BabylonJS application consists of a webpage in which a canvas element (just an HTML tag) is used for drawing a model into. The model is a scene in which model objects are defined, a camera is positioned, a light source is added (since it's rather difficult to see your objects in the dark) and a "render loop" is added to continously update the model. In the render loop you can add interactivity. Well, that's a BabylonJS application in a nutshell, in reality this can be a bit more complicated.
Based on the handson lab provided by Mozilla (see resources), we did a code walkthrough of the lab code in which the concepts were explained more thoroughly. The basic objects (called "meshes", like cubes, spheres, etc.) were discussed, but also self-defined objects. This last category can be composed on the basis of vectors. We went into the use of light; different light sources and their effect on the display of objects. In addition, animations were discussed and the way in which this can best be implemented in a BabylonJS application.
We also paid attention to more advanced topics like performance optimization (necessary because a lot of calculation work is involved, especially when implementing animation) and tooling. Using Blender, for example, you can create 3D objects that you can import easily in your BabylonJS scene.
I've published my intro on SlideShare, you'll find the link in the resources section below. Game engines Also, we did a very quick overview on the architecture of (online, multi user) gaming engines. This is a fairly extensive subject for which we will certainly need more time. We will therefore take that time in the coming months.
Quincy's WebGL explanations and examples on GitHub: https://github.com/QuincyJacobs/WebGLTutorial
Building up a basic demo with Babylon.js: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js
A practical intro to BabylonJS (presentation): https://www.slideshare.net/HansRontheWeb/a-practical-intro-to-babylonjs-115869611
See also the BabylonJS links in my previous posts in the Wednesday Evening Training.
Also worth mentioning is the Wednesday Evening Training of october 3rd. That evening, one of our security experts, Vince Corona, will give us some more examples of hacking and explain us the importance of security in ICT. In the previous session, we already had a great intro on security in which he explained and demoed some basic hacking scenario's.
This evening on october 3rd is also open for visitors! The location is our main office in Leidscherijn, Utrecht (The Netherlands). You can subscribe at the following URL: https://www.werkenbijcapgemini.nl/events/How-to-become-a-hacker
In the future, more of the Wednesday Evening Trainings will be opened for visitors. Make sure that you follow the #wednesdayeveningtraining on LinkedIn or my Blog.
#capgemini, #wednesdayeveningtraining, #lifeatcapgemini, #workatcapgemini #webgl, #babylonjs, #3d, #graphics, #animation
WebGL
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser, allowing GPU-accelerated usage of physics and image processing and effects as part of the web page canvas.In the WebGL part, Quincy explained us the Graphics pipeline that is used to draw graphics. The concepts of a Vertex array buffer, Element array buffer, Vertex shader, Fragment shader and a Shader program have all been explained and illustrated based on a code example in which a triangle object was drawn on the screen. An effective way of really getting to know technology. There is a lot of math involved, so we also needed some recap of stuff we learned a long time ago :).
Quincy has published his WebGL explanations and examples on his GitHub site: https://github.com/QuincyJacobs/WebGLTutorial
BabylonJS
This is complete JavaScript framework for building 3D games and experiences with HTML5, WebGL, WebVR and Web Audio (https://www.babylonjs.com). It's based on WegGL, so if you understand the nuts and bolts of WebGL, it increases understanding of BabylonJS.First I explained the basic concepts of BabylonJS. Basically, a BabylonJS application consists of a webpage in which a canvas element (just an HTML tag) is used for drawing a model into. The model is a scene in which model objects are defined, a camera is positioned, a light source is added (since it's rather difficult to see your objects in the dark) and a "render loop" is added to continously update the model. In the render loop you can add interactivity. Well, that's a BabylonJS application in a nutshell, in reality this can be a bit more complicated.
Based on the handson lab provided by Mozilla (see resources), we did a code walkthrough of the lab code in which the concepts were explained more thoroughly. The basic objects (called "meshes", like cubes, spheres, etc.) were discussed, but also self-defined objects. This last category can be composed on the basis of vectors. We went into the use of light; different light sources and their effect on the display of objects. In addition, animations were discussed and the way in which this can best be implemented in a BabylonJS application.
We also paid attention to more advanced topics like performance optimization (necessary because a lot of calculation work is involved, especially when implementing animation) and tooling. Using Blender, for example, you can create 3D objects that you can import easily in your BabylonJS scene.
I've published my intro on SlideShare, you'll find the link in the resources section below. Game engines Also, we did a very quick overview on the architecture of (online, multi user) gaming engines. This is a fairly extensive subject for which we will certainly need more time. We will therefore take that time in the coming months.
Further reading
Do you want to read more on the topics in this post? Here are some links…Quincy's WebGL explanations and examples on GitHub: https://github.com/QuincyJacobs/WebGLTutorial
Building up a basic demo with Babylon.js: https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Babylon.js
A practical intro to BabylonJS (presentation): https://www.slideshare.net/HansRontheWeb/a-practical-intro-to-babylonjs-115869611
See also the BabylonJS links in my previous posts in the Wednesday Evening Training.
Past Wednesday Evening Trainings
You 'll find post of previous sessions here: https://www.linkedin.com/search/results/content/?keywords=%23wednesdayeveningtrainingNext week 's Wednesday Evening Training
In next week's Wednesday Evening Training, we will continue on WebGL and BabylonJS. We have some additional topics to discuss and some extra labs to play with. I'll also give a demo and explanation on my Archimate 3D model generator. This is my pet project that I've been busy with the past months. It's not finished yet, but it's a nice example of a basic multi user BabylonJS model generator combined with a primitive multi player game engine.Also worth mentioning is the Wednesday Evening Training of october 3rd. That evening, one of our security experts, Vince Corona, will give us some more examples of hacking and explain us the importance of security in ICT. In the previous session, we already had a great intro on security in which he explained and demoed some basic hacking scenario's.
This evening on october 3rd is also open for visitors! The location is our main office in Leidscherijn, Utrecht (The Netherlands). You can subscribe at the following URL: https://www.werkenbijcapgemini.nl/events/How-to-become-a-hacker
In the future, more of the Wednesday Evening Trainings will be opened for visitors. Make sure that you follow the #wednesdayeveningtraining on LinkedIn or my Blog.
#capgemini, #wednesdayeveningtraining, #lifeatcapgemini, #workatcapgemini #webgl, #babylonjs, #3d, #graphics, #animation
No comments:
Post a Comment