Mozilla Developer Roadshow Event
Hi everyone,
how have you been doing this week? I hope you did well! So, today I am going to talk about the event my friend Lefteris and I went to! By the way, this is the ticket so I do not have to type a lot of info:

If you read the description of the event it was all about WebVR!!!! Awesome stuff!
Mozilla has made tremendous contributions to the entire Web in general for a lot of years now (everyone know this) and they support free, open source projects and diversity over the web. They promote freedom of accessing the web for everyone and protection from people and organizations who try to limit users freedom to their benefit and much much more! You can see their mission statement here:
https://www.mozilla.org/en-US/mission/
It’s worth it: please do read it.
What we saw in their was remarkably cutting edge. From Project Quantum to WebAssembly and from CSS Grid to WebGL2 and Three.js, A-Frame and WebVR in general. Even Drupal already has many modules for webVR. Check them out:
- https://www.drupal.org/project/drupalvr
- https://www.drupal.org/project/aframe
- even React VR: https://www.drupal.org/project/aframe
At this point I need to make a brief introduction about all these new technologies and provide the resources for further reading.
A-Frame
This is the most advanced work I have ever seen in for making VR experiences on a web page! I cannot describe the magnitude of this thing but I can imagine the endless possibilities opening up for website building and web development in general. For example, let’s say you have a hotel business and you want to make an intro like no other!
You can introduce your guest user inside your own hotel and show him around in the most immersive way ever possible!
Of course, we are not there yet but imagination is a powerful force!
Read more here: https://aframe.io/
WebGL2
Reading from the specification,
WebGL™ is an immediate mode 3D rendering API designed for the web. This is Version 2 of the WebGL specification. It is derived from OpenGL® ES 3.0, and provides similar rendering functionality, but in an HTML context.
WebGL 2 is not entirely backwards compatible with WebGL 1. Existing error-free content written against the core WebGL 1 specification without extensions will often run in WebGL 2 without modification, but this is not always the case. All exceptions to backwards compatibility are recorded in the Backwards Incompatibility section. To access the new behavior provided in this specification, the content explicitly requests a new context (details below).
source: https://www.khronos.org/registry/webgl/specs/latest/2.0/
I haven’t used 3D Web Graphics before but I have seen some sporadically as small parts of a website and stuff. Combine WebGL2 with WebAssembly and you get yourself games that has nothing to be jealous of games made with engines like Unreal engine or whatever. I agree with the speaker said. Everything will be done through the browser and on the browser pretty soon.
Watch this demo:
‘After the Flood’ illustrates many of the key, new aspects of WebGL 2.
- Transform feedback: to animate leaf particles on the GPU.
- 3D Textures: used to create procedural clouds.
- HDR rendering with MSAA: for correct blending of antialiased HDR surfaces.
- Hardware PCF: for better shadow filtering at a lower cost.
- Alpha to coverage: to render antialiased foliage.
- …and much more.
Other key demo features are:
- Compressed textures: DXT, PVR and ETC1 are used to reduce VRAM usage.
- Asynchronous asset streaming: to get the demo loading faster.
- Runtime lightmap baking: to generate realistic shadows that render fast.
- Procedural water ripples
- Planar mirrors
source: https://blog.playcanvas.com/mozilla-launches-webgl-2-with-playcanvas/
Three.js
This is an awesome library, A-Frame is built alongside: A-Frame provides a declarative, extensible, and composable structure to Three.js. So, you can imagine what user experiences you can make with this awesome library. In thei webpage you can see a lot of portfolio projects made with Three.js. Already!!
source: https://threejs.org/
CSS Grid
Css Grid is one of the options of the CSS declaration ‘display’. Until now there was no such great support among browsers, but lately everyone has been talking about it.
You can read more and better here:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
We saw an example where you have a boxed layout with some text and between two paragraphs you want to insert an image which needs to be fullscreen. That’s super easy with CSS Grid unlike using conventional CSS with negative margins or calc() etc. It’ s two lines of code. You use the property grid-column assigning each element you want to the desired location, so in our example you specify image’s column to be the full-width wrapper and everything else the boxed element.
Project Quantum
And here is the best treat! I kept it for the end to end this vast presentation with this mind-blowing project! It is a new engine built on top on Gecko engine. Better read the wiki page:
Quantum is not a new web browser. Quantum is Mozilla’s project to build the next-generation web engine for Firefox users, building on the Gecko engine as a solid foundation. Quantum will leverage the fearless concurrency of Rust and high-performance components of Servo to bring more parallelization and GPU offloading to Firefox.
source: https://wiki.mozilla.org/Quantum
Be sure to check it out! It is probably the next big leap towards the future!!!
Conclusion
I want to stress out that we are living in a super exciting era of web development. Future historians of the web will mention the pioneers of now with great awe and admiration for the achievements they made during these times. Furthermore, I do not know if there is a better time for a developer like me and many more to work and advance! Extremely wonderful possibilities are open and if you are a person who settles for nothing less than continuous development and progress and enjoys learning constantly, I think future will be all yours! Great times!
I hope you enjoyed this post as much as I did!
Cheers! Go dive into web awesomeness! I forgot! Here are some useful links you can contribute too:
- Contribute to the Code Base: https://mzl.la/developer_guide
- Participate in Outreachy Project: https://wiki.mozilla.org/Outreachy
- Start your webVR project with the Mozillians: https://mzl.la/campuswebVR
- Come work with Mozilla: https://careers.mozilla.org
PS: I forgot to mention that WebVR is an experimental JavaScript API that provides access to Virtual Reality devices, such as the Oculus Rift, HTC Vive, Samsung Gear VR, or Google Cardboard, in your browser.