AR/VR Workshop
A-Frame
A- frame is a web framework for building virtual reality experiences. A-frame is an open-sourced cloud-based framework that makes it possible to create digital and interactive experiences by using this online tool. At the start of the course, I was leaning more towards learning to work with Unreal engine but in the end, we used an A-frame supportive website 8th wall which also made it possible to run our HTML+ Javascript code on the computer for editing the scene while allowing the use to have VR/AR experience through their computer/smartphone or headset. The combination of A-frame with 8th wall seemed straightforward as we will see in these first examples that the program is working with robust shapes and "simple" animations. But I have long time learned that simple doesn't mean easier. All and all Using this tool really helped me get a better grasp of my coding skills and insights on coding in 3D. More about that in the Lab weeks.
Assignment 02 Step 6
Hello, WebVR! • A-Frame - Google Chrome 2021-06-24 11-06-17.mp4The first step was to create a cube, which is shown on the top left, to create the first step is to create a scene, a scene contains all the elements that will together from the environment you are creating and later experiencing once ready. In this scene it is possible to add shapes and colour by writing these into your code. A -frame has a set of standard shapes such as cube, cone, cylinder among a few of the material components. All the components can be defined by their own specific set of measurements and properties. Once I had created a cube and learned how to apply colour I added a plane and a second shape. Having gained some practice I started to play around with the shapes working with their positions and scaling.
Hello, WebVR! • A-Frame - Google Chrome 2021-06-24 12-00-18_Trim.mp4So far we learned that the scene contains all the elements of the environment, the red in the picture above is a plan which is typically used as the floor of the scene, but these can also be turned in degrees they can be given different colours and even textures can be added to them. The assignment on the left is summers day with a small garden and the sun, the geometries used: The cones for the stem of the flowers the sphere for the sun the plan for the grass and the tetrahedron for the tulips. For the plant box I changed the measurements of the box's height and width. All the objects measurements can be adapted size but also in their position in X,Y,Z playing around with the z can help create depth in the scene as I did with the sun which looks "farther" away.
Link to final: https://paulinamartinak.github.io/Paulina_Martina_HT_week_01/02Shape/
Link to code: https://github.com/PaulinaMartinak/Paulina_Martina_HT_week_01/blob/main/02Shape/index.html
Assignment 04 step 7
VID_20210514_213723.mp4Need for speed
Hello, WebVR! • A-Frame - Google Chrome 2021-11-05 00-07-15.mp4For this animation I used the box with different sizes and speeds, I changed the positions and I also created one large wooden box that annoyingly covers to other two as it rotates. Or so I thought when zooming out it is possible to take distance from the box almost like taking a step back. Navigation is very important for creating the interaction/. I was also able to change the texture of one of the boxes which change from blue to pink bubbles when hovering over it. The box has animation properties to which say towards how many degrees the rotation should happen before being complete, duration influences how long it takes for the animation to be completed.
how Link to final: https://paulinamartinak.github.io/Paulina_Martina_HT_week_01/04Animation/
Link to code: https://github.com/PaulinaMartinak/Paulina_Martina_HT_week_01/blob/main/04Animation/index.html
Assignment 05 & 06
Hello, WebVR! • A-Frame - Google Chrome 2021-11-05 17-00-17.mp4I was also able to change the texture of one of the boxes which change from blue to pink bubbles when hovering over it. This action used mouse_enter /mouse_leave to activate the rotation of the which happens with the code start event the box has been assigned a material property and a colour that have mouse_entercolour and mouse_leavecolour as their command to change the colour when having the mouse near the object. When hovering with the mouse on the upper side of the bubble box it will rotate backwards if you do the same with the mouse at the bottom it will rotate forward towards the screen.
Link to final: https://paulinamartinak.github.io/Paulina_Martina_HT_week_01/05Interaction/
Link to code:https://github.com/PaulinaMartinak/Paulina_Martina_HT_week_01/blob/main/05Interaction/index.html
WhatsApp Video 2021-06-25 at 22.45.00.mp4Hello,6 - Google Chrome 2021-11-05 18-18-41.mp4I had had big hopes for this one I got the regular code to work and in the end, I went for space theme and tried to import 3D assets to this assignment as this would repeatedly give errors. I think because the Files downloaded didn't take the material with them ( objects with no skins). The idea was to have a little alien spaceship go up and down, as the viewer goes over the center point connected to the mouse. Unfortunately, I ended up ruining the code a bit. I did learn how to make 3D shapes with basic geometries ins this case the sphere, (yes the sun came after :D) the white "moon" and add textures int this case a Skybox image was added to the assignment I suppose that is a start, initially I took away the screen centred indicator but brought it back and was able to change the colour to black and play around with the size just a bit.
This second video shown bottom left also works with mouse enter and mouse leave but that of view of the user and is affected by how they move their head to come near or further away from the geometry to trigger the animation
As you can see below when the camera is centered on the geometry it turns blue when the mouse, in this case, your view shifts away from the geometry will turn red.
Link to final: https://paulinamartinak.github.io/Paulina_Martina_HT_week_01/06InteractionHeadset/
Link to code: https://github.com/PaulinaMartinak/Paulina_Martina_HT_week_01/blob/main/06InteractionHeadset/index.html
Unreal Engine
Importing the materials, adding the meshes into the level. The materials work as literal skins to your 3D geometry. The Material editor is used to add the textures, making it possible for these to fit accordingly to your object. The materials can then be adapted onto shaders, both materials and shaders can be applied onto multiple objects at once. The less structured your 3D design is the fewer geometries that will be needed. The camera point and lighting, can be set to higher/lower intensity the direction can also be changed, to make it fit onto the camera view you are trying to create. Similar to with A-frame the assets in unity are also uploaded onto a scene, there is also the option to add a skybox, as you can see on the picture below with the clouds, but you can also make your own skybox, You can edit your picture and upload it to Cubmap the website will slice your image accordingly so that you can upload it to create your skybox.
Blue prints seen in the center bottom picture are used to manage graphs and functions, Nodes ar used for designing the interactions.