Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can...
51
Finding the key (to WebVR)
Transcript of Finding the key - Malwine(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL) You can...
Finding the key
(to WebVR)
About meMicrosoft
#sketchnotes
(at Jeffconf Hamburg)
I like WebVR!Malwine
@malweene
Some history
• Graduated High School 2012 📚📜💯
• 2012: Computer Science: attempt 1= fail ❌
• 2014: Computer Science: attempt 2 = yay ✅
• 2016: Programmer at Microsoft &💻
Me 2012
can not program
has no support
decides (a bit random) to study computer science
has zero computer knowledge
The closed doorsTech WorldSports Music
closed
The closed doorsTech WorldSports Music
???
The closed doorsTech WorldSports Music
closed
The closed doorsTech WorldSports Music
closed
LeaveStay
The crucial moment
🍀
A little wonder happens…Tech WorldSports Music
closed
Hey, do you want to try
Ruby?
RailsGirls Workshop 2013
This door opens!Tech WorldSports Music
😱
WOW!
Inside tech community
💛 Cool people
Motivation!!
Programming is fun 💛
Meetups Conferences 💛
InclusivenessMentoring 💛
Knowledge sharing 💛
JobsVR
RubyJavaScript
#sketchnotesYay!
Welcome!
Who provides keys:
• Rails Girls
• Open Tech School
• NodeSchool
• ClojureBridge
• Crypto Party
Key initiatives
Virtual Reality
Virtual RealityPoll
Tried VR before? Coded VR before? Wanted to get into VR?
The closed doorsVirtualRealityWeb Games
Requirements: • C++, Java • C# and Unity • WebGL • three.js
• C# and Unity • C++ • Blender • WebGL • three.js
Entry requirements:
• C# and Unity • C++ • Blender • WebGL • three.js
• modelling • lighting • baking • shaders • frame rates
Entry requirements:
The closed doorsVirtualRealityWeb Games
Requirements: • C++ • Unity • WebGL • three.js
😾 ⚡
😢
But, there is a key!
The VR key
A-Frame
Virtual RealityImmerse in a computer generated
simulated realistic experience
What can we do with VR?• Gaming? Interactive experiences?
What can we do with VR?• Gaming? Interactive experiences?
• Medical Industry
• Trainings
• Education
• Architecture & Real Estate
My passion about VR is the power that immersion has in terms of life. Diversity inclusion is driven by empathy and compassion. How can I be more inclusive if I can’t understand or empathise with how it’s like to be “the only one”.
Erin Teague@ErinTeague Youtube VR
Quoted from Physics Girl Video
Virtual Reality as a new medium to encourage empathy and compassion
Virtual Reality as a new medium for art, activism and journalism
And again: Access matters!
Web VR (Web XR)
• WebVR: JavaScript API for creating immersive 3D/VR experiences in the browser
• More information: webvr.info webvr.rocks
Device that everybody has
5 $ Cardboard VR Glasses
The VR key
A-Frame
A-FrameWeb framework for building virtual reality experiences
(Using web technologies: HTML, DOM, JS, three.js, WebVR, WebGL)
You can think of A-Frame as a theatre play or a movie:
You’ll have a scene, some light, a camera and
then you’ll have objects you put in the scene.
Martin Splitt@g33konaut
Archilogic & 3d.io
Quoted from Modern Web Podcast
Out of the box• Scene • Light • Camera • Primitives, like boxes, spheres, planes, etc.
• Entity-Component-System
• A-Frame works with React, Vue.js, Angular, d3.js, and jQuery
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
< a-box position="-1 0.5 -3" rotation="0 45 0" color=“#4CC3D9" >< /a-box >
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Custom Element
<a-entity
geometry="primitive: box; width: 3”
position="-1 0.5 -3"
rotation="0 45 0"
material="color: #4CC3D9">
</a-entity>
Entity-Component-System
var sceneEl = document.querySelector('a-scene');
AFRAME.registerComponent('do-something-once-loaded', {
init: function () {
// This will be called after the entity has properly attached and loaded.
console.log('I am ready!');
}
});
var entityEl = document.createElement('a-entity');
entityEl.setAttribute('do-something-once-loaded', '');
sceneEl.appendChild(entityEl);
How to hook in with
JavaScript?
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
This is everything
you need to know!
Why is A-Frame great?Easy to get started, designed for easy access
A-Frame School with glitch.com
Examples, Documentation, Slack & Community
A-Frame Inspector
Community components e.g. physics, environment, controller support, particles, waves, animation
Super neat for prototyping
My A-Frame ProjectAn exhibition: A-Frame, React and Redux
wit-exhibition.github.io (in German, might be translated soon)
This door opens!Virtual RealitySports Music
You can do it!• You can provide keys!
• You can open doors for other people!
• You might change someones life for the better!
Thank you!
