 Bagaimana? Bagaimana? Okey. Okey. Okey, mari kita mulakan. Hai, semua. Terima kasih untuk datang hari ini, untuk kerja ini. Jadi hari ini, kita akan memperkenalkan beberapa konfigurasi keperluan dan kita akan menggunakan studio Sparkia untuk membuat beberapa demonstrasi. Jadi, jika anda tidak dapat memperkenalkan material ini di kode dan link ini. Okey. Saya akan memperkenalkan diri sendiri. Saya adalah Francis. Saya seorang pelajar komputer yang seorang pelajar dan saya sebahagian daripada sebuah team haker. Dan sedikit dengan diri saya, saya menikmati haker. Jika anda memperkenalkan kode QL ini, ia berlaku dengan kode PLA saya. Ya. Ini pelajar telegram saya. Jadi, apabila anda memperkenalkan keperluan, jika anda ada pertanyaan, saya akan meminta untuk anda sebelum anda memperkenalkan keperluan. Untuk kecuali keperluan. Okey. Jadi, menurut saya, sedikit semula. Sebenarnya, memperkenalkan teori dan kita akan membuat beberapa demonstrasi. Jadi, keperluan virtual. Jadi, apa keperluan virtual? Jadi, keperluan virtual adalah konsep mengalami keperluan anda dan memperkenalkan diri sendiri ke keperluan virtual. Jadi, bagaimana anda membuat ini? Untuk memperkenalkan keperluan ini yang memperkenalkan anda dari keperluan tersebut. Jadi, ia memperkenalkan anda dalam keperluan virtual ini. Jadi, anda mungkin telah melihat keperluan tersebut seperti pelajar telegram 1 di bawah. Apabila keperluan tersebut adalah memasukkan keperluan virtual ini. Jadi, di tengah-tengah sini, ini apa yang anda melihat dari keperluan keperluan. Jadi, mereka mempunyai setiap keperluan yang berbeda supaya keperluan tersebut adalah sedikit berbeza. Ini untuk memberi anda keperluan keperluan keperluan apabila anda melihat keperluan virtual. Jadi, setiap keperluan ini biasanya mencari setiap keperluan sehingga $300 sekarang. Sebuah keperluan konsumer. Tetapi anda dapat sesuatu seperti setiap keperluan ini. Seperti yang sangat keras, seperti 20-30 tahun. Saya akan mempunyai keperluan pada event-event. Tetapi, sesuatu yang sama, seperti ini ada dua lensa yang membuatkan kemahiran. Jadi, anda membuatkan kemahiran di dalam, ia membuatkan kemahiran menjadi sesuatu yang memperkenalkan VR. Jadi, ini adalah kemahiran yang sangat keras. Jadi, masalah ini adalah tentu, ia sangat memutuskan kerana hanya memolakkan anda memasukkan keperluan keperluan kemahiran. Jadi, saya akan memasukkan kemahiran nanti. Dan kenapa ia penting? Jadi, selanjutnya, kita mempunyai kemahiran keperluan. Jadi, kemahiran keperluan yang paling menarik, kemahiran keperluan yang anda mungkin mengetahui adalah kemahiran Pokemon. Jadi, anda menggunakan telefon anda, kemudian, mereka memperkenalkan kemahiran, kemudian anda memperkenalkan, memperkenalkan mereka, dan memperkenalkan kemahiran keperluan, kemahiran kemahiran. Jadi, ia hanya sebuah kemahiran kemahiran di permainan. Jadi, ada beberapa kemahiran kemahiran kemahiran, seperti yang saya dengar dari Google Glass, di mana mereka mempunyai kemahiran kemahiran kemahiran dan kemahiran kemahiran kemahiran, di mana mereka memperkenalkan kemahiran digital. Jadi, mereka akan memberikan anda beberapa informasi tentang dunia. Mungkin tentang kemahiran anda, kemahiran anda, dan sebagainya. Semuanya baik. Semuanya baik? Tidaklah. Bagus. Ya, jadi, seperti yang saya cakap tadi, ada kemahiran kemahiran kemahiran, bukan forte kemahiran kemahiran, bagi cara anda kemahiran, anda akan cari melalui dunia. Contohnya, saya tahu kok mempunyai hardware yang terkenal, seperti Magic Leap di lantai dan HoloLens di tengah-tengah. Mereka mempunyai hardware untuk menghidupi perangkatan dengan menggunakan kamera infrared. Mereka memperkenalkan perangkatan dan membuat masyarakat ini, masyarakat ini di sekitar user. Jadi, kenapa ini penting? Ini penting kerana sekarang perangkatan digital dapat menghidupi dunia sebenar. Jadi ini seperti perangkatan digital di dunia sebenar. Jadi, Puan Phuong Phuong, jika anda dapat membuat perangkatan di perangkatan, Sekarang jika anda memasak perangkatan digital di perangkatan, perangkatan digital dapat menghidupi perangkatan di dunia sebenar. Adakah anda faham? Ini adalah hubungan. Sebelumnya, ada hubungan, tapi sekarang ada hubungan, tapi hubungan ini dapat menghidupi perangkatan di dunia sebenar. Perangkatan ini sangat berlaku. Di luar 4K, dan di sini, kita dapat pengalaman yang sama, tapi menggunakan pangkatan. Jadi ini adalah salah satu pangkatan yang lebih berlaku dalam perangkatan. Saya telah bermain untuk anda. Jadi, dengan hanya perangkatan dari pangkatan, mereka dapat membuat pangkatan yang terkenal juga. Tetapi, tentu saja, ia tidak terlalu benar sebagai pangkatan yang kita menggunakan hardware yang berlaku dengan kamera infrared. Kerana kamera di handphone ini lebih rendah. Tetapi anda masih dapat pengalaman yang sama. Jadi anda dapat melihat bahawa kita menghidupi pangkatan di atas pangkatan, dan ia dapat menghidupi pangkatan dan dapat menghidupi pangkatan dengannya. Saya boleh menghidupi pangkatan di luar. Jadi, sangat bagus, kan? Saya rasa sangat bagus. Jadi, saya akan menghidupi pangkatan di luar supaya anda akan menjadi pro di VR. Jadi, HMD berlaku kepada display mount yang dihidupi. Seperti yang saya beritahu sebelumnya, untuk pengalaman berlaku dan pengalaman berlaku. Satu-satunya mereka memiliki hardware yang berlaku di mana mereka menghidupi pangkatan. Jadi, HMD. Jadi, pangkatan yang berlaku dan pangkatan yang berlaku dalam perangkatan sebelumnya. Ada beberapa contohnya. Kemudian, perangkatan berlaku adalah sesuatu yang anda akan menghidupi jika anda menggunakan pangkatan yang berlaku. Jadi, kenapa ini penting? Sebab semua orang memiliki pangkatan yang berlaku antara mata mereka. Jadi, apabila anda memiliki pangkatan yang berlaku, biasanya, pangkatan yang berlaku memiliki pangkatan IPD. Jadi, anda hanya dapat pengalaman yang berlaku di mana-mana pangkatan yang berlaku, pangkatan yang berlaku, memiliki pangkatan IPD yang berlaku, menjadi berubah. Jadi, anda dapat mengubah dan memiliki pangkatan berlaku. Dan beberapa anda mengadakan bagaimana ke jalan yang ke jalan yang ke jalan ke belakang dan di bawah, anda dapat melihat. Jadi, ini penting kerana anda ingin mencari pengalaman yang berlaku. Anda tidak mahu pengalaman anda diberi sengaja. Untuk beberapa tahun, ini adalah salah satu faktor yang mempunyai pengalaman untuk pengalaman emas. Kerana keadaan kerajaan tidak dapat mempunyai hologram atau objek digital di dalam perasaan manusia. Jadi, untuk perasaan manusia, ia berada sekitar 135°C. Jadi sekarang, perasaan manusia ada beberapa perasaan sekitar 70°C. Jadi, anda dapat perasaan kelima dan apabila objek digital digunakan dengan perasaan manusia, kemudian ia dibuat. Jadi ia membuang pengalaman emas. Kemudian anda seperti, oh, ini hanya objek digital. Perasaan manusia adalah, oh, semuanya sangat benar-benar. Wah, saya tidak dapat membebelah ini di antara dunia dan dunia digital. Ya, ini perasaan manusia. Selanjutnya, kita mempunyai IMU. Kita mempunyai, oh, tidak, inisiasa unit, bukan unit ini, maaf. Jadi, ini seperti perasaan manusia di dalam perasaan manusia atau perasaan manusia? Yang mempunyai informasi, seperti accelerasi, rotasi, dan magnetisme? Ya, magnetisme. Jadi, ini betul-betul bergantung dari perasaan manusia. Jadi, selanjutnya, kita mempunyai perasaan manusia. Oh, saya belum dapatnya. Kenapa kita perlu mempunyai magnetisme? Jadi, magnetisme, anda boleh mempunyai informasi tentang perasaan manusia. Jadi, anda boleh mempunyai objek virtual untuk dunia sebenar lebih benar-benar. Kerana tidak sebabnya, semuanya hanya akan mempunyai perasaan manusia apabila anda mulai menggunakan perasaan manusia. Saya takut bahawa anda sudah hilang. Bagaimana anda hilang? Bagaimana anda tidak hilang? Okey. Jadi, dengan ini, seperti ini, anda dapat hanya melihat perasaan manusia dalam perasaan manusia kerana mereka hanya mempunyai 3 degree perasaan manusia. Jadi, mereka hanya menggunakan perasaan manusia kerana anda menggunakan accelerometer dalam telefon anda untuk membuat perasaan manusia yang anda dalam perasaan manusia. Jadi, jika anda ingin melihat ke bawah atau ke belakang atau bergerak, anda tidak dapat feedback yang benar-benar. Mereka tidak memperkenalkan perasaan manusia dalam perasaan manusia. Seperti contoh, saya menggunakan perasaan manusia di sebelah saya. Jika saya melihat ke belakang, kemudian perasaan manusia di sebelah saya akan bergerak. Anda tidak akan dapat perasaan manusia. Jika anda hanya mempunyai 3 degree perasaan manusia, tetapi dengan telefon yang lebih tinggi, anda akan mempunyai 6 degree perasaan manusia dan anda akan mempunyai perasaan manusia. Anda akan dapat melihat ke bawah dan kemudian melihat lebih karang ke objek 3D dan lalu bergerak. Untuk magnetisme, saya mengatakan tadi, ini memadai kegunaan para hampir untuk menguntungkan keadaan keadaan bergaya dengan sebuah informasi kampus. Jadi, bagaimana membuat pengalaman kemahiran di dalam perasaan manusia? Jadi, ini adalah konsep pentas yang penting kerana ini adalah salah satu suatu kecuali yang membuat atau menggunakan kecuali keadaan kecuali keadaan kecuali keadaan kecuali keadaan. Sebenarnya, anda ingin mempunyai pengalaman yang sepatutnya orang boleh berhubungan. Anda tidak mahu ia menjadi tidak benar. Apabila anda melihat film, anda akan melihat objek CGI dalam film. Anda akan berkata, oh, itu salah. Ia tidak mempunyai bahagian yang benar-benar bahagian. Kerana mungkin rendahnya sangat telah dibuat atau bahagian yang lebih berbeza. Jadi sejauh semasa ia tidak mempunyai bahagian, anda akan menghubungi ilusi ini yang benar-benar. Jadi ini adalah apabila CGI, imajan komputer yang dibuat akan gagal. Dan kemudian, kita juga ingin membuat ilusi yang benar-benar benar di environment virtual kita. Jadi bagaimana kita melakukan ini? Satu cara adalah untuk menggunakan Qs yang saya menyebabkan tadi. Element di dunia digital sepatutnya harus bergerak seperti itu. Mereka ada di dunia benar-benar. Kemudian, kita ada audio-Qs yang kita menggunakan, kita menggunakan, bagaimana saya menggunakan? Menurut saya, perkembangan antara apa yang saya dengar di sini pada tahun yang tersebut, untuk menyuduhkan keadaan alat objek. Pertanyaan, dalam tepung film, anda mungkin akan mendengar sesetengah hal yang berat. Jadi mereka menggunakan alat spesial untuk membuat anda rasa yang alat objek mengubah alat dari sekejap. So, for example, let's say this box is emitting noise. So, the sound will reach my right ear, before it reaches my left ear. So, this slight difference can be picked up by humans to give us some additional information about the position of the audio source. So, this adds to the emotion effect. And lastly, haptic cues. This is a bit more tricky. So, haptic refers to vibrations. So, vibrations from where? Mostly, it's using the controllers. So, for example, let's say I have a controller in the virtual experience and I reach out to an object. It would be best if I can reach out and grab and feel the object itself. Because this is what I expect in the real world. I expect some touch, a sense of touch, or maybe some reaction when I interact with the object. So, this kind of haptic cues add to the immersiveness of the experience. Okay. More jargon. I'll show you, these are quite important. So, one important thing that we need to do when trying to create virtual or omitted experiences, is to track the environment. So, we somehow need to ground our immersive experiences to the real world. So, we do this by using the head tracking, like I mentioned earlier. Or we can also track markers here. So, basically, we use that marker as a point of reference to the real world, and then we overlay our digital objects onto it. Or we can track like an arbitrary plane, for example, a table or a floor, and then we just overlay that digital image. So, this markerless tracking, it's a bit more difficult because the plane itself might not have enough details for us to pick up and track. It's almost the same as marker tracking, but we are using different kinds of information to create the virtual plane where we put our virtual objects. Then next, we have head tracking that is typically used by the headsets. So, we want to basically localise the position of the headsets with respect to our digital environment. So, we do this by either using external trackers to track and locate our headsets similar to how our GPS does it. So, GPS, they use satellites to triangulate the position. Similarly, they have external... In this outside tracking, we use external trackers to localise our headsets in 3D space. By localising the position of the headsets, we can then move around in the virtual environment or whatever we like. Once this tracking breaks, we no longer have any information of our position with respect to the virtual world, and then everything just flies everywhere. The virtual experience is ruined. So, this is quite critical. One of the newer progressions in virtual reality space is the use of inside out tracking. So, it is similar to mobile experiences where we are using a camera to track the external environment. So, instead of having one camera on your phone, you now have multiple cameras on your headset and then you are able to take pictures of the environment and then keep track of the environment. More jargon. So, how do we track the environment? We use key points which are basically special features in the environment that we can use to localise a plane or an object. So, I previously mentioned that we have got marker-based tracking here and markerless tracking. So, they both use this kind of technique which is basically to find the key points that are special, that are unique enough to be able to track over a period of time. And by being able to track these points over a period of time, you can then extrapolate the position of this marker with respect to your device. Point cloud simply refers to the input data that comes through the infrared cameras of higher-end devices. And then a special mesh is something that I mentioned earlier which is basically this overlay of the real world and how the computer represents real world in the virtual space. Stereovision refers to having 2 cameras and then being able to differentiate the depth. Not really true. You could do it with one infrared camera and then detecting all of the point clouds. You can do it with one camera as well but it's a lot more difficult. You can do it with the virtual information of being able to accurately the distance between your device and the and the object or the key point because you can do some trigger number 3. Hey, Ken. Don't worry guys, we are ending it. It's all the boring stuff. So, what? No. So, it's basically idea that you can represent coordinates in 3D space using 3 numbers. And they have got direction. Okay, cool. Finally, guys, we made it. So, now I'll be going through some of the demonstrations that I prepared for Spark AR. So, we can open up our Spark AR studio and have some fun stuff and hopefully y'all will learn something useful. Y'all should see this. Y'all should see this. Have y'all opened it up? Have y'all installed it? Can I get some feedback? I hope y'all have installed it. So, we're going to proceed. So, we just create a project. And perhaps you can save it as some arbitrary name. Tech Girls School is good. So, we got this arbitrary scene, right? Y'all got this? Open? New project? Okay. So, I'll be explaining to you what are some of the different elements in this software. So, over here on the left side, the top left, there's this scene view. Actually, can y'all see it? Can y'all see? Can y'all see? So, this is the scene view. Where the scene view houses all of the elements that we have in our scene. So, currently, we've got a device, then we've got camera, focal distance, microphone. So, all of these are preset elements that are defined by the software. So, what's important is that you can see how the microphone and focal distance is nested under camera and camera is nested under device. So, it's like a parent and child relationship or objects we have, sub-objects. And these sub-objects could have even more sub-objects. Then, over here, the giant rectangle here, this is the viewport. So, this is where you manipulate elements in the three-dimensional space. So, what I'm doing now, I'm holding right-click to rotate the camera. So, this might be a bit tricky if you are using a Mac. And if you have a mouse, it will help a lot. Do you have a mouse? I mean, I could do it on my computer too, but I might say my touchpad. But for Mac, it's a bit difficult. Okay. Okay. Good job, Mac. Sorry, I love Mac. Okay, so next, we've got this simulator here. So, we've got this guy with moving his head. So, this is basically how your effect will look like. So, I didn't mention this earlier, but Spark AR Studio is typically used for reality experiences like filters that you can publish on Instagram or Facebook. So, you can use this next time for that use case. So, over here, you can see how our effect will look like. You can change different faces by changing the video feed at the left side. So, you can even use your own camera. Yeah. Oh, he's a rear camera too. I'll probably be using I'll probably be using the rear camera a lot. Yeah, because I'm unable to connect my phone to my computer. Okay, so next, we have got the inspector on the right side. Here. So, on the inspector, we can view the properties of the elements that we'll be creating later. So, if you click on camera, texture extraction, segmentation, not so important, we will go into this more later. And at the bottom left, we've got this panel called the assets panel. So, we have not imported anything yet, but later, all of our 3 models will be housed here. So, maybe we can add our first asset which is the primitive cube. So, press add assets, then press import from computer, then go into the models folder that I sent anyone doesn't have access to the models folder. So, the models folder has like a bunch of models that I have downloaded and created for y'all. So, we want to import the primitive cube dot glb. Okay? Okay, I need to turn off the camera now. It's a bit too intense. Okay? So, y'all should see the primitive cube in the assets panel. Y'all see it? Real good, right? So, this is basically like the hollow wall of AR and VR which is basically to put a cube onto the screen. We're going to be doing that. We're going to drag and drop the primitive cube as a child of the camera object. As a child of the camera object. So, that means you drag it and the camera will be highlighted and you let go. So, now it's a child of the camera object. Okay? And then you should see the cube appear in your viewport. Are we all good? If y'all are lost or maybe just came you can raise your hand and then we will come down and help you out. Can you help? Thanks. Anyone else lost? Anyone else? I think it's hidden because this taskbar is a bit blocking. Oh, it's down there? Ya, it's typically below. I mean you can also drag and drop it from outside. You can just download. I can extract it first. I can just drag and drop the primitive cube. Ya, let me sit there. Ya, let's put the cube in. Later, later. Can you shoot? No, no, no. Okay, hopefully everyone is on the same page now. Everyone has this cube in the viewport. So, you might be wondering I mean I've got the cube in the viewport but I can't see it on my simulator. Dang. So, first let's resize the cube because it's a bit too big. So, you can see the panel here. You can have a look at all of the properties of the the object that we have. Or make sure that you're highlighting the primitive cube on the left here. You got it selected. So, we can make it invisible, visible, animations. Then we can do some transformations to it. So, let's change the scale of the cube to 0.2, 0.2, 0.2 in all three axes, X, Y, and Z. Perhatikan, jika saya tidak mengubah value Y, ia akan menjadi cube void. Ini bagaimana anda mempunyai objek. Jadi, jika anda ingin mempunyai setiap perkara yang berlainan, anda hanya mempunyai setiap value yang sama di setiap axes. Jadi, sekarang kita mempunyai kecil kecil dan anda dapat zoom-in dengan mempunyai kecil kecil. Mereka dapat memperkenalkan kecil kecil. Saya harap, kerana ini adalah sebuah perkembangan. Jadi, sekarang kita mempunyai kecil kecil kecil, tapi anda tidak dapat melihatnya. Sebabnya, kami mempunyai kamera kami. Sekarang, kami mempunyai kecil-kecil kecil-kecil kecil kecil kecil kami. Jika anda melihat di sini, mereka mempunyai kecil kecil kecil di sini. Jadi, kecil kecil kecil ini mempunyai apa yang kamera dapat melihat. Jadi, mungkin saya dapat membawa kecil kecil kecil. Jadi, anda dapat melihat bahawa bahawa video ini lebih besar, tetapi anda hanya dapat melihat kecil kecil kecil. Seperti kecil kecil kecil. Jika anda mengubah kecil kecil kecil kecil, anda mengubah kecil kecil kecil kecil kecil kecil kecil kecil. Anda dapat melihat lebih atau lebih lebih atau lebih kecil kecil kecil. Saya akan mengubah kembali ke iPhone 8 kerana ada defaultnya. Bukan saya mengubah tapi kami belum dapat melihat kecil kecil. Sangat teruk. Mari kita memutuskan air yang tanah keadaan. Baiklah. Sekarang anda dapat melihat kecuali kamera anda dan anda dapat melihat kecuali kecuali di sini. Baiklah. Tapi sekarang ia kelihatan seperti sebuah kawal. Bukan seperti 3D untuk kami. Jadi, kita dapat menambahkan rotasi kekannya. Jadi, mungkin 45 degrit dan 45 degrit di y axis. Sekarang ia seperti 3D objek. Baiklah. Sangat bagus. Jadi, bagaimana anda memutuskan kawal anda dapat memutuskan kawal dengan memutuskan kawal di sini. Kawal tanah atau kawal tanah. Atau anda dapat memutuskan kawal di dalam kawal. Seperti contohnya, sekarang saya memutuskan kawal di dalam kawal XZ. Kawal tanah dan kawal tanah dengan memutuskan kawal ini. Bukan kawal. Baiklah, baiklah. Bukan? Dan anda dapat memutuskan kawal yang anda memutuskan biasa. Saya mahu memutuskan rotasi kekannya. Saya dapat memutuskan kawal ini di atas kawal. Saya dapat memutuskan kawal ini di atas kawal. Di atas kawal. Sekarang saya dapat memutuskan kawal saya. Bukan seperti memutuskan kawal yang di dalam kawal. Dan saya dapat mengubah kawalan di sini. Wow. Tetapi saya akan mengubah semuanya kembali kepada apa yang terjadi tadi. Saya rasa ia okey. Sekarang, mari kita cuba memasangkan ini ke muka mobile kita supaya kita dapat pastikan semuanya dalam kerja pipeline. Jadi jika anda mempunyai kabel telefon anda, dan jika anda mempunyai player Spark AR di telefon anda, anda dapat mencari botan ini untuk mencari aplikasi anda, mencari device. Pastikan telefon anda menghidupkan komputer anda dan memastikan botan yang menghidupkan itu. Jadi anda harus melihat telefon anda di luar sini. Saya tidak dapat menghidupkan ini untuk anda kerana saya tidak mempunyai. Saya tidak dapat menghidupkan kabel saya kerana saya hanya mempunyai satu port USB-C. Jadi anda dapat melihat device anda di sini. Jika anda tidak mempunyai kabel anda, tidak ada masalah. Anda dapat menghargai melihat aplikasi anda. Kemudian anda dapat mencari link yang diberlainan untuk kamera Facebook anda. Jadi anda menghargai send kemungkinan, dan mereka akan menghasilkan file untuk anda melihat di telefon anda. Kekmungkinan untuk anda melihat di telefon anda. Jika anda menghargai send, anda dapat melihat terses link. Anda dapat menghasilkan terses link saya atau terses terses link anda. Kemudian anda dapat menghasilkan terses link ini untuk diri sendiri menggunakan aplikasi mesej anda. I.e. Whatsapp, Telegram, e-mail. Saya tidak tahu apa lagi. Line. Jadi saya menghentikan diri saya. Kemudian saya dapat melihatnya dari telefon saya. Itu telefon saya. Apabila di telefon anda patut melihat sesuatu seperti ini. Seperti di website. Mereka hanya menerangkan kamera Facebook. Dan semoga anda dapat melihat keadaan. Semoga. Okey. Siapa yang mempunyai masalah mengenai ini? Apa? Kubu anda sepatutnya di sini. Anda sepatutnya melihat sesuatu yang sama dengan apa yang anda lihat di simulator. Sebenarnya kubu di depan anda. Pastikan kubu adalah seorang anak kamera. Boleh? Boleh? Ya. Jika anda tidak dapat melihat kubu, anda mungkin mahu mencoba untuk meluncurkan aplikasi. Kemudian kita akan menggunakan aplikasi. Jika anda menggunakan aplikasi spark AR, Ya. Ya. Jika anda menggunakan aplikasi spark AR, Tentang aplikasi, anda akan menerangkan aplikasi kepada pelajar sendiri. Jadi anda memperbaiki perjalanan untuk mengklik link. Okey. Jadi anda dapat kubu? Anda dapat kubu? Ya. Anda dapat kubu? Saya tidak dapat kubu. Anda tidak dapat kubu? Saya beritahu anda. Saya dapat kubu? Ya. Di Facebook. Di Facebook? Ya. Anda dapat menerangkan aplikasi untuk diri sendiri. Semua orang dapat melihat keadaan ini. Anda menerangkan aplikasi untuk diri sendiri dengan menggunakan aplikasi yang anda suka. I.e. telegram, WhatsApp, Line, Viber. Apa lagi? Kita berbual? Okey. Saya akan menerima bahawa semua orang kita telah membuat ini. Jadi terima kasih. Anda telah menerima pengalaman keadaan yang pertama anda merupakan. Tidak sangat keren. Ia seperti kubu. Dan lagi, ia tidak mempunyai... ia tidak mempunyai seperti yang kita menunggu. Bagaimana kita menunggu? Ia hanya kubu yang berlainan di kini. Jadi apabila kita mempunyai keadaan kami, ia tidak mempunyai ke kanan. Ia hanya memikirkan keadaan. Ia hanya mempunyai keadaan. Jadi ia mempunyai kubu yang berlainan. Jadi anda ingin mempunyai kubu. Jadi bagaimana kita melakukannya? Okey, jadi... satu perkara yang kita boleh lakukan, adalah kita boleh cuba mengubah posisi kubu. Dan kita boleh bergerak ke kanan jika kubu kita berlainan. Dan bergerak ke kanan jika kubu kita berlainan. Jadi kita boleh membuat perkara ini disebabkan kubu. Jadi masuk ke kubu. Jadi buka kubu anda. Kemudian buka kubu editor kubu. Okey? Atau mengekalkan kubu. Jika anda berlainan, ia tidak akan menjadi kubu kubu. Ia akan menjadi sesuatu yang lain. Jadi apabila anda mempunyai editor kubu, ia mempunyai kubu yang baik. Jadi ini bagaimana kita akan menambah kubu ke objek kita. Tidak ada koding. Okey? Jadi... Semuanya baik. Semuanya baik. Jadi jika anda mengekalkan kubu editor kubu, kita dapat... kita dapat... beberapa perkara yang kita boleh menggunakan di sini. Okey? Tetapi apa yang kita mahu adalah kubu kubu kubu. Okey? Kubu kubu kubu. Jadi anda mengekalkan editor kubu editor kubu. Apa yang mereka nama ini? Kubu kubu kubu. Pilih klihat klihat. Kemudian anda mengekalkan kubu kubu kubu. Kemudian anda dapat melihat ini. Kemudian anda dapat mengekalkan kubu. Bum. Okey? Kemudian jika kita mahu mengekalkan kubu dalam kubu ini, mengekalkan kubu dalam kubu kubu lagi dan mengekalkan kubu. Okey? Jadi anda patut melihat sesuatu seperti ini. Okey? Jadi mari kita cuba mengekalkan kubu. Oh, anda akan mengekalkan kubu. Kemudian anda mengekalkan kubu dalam kubu. Ya. Jadi mari kita cuba mengekalkan kubu kubu untuk kubu. Jika anda mengekalkan kubu ini, output ini adalah rotasi 3D. Jadi ini rotasi 3D dari telefon kami. Okey? Jadi kita cuba menghubungi. Okey? Dan kami dapat kubu yang 5.299 untuk saya. Saya tidak tahu apa tentang anda. Ya, saya akan membuat keadaan ini. Ya, para anda yang mengekalkan kubu, anda akan memperkenalkan kubu yang 3 rotasi yang diperkenalkan dalam kubu 3 dan sekarang anda hanya melihat kubu 1. Jadi apa? Ya, kami dapat mengekalkan kubu ini. Saya akan mengekalkan kubu ini ke kubu 3. Kemudian anda sudah melihat kubu ini. Jadi mengekalkan kubu kubu. Kemudian mengekalkan kubu. Kemudian mengekalkan kubu 3. Ya, kubu 3. Sekarang kita dapat melihat kubu lebih banyak. Boleh kita lihat? Ya, jadi kubu ini adalah keadaan dari telefon anda dan kubu simulasi anda di sini. Di kanak-kanak kubu ini, anda dapat mengekalkan kubu simulasi. Jadi apabila kita mengekalkan dan mengekalkan kubu simulasi anda, kita sebenarnya simulasi mengekalkan kamera. Jadi anda dapat melihat bahawa kamera objek dalam kubu kami juga bergerak. Kubu kami masih bergerak dengan kamera. Dan ini sebab kita memasaknya sebagai anak kamera. Jadi apabila kita memasak kamera kubu kami, kita sebenarnya mempunyai kubu untuk memasak ke kanak-kanak. Jadi mari kita cuba membuat itu. Jadi pada kubu pemerintah, mari kita klik botan ini di depan rotasi kata-kata. Baiklah. Kemudian anda dapat kubu baru di sini. Kubu baru di sini. Baiklah. Sebelum kubu baru di sini, ia mengambil kubu. Maksudnya kubu, kubu 3D dan ia mengekalkan ke apa-apa kubu yang akan kita memasak di sini. Jadi kita menghubungi kubu ini. Kemudian anda akan melihat bahawa keadaan kubu anda telah bergerak sedikit. Kerana sekarang anda mengambil kubu segera dari kubu sendiri. Jadi bagaimana keadaan ini? Kubu dari kubu, kubu 3D rotasi adalah mengambil keadaan keadaan kubu ini dan keadaan kubu ini tidak mengambil keadaan keadaan kubu ini. Ia mengambil keadaan keadaan kubu primitive. Kubu primitive 3D rotasi. Jadi anda dapat melihat di sini. Baiklah. Jadi jika kita mengambil kubu kita, anda dapat melihat bahawa kubu kita juga bergerak. Dan kemudian ia tidak mengambil keadaan kubu yang kita inginkan. Bagaimana anda telah membuat keadaan ini? Oh. Ada masalah? Oh, saya dapat membantu anda. Baiklah. Saya perlu membuat dan kemudian ia akan datang. Saya tidak boleh dapat dari sana. Anda hanya perlu mengambil kubu yang benar. Kemudian anda mengambil kubu device. Dan anda dapatkan kubu untuk kubu device. Kemudian anda dapat simpan untuk kubu. Kubu dan lain. Kubu? Baiklah. Saya tidak dapat melihat di sini. Jadi anda akan mengambil... Dan ia beri lagi. Anda akan mengambil keadaan untuk anda? Sekali ini. Jadi anda mengambil kubu. Jadi anda dapat kubu yang dikenali. Saya akan mengambil kubu yang ini. Jadi anda membuka kubu ini. Dan anda mengabuk kubu ini. Dan anda akan mengambil kubu sendiri. Mungkin dengan kubuση atau sesuatu. Baiklah. Ya, kemudian anda membuka link itu di telefon anda. Baiklah. Sebenarnya, tiba-tiba anda dapat menghidupkan hubungan. Ya, untuk Facebook. Jadi anda dapat menghidupkan hubungan ini. Oh, anda perlu mengubah aplikasi anda. Ya, okey. Anda mempunyai koneksi Wi-Fi? Ya, saya mempunyai hotspot. Oh, kemudian anda boleh mengubahnya? Oleh itu, anda mempunyai aplikasi Spark AR? Ya. Anda mempunyai aplikasi Spark AR di telefon anda. Seperti di aplikasi anda. Di aplikasi aplikasi anda. Saya dapat melihat dari sana, kan? Ya, anda dapat melihat dari sana. Oleh itu, anda perlu menggunakan Facebook. Ya, okey. Ada sesiapa lagi? Oh. Apa? Oh, anda mempunyai koneksi yang berlainan. Oleh itu, anda mempunyai koneksi yang berlainan. Kemudian anda mempunyai koneksi yang berlainan. Koneksi yang berlainan. Ya, anda dapat. Boleh? Boleh. Boleh? Boleh. Boleh. Boleh. Boleh. Boleh. Boleh. Boleh. Okey, mari kita lanjutkan. Okey. Jadi, kita mempunyai koneksi yang berlainan. Kemudian kita mempunyai koneksi yang berlainan dengan kita. Tapi, ia bukan seperti yang kami nak mempunyai. Jadi, sebabnya, currently the pivot of rotation of the cube is shown by this axis. These three axis. So, if you do any rotation, you will rotate by that axis. So, let's say I break the connection. If I just delete it, then now I can rotate the cube. But the cube rotates about this sphere. So, how do we make it rotate about the axis of the phone? So, we can do this by creating another object. Let's create a null object. So, you right click camera, right click add, or click add, then click null object. So, now you will have a null object here. And let's drag the primitive cube into the null object. So, now the primitive cube is a child of the null object. And a null object is a child of the camera. So, we can see now that when we select the null object, it's sphere that represents the axis of rotation. It's currently at 000, which is the same position as our camera. You can see previously it was here, like on the screen. And now it's behind. So, we have changed the axis of rotation. So, now perhaps we could... Let's rename this null object. Let's rename it to cube parent. You can name it whatever you want. Then, I'm going to create a new patch. Selecting the cube parent, I'll create a 3D rotation patch for the cube parent. And now I will connect it to my device motions value. Oh, vector 3. Every time I click, it doesn't change. What? It's going on with your computer. What is going on with your computer? Maybe just delete the patch. Right click. Mac, is it? Kidding, I love Mac. Let's try this. What is going on? Can't you make problem? Maybe you want to try to restart application. Safety first. But actually it's not very critical, because you can just delete this value. Then you can just directly to the rotation of the cube. So, let's say I got rotation patch here. I don't have to link the value. I can just link it directly. I can't find the value. Link it directly. It's okay. Just that you can't when I click the value. You can't see the value now. So you can just do this for now. Or you can try to... I don't know. I don't have computer yet. You press this hamburger. Similarly orbit. Now you... Okay. So if y'all couldn't... If for some reason your value patch doesn't work. If for some reason you couldn't change the the type of the value to revactor 3. You can just delete it and then just connect it directly. The value patch was just for us to visualise what are the values inside the device motion. But I mean you can also see it here. So it's fine. Make sure when you move around the camera right. Use simulate orbit instead of simulate touch. So now we're simulating moving the camera around. And if you simulate touch then you're just pressing around on the screen. Okay? So now if we move left if we drag the camera left right we should see that the cube moves right. And if we drag our camera right we should see that the object moves left. So you can see this inside the viewport here that the cube seems to be like staying in the same position as opposed to following the camera just now. Okay? So this is like sort of using the gyroscope information and using it to change the position of the cube with respect to our camera's position and thereby creating this illusion that it is in real space and not moving. Like hovering. So it's as if it's in real space. Or let me try to show it to your using the camera here. It doesn't really show here. So if you export this onto your phone right. If you see something that doesn't work. The reason being is because the device motion to the cube itself they are not calibrated per se. So even though we still can see some of the illusion here but it's not exactly perfect. So actually you can get the same illusion by just moving the cube parent outside of the camera. That means you make it a root of the device instead of a root of the camera. Oh no, you make it a root of the scene instead of the device. Instead of this. And then you can reposition your cube reposition your cube into the scene. And then you still act as as before. Have you done this? Currently? Ya, so I moved, I deleted everything from the patch editor. I deleted everything. And I moved the object outside of the camera. So previously the reason why it was fooling the camera it was because the cube was a child of the camera. So no matter how we move the camera it will just follow the position of the camera. The reason why we were able to make it move for a second just now by using the patch editor was that we mapped the value of the camera to the rotation of the cube. But we will not get the correct effect in reality because there's some values to tweak like for example let's say my camera is not equivalent to one rotation of the cube. Ya, so you need to do some calibration which is done for you by Spark AR if you just drag it out of the camera object. So you get the same effect. And if you build this project you should be able to see the cube hovering in space. So let's reset the camera. Reset camera. Ok, then let's try to test this application. Make sure that you have something similar here. You can connect the device and then you've got the cube outside of the device and you can see the cube on your simulator. Are we all ok? Are we ok? Then you can just test application test on device. Then again if you've got your Spark AR player working you can just send to connect the device. You can click the device here or you can do the same old same old thing and test it on your Facebook camera. You can connect to your Facebook camera and you get a new link. Then you can copy your link to your favourite messaging application and then you can send it to yourself and you can view it on your phone. I've got a lot of links. Anyone still stuck? Anyone doesn't know how to send messages to yourself? Can you email to yourself? So if for some reason I can't see the cube right because maybe you position the cube behind you or maybe when you loaded the scene the cube instantiated behind you so if I want to look around or you can just reset the application and it should land in front of your camera. Everyone has the cube hovering. So you test it and you can try again send to device. So how do I go up? Okay, where is it? Wait, let me find it. I don't know. Where is it? I told you you find it. For some reason it's just there. It's somewhere here. You have to find it. And you can change the position. So I'm not sure but I mean it's not very critical because we're going to be doing other things later. So it's okay. Now we'll just see the cube. Because we'll be doing more of this. So it's okay. Cube parent is just another object. It's just so that we can translate the cube in the x, y, z plane. Previously we rotated the cube object by 45 degrees in x axis and 45 degrees in y axis. So now it messed up our translation axis. So now just for us to make it easier for us to translate in x, y, z. We just wrap it around in another object. So the axis is basically but when you press the different levels they are just the position of those objects that are a sub-object of each. How do I put it? So over here this object is a sub-object of this one. So if you translate this object, you're translating everything that's below. So currently I don't know what this value. So basically you can move any of these vectors to move the cube. It doesn't matter in this case because we just want the cube to be in 3D space. So the reason why I can't see the cube now is actually because your cube is behind this panel. So actually, let's put nearer here. So when you move around the camera you'll see that it stays in the same position. So it must always be in front of the panel itself. It doesn't have to be. It seems like it still works there. Okay, you try to play. Just run it. Actually it should be fine. I think you still can see it. I think we've lost the cube. Okay. So you don't need to do this anymore. You can do this. So you need to move the object into our scene. So curiously, there is a cube in the middle of the panel. So you don't need to do this anymore. You can do this. So you need to move the object into our scene. So curiously, the reason why the cube doesn't move is because it's following the position of the camera. Because it's a child of the camera. So I want to move it out of the outside. So now the camera is here and then the cube is outside. And it's part of our scene. So where's the cube? I have no idea where you put it. Where's the cube? I can't see the cube. Oh, you put it invisible? Not in it. That's huge. Okay. What happened to your cube? Okay. What happened to your cube? So he mungus. What happened to your cube? We can really import the cube again. I'll suffice. So we just need to position it. We size it first. And now we can just so now we can see it in the scene, and when we simulate or bit. Oh, it's still following. Oh no, I put it as a child. Then put it outside. Okay, now I position back inside the viewport. So I can see it there. Then when I move my camera, it feels like it's hovering. So when you export this onto your phone, you should be able to see the same effect. Let's rotate this. How do you change this colour from grey to some other colour? Okay, I can go it together with the class. Okay. I hope that you all have figured some stuff out. If you only help, you can just place your hands. So someone ask so someone ask how do you change the colour of the cube? So if you select the cube here, if you venture deep enough into the cube, you can see there's this thing called notes underscore zero. So this object is named this way because the guy who created the 3D object use some software which named it like that. I.e. me. I use paint 3D to make this cube. So you can change the material of the object by looking at the inspector. Then you can create new material. Okay. Create new material. Then you will see on the assets tab you now have a material zero under the materials folder. You can rename this material. Let's rename it cube material. Okay. Name it cube material. Then you can change the colour of the cube by changing the colour here. Here. Let's change it to red. Nice red. Let's do two pink. Purple purple. Now I got a nice purple cube. Do you all have a nice purple cube? Do you have a nice cube? I will change colour. It's not essential but if you want to beautify your cube for some reason. Okay. Next we will do something more fun. We will add some interaction to our scene. Okay. So how do we interface with our augmented world? Using our mobile phone. And our mobile phone can take in some input. Basically screen tabs or dragging the screen around. So in our patch editor we can do this by right clicking and then we can search for the screen screen tab patch. Okay. Pum. Now we got this screen tab patch. Okay. So now the goal right that we are trying to achieve here is that we are trying to map the screen tab to reposition the cube. Okay. So let's reposition the cube to be let's say zero negative 0.4 and you all should see it roughly in the center of the screen. Is it okay? Zero zero negative 2.4. Why these values? No particular reason. Ya it's just because it looks like this. So that you all can follow along. Okay. So again we will try to look at the values of the screen tab. Let's open the value and it's fine because it's a 2D position we only need to use vector 2. Okay. Vector 2 representing 2 numbers. Okay. Then when we click around or when we click the hamburger menu and click simulate touch now we see like our cursor change on the simulator if we click around we should see the values in the value patch change. Dun dun dun dun dun Can? Ya'll see it change? Ya'll see it? The values here change? Are you sure? Don't take my word for it okay? Remember to connect the screen tab patch to the value patch. Then you can see the values here. I can't find the cube. It's okay ah. You can always just work in the simulator, it's fine. You don't have to look at it in the real world at this point. It's just a cube right? It's not very exciting yet. Okay, so we want to map our finger click right to the position of the cube. So now my let me change this. I should have changed the cube parents transform to 00 negative 0.4. Oh, so why is it gone? I guess 0.4? I messed up somewhere. Okay. Just move it here lah. It's not very important lah. Just move it inside the screen lah. Okay, next we will want to map the value of x here in our screen tab to the x coordinate. The x axis of our cube. Or make sure that your axis is aligned with the screen. So you can see I kind of messed up. So my cube is in some because of all the rotations I did. Let me try to reset the rotations. Or let me just import the cube again lah. Sorry guys, I messed up. I hope that y'all will learn from my mistakes. Okay. I've got no idea why but my camera is facing the wrong way. I'm going to move it. Okay. So remember to straighten the camera okay? Then we're going to move the cube closer to the screen. Okay, 0.4 lah. Then we can reset my cube. Okay. Can. So now when we look at our cube, we should be able to see this axis, right? The x axis and the y axis. Can. And we should also be able to see where is the limit. What is the leftmost limit of my cube? So the leftmost limit of the cube is roughly about 0.08 Around here. So remember the number okay? 0.08. Then the rightmost limit is like negative 0.16. 0.08, negative 1.16. Ya. Okay. So we want to map the values that we get. So when we tap the leftmost screen, we get 80 here. When we tap on the left side, we get about 80 ish. Ya 80 ish. And on the right side, we get about 600. Ya, okay. I'm eyeballing this. So let's grab another patch called unpack. So this unpack patch allows us to manipulate the individual value that we get from our vector 2. So previously, we can only handle the vector 2 as this collection of two numbers. But now we want to manipulate each number, the x and y coordinate individually. So we use this unpack patch. Then we connect the value to our unpack patch. Also we need to change the unpack patch value to vector 2 as well. I extracted the x and y values. Ya, if you tap on the screen, you can see the values update here real-time. Ya, now we... Sorry guys, it's just going to be a lot of patches and patches and patches. But we're trying to build up your confidence in using patches. So the next patch we're going to use is this patch called from range. So you can see that there's the description here. It maps the given value from the specified range inclusive. So previously we measured that the value of the screen tab ranges from 80 to 680. So I'm going to put 80 to 680. And then we're going to connect the x value from unpack patch into plus value from range patch. So now the output value will be scaled down to 0 to 1. Okay? And we must scale this value from 0 to 1. Now to a value that can move the cube from negative... from 0.08 to negative 0.16. If you are not confident in your math you can just follow along. Are you all able to follow so far? Sorry, I didn't get to check in with you all. Okay? So you want to map the value okay? So we'll create okay let's just create the patch for position of the cube parent first. We want to update the values of the cube parent here, such that the screen. Okay? It's our angle ah. Sorry, it's a bit hard to see here. So now the value that we get from from range is 0 to 1. And we want to map it to negative... What was it again? Oh. So once I create the cube parent I cannot modify the position of the cube in my viewport anymore because now it's being determined by the patch itself. Okay, for the last time I'll remember this for now. Okay? 0.08 to negative 0.16. So that's the difference of 0.24 Right? Like from 0.08 to negative 1.6. And negative 0.16. So that's a range of 2. 2.4. Ya. Ya, 2.4. Okay, so we use the multiply patch. Multiply patch. So we want to get our number that ranges from 0 to 1 to 0. 0. 2.4? So now the value ranges from... I add the value patch here. So currently when I touch the screen the value is 0, or negative 0. Negative 0. something. Then as I move towards the right side it moves towards 0.24. Okay? But this is not what we want, right? We want to get from negative 0.08 No, 0.08 to negative 0.16. So let's So we subtract A lot of patches, right? So we connect this here. Subtract it by What is it? Shit. 0.08 Then now we track the subtract to here. So now we get negative 0.08 to 0.16. Okay? We're still wrong. Because we wanted the negative of that, right? So we can either multiply again or now I should have subtracted another value. Okay, you know what? I'm just going to I'm going to do the same thing as just now. I'm just going to add another multiply patch, okay? Yeah, of course I can't do my math properly. Oh no. So we multiply my negative 1 Okay, great. So now we got 0.08 from here. Then now as we move to the right side, it's negative 0.16. Finally, okay? Then now we want to pack the values together. So just now we unpack the values, right? Now we want to pack it back. So we use the pack patch. Okay? Pack patch. No, pack patch. So the X value of the pack. And then we will create our cube parents position patch here. Then we connect it to here. Notice how now the cube parents position takes the value of the pack patch output. That's a mouthful. And now it's outside of our viewport back to 0.4. So we add a value patch and we put in 0.4. Oh no, we can just key in here. So now we should see it on the screen. So are you able to get this behaviour? Now the cube follows my cursor. Through my glorious math. Some good math right here. But the idea is that you map the values of the touch. The tap on the screen. To the values of the cube. But this still only works for the X axis. And the Y axis doesn't work. We could do the same thing for the Y axis. But I mean I'm not sure if you want me to bore you with that. You want to do the Y axis? Okay, I guess not. I guess it's a resounding no. But now you're in trace on your phone and see how it works. Like if you tap on the phone see if the cube follows your finger. It might not work because here I'm using the iPhone 8 as a device. So for you, you might have used an iPhone X or something. Then maybe your screen is bigger. But you'll get the idea that you map the values of the screen tap to the position. The X axis of the cube. Similarly you can do the same thing for the Y axis. Okay, next we're going to do something more special. Because our cube is kind of lame. It's static, right? So we want to add some animation to it. So we're going to right click we're going to use the loop animation patch. I hope you're still following. I know it's tough. But at least there's no coding, right? Okay, sorry. Okay, so we've got this loop animation patch here, right? And let's see what happens if we link it to our output here. So what we're going to do right now if you want to move the cube towards the guy, as if we are throwing the cube at him. We just want to modify the Z axis. Okay? So to do that, we want to use actually we had a value of 0.4 that's fixed, right? So we want to modify this value. So let's say I put in 0.5, 0.6. Now it moves towards the man. 0.9. If our initial value of 0.4 we want to add the value of the loop animation. So this loop animation, this value progress it ranges from 0 to 1 just loops around 0 to 1. So when we add this and we connect it to our patch, we can see that our cube is moving. Right? Wow, this is so cool, right? Ya, so you can modify the speed of it by using the multiply patch. Like I said earlier, the value changes from 0 to 1, right? So now you can make it from 0 to 1 to let's say 0 to 5. Then you can see the cube move faster. Wow! But we want to we don't want to let it like BA for its own. So we want to only fire when we tap the screen. So you notice how there's this tap output from the screen tap patch. We can drag it to the reset of the loop animation patch. Then whenever we tap the screen it will reset the loop animation. Wait, wait, did someone laugh? Ya, okay, Ken? It looks like we are frying some cubes. Ya, but it still loops. So we want it to fire and then not loop. And only execute when we press the screen. So how do you do this? You do this by doing more patch magic. Okay? So you can see that the value just keeps increasing, right? So let's create this if then else patch that allows us to implement some logic into our system. Okay? So the if then else patch requires a condition. So we will add a condition patch. Let's put greater than. Then we will take the value for multiply and we will put it into greater than. So if the value of if the value of the output of multiply is greater than, let's say, 3, then we will trigger this if then else condition. This if then else patch. And its output, we will then give it to the add. Okay? So if it's greater than 3, then we set the value to be like 9999. Okay? So when it's 9999, it's out of the screen. Alright? I understand so far? It's out of the screen. If it's not less than 3, if it's not greater than 3, then we just return it to its original value. So we take the output from multiply and we drag it to the else statement here. Okay? So now the output from multiply goes into 2 places, okay? It goes into the greater than patch and the if then else patch in the else statement. But it's still looping, right? Because our value still loops from 0 to 5. So let's increase this number like 100 something. It's too fast. I can't really see it. Okay? Let's place value at 100. And our loop animation is currently looping really quickly. So let's increase the duration to 100. So the value here will change from 0 to 100. 0 to 1 in 100 seconds. Okay? So now we can see that our cube behaves like we want it to behave. Okay? It's moving very slowly towards demand. Okay? So if we had done the y-axis part like, you know, change the position of the cube's y-axis according to our screen, then we will have be able to change the position of the cube more. Okay? I hope that y'all come up following. Okay, I think most of y'all are lost probably because this patch is kind of like a monster, right? Like you see. Ya, it's kind of a monster of a patch. Ya, so this was actually just to give you like a brief introduction to like what kind of logic that you can program into this application without any coding. Ya, so you can actually do coding in this system like you can write JavaScript. I mean I think it's quite cool to make this circuit-like diagram to Ya, it really works like a circuit like there's input like houses or you can consider it like I don't know. What do you call it? An input of voltage. Like, you know in circuits you got like the votes, right? Ya, it's like the electrons are like going through the circuit. So that's pretty cool. Ya. Okay. So maybe you can take like a short break. Ya, I'll go through more demonstrations. Because this one is like it's just fun, right? But it's not very useful in our lives. So I will go through more useful things in our lives. Okay? Maybe you can take like a 5-minute break. And you can come back at like 2.38. Then I will start slightly promptly at 2.38. Okay? Ya, then if you are still lost you can just raise your hand and then we'll get you up to scratch. You do have to follow this exactly, okay? This is just like a demonstration to show you like the different types of actions that we can use. So we have used unpack to unpack the data from 2D from the 2D vector. So we can manipulate the individual values. And now we can scale the values from for a specific range to 0 to 1. Then we can do some complicated math and then map the values to the screen. Okay? And get this kind of effect. Can? Y'all y'all want this thing? I can save this for y'all and then I can send it to y'all. Y'all want this? Okay, I'll just save it. Okay, I'll save it as I'll save it as throwing cube demo. Okay? Or shooting cube demo. Ah, whatever. Okay? I'll save this. Okay, ya, let's ya, guys, take a break. Just chill. If y'all got problems that can reach your hands, I will come by any problems? Lost? Very lost? Okay. I'll show you, it gets simpler. Ya. This is as bad as it gets. Ya. I don't even know what. If and else? How does that if else? Ya, so basically so the loop animation thing, it outputs a value from zero to one, correct? And it runs for one second currently. So what I did was I increased value to 100. So now it increases from zero to one in 100 seconds. Okay? So, I also multiply this by 100. So now the value that comes out from multiply is like one every second. So the first second is one. The second is two. The second is three. Oh, okay. Oh. Ya, so it outputs here. Ya. Then if the value that outputs here is greater than let's say 20, right? 20. 20. Then we will use so how do I put it? We assume that the bullet, the cube is out of the screen and we just want to like make it invisible so we don't want it to be so small and then like some good thing. So we just set it to be zero or set it to be like 99999. So this puts it out of the screen. So currently it's out of the screen, right? Otherwise we will use the original value of the output from multiply. Ya. Then now we get this effect of it flying towards the guy. Ya. So if I want it to go faster. Ya, then you just need to change the multiply. Ya, correct. Just increase the Ya, increase the multiply. Ya. It's just like it's just basically like circuits lah. It's just oh actually you know Ya, you made it this far. I'm quite impressed. No, we took quite a while to celebrate the thing. Oh. Ya. Alright. Sweet. Oh. What? What do you say? How do you celebrate this? Oh, okay. Um... The range right is the max you can go, right? Ya. So you get the values from the extreme end. Ya. Then you input in Then the multiply you determine by? Uh... Oh, multiply is determined by how far your cube needs to move. So let's say you put a cube. You can make the cube not move. Maybe you can break the loop animation. Break the loop animation part. Ya. So what's your cube? Is your cube moving? Ya, so if you physically move the cube yourself, right? I think you need to delete your cube's patch. Your cube's rotation your cube's position patch. Just delete this and you can move it around. Ya. So you try to move it onto your screen then you see what values you need. So you move it in the X axis. So now... Ya, so because your cube is not in the viewport in the first place, right? So it's a bit difficult. So you want to set it to be like 0, 0, 0 or something. Set its position to be 0, 0, 0. Oh, where is it now? Where is it? Oh, where is it? Where is the cube? Ya. But the idea is that you bring the cube move it to the left then you measure the distance. Basically you measure the distance, how much do you need to move the cube? Ya, correct. So you see on your inspector, right? Like what is the X value? Ya. So currently it's like so previously it was like maybe it's the value 0.1 is it? So minus 0.28 to 0.1 something like that. Correct? So that's a difference of like 0.38. Correct? So then you multiply? Because now you map the value of 0 to 1 to 0. This is the value, right? Ya, the value. So you multiply it by correct? It outputs 0 to 1 then you want to scale that 0.1 to 0.38. Ya, maybe I can draw like a nice maybe I'll explain it again. Just like a quick, quick one. Okay, before we move on to the next part, right? I wanted to like talk about what we're trying to do because maybe probably I wasn't very clear. I just did a lot of stuff. Ya. Ya, so we've got a screen, right? Then we had to cube. Then we wanted to measure what is the X value of the cube at this position and what is the X value of the cube at this position? Okay? Then we want to move it in between these two. So in my the first example the values were 0.08 negative 0.16 Okay? Then when I click on the screen, right? The values when I click on the left side like at this part was 80 if I remember correctly then I think it's 680 on the other side. So this one is the cube value and this is the touch value. Okay? You got it? So we want to map the touch value to the cube value. So the cube ranges from 0.08 to negative 0.16 We want to map it from 80 to 680. Correct? So we need the from-ring operator which maps this 680 to 680 to 0 and 1. Okay? Okay? Then now we want to scale this 0 to 1 the same width as the as this part Oh, my arrow is ugly. Okay? So the difference here is 0.24 Correct? So if we multiply this thing by 0 to by 0.24 then we get 0 to 0.24 then we scale it we minus 0.08 so it becomes negative 0.08 to 0.16 Then we multiply we multiply by negative 1 then we get 0.08 to negative 0.16 Ya, that was the quick map that I was doing in the patch editor Ya, sorry it was a bit difficult Ya, not a button not a button You want this? You want this? I don't Not sure if it's a button to your Okay, let's do more useful things because we are here to learn useful things Okay, so Back to my slides Back to my slides Ya, I want to show you this So you're on my Harry Potter, right? Then there's this like Serious Black and the animated newspaper and then if you see this video So this is by Harvard Business Review So what I did was that they created this augmented reality magazine So with the magazine's content you can use that as a marker and you can overlay some digital imagery So you can see Oh my goodness my computer is really like exploding Okay Ya, whoa, look at that Some cool stuff happening on the magazine Ya We're not going to be doing something we're not going to be doing so advanced things lah, okay But the underlying concepts are the same We're going to be overlaying a digital object onto an image that we can track Alright Let's do that Okay Let me get out Okay, let's get out So create a new project So scrap that Scrap that Scrap that confusion Stuff Very confusing things Then one thing that you might need to do is to edit properties Go to edit properties under project Then Where it says Select platform, uncheck Instagram The reason being is because the different platforms will allow and disallow different functionality So for this example we're going to be using the image tracking ability So we want to disable Instagram because Instagram doesn't have that feature yet So just for Facebook So we go to device Right click We can add this thing called fix target tracker Then you will get this static target tracker here Can Next we will Oh Oh, you can go to project Then you go to edit properties Then platforms Disable Instagram Ya Okay And next we want to add our image So we can go to click drum button Can go to static target tracker selector here Then we go to choose file Next to texture Choose file Then we're going to select the whole F3 FAP 119 KPEG Desan ah, desan This image Sorry, I didn't rename it Sorry I was feeling lazy Ya okay, let's import that that thing here Okay Oops Okay So y'all will have seen that your image will have been automatically imported into the assets at the bottom left Okay Ya, then you can see here how the image looks like So this image is actually taken during our hack and roll Ya One of our events Sorry Ya okay, so we're going to be overlaying some objects onto this this scene Okay Let's create another cube Let's create another cube, okay Okay Create another cube Primitive cube Okay So now we've got a primitive cube We just drag it back into our scene But now we drag it as a child of the static target tracker Alright You can add it as a child of the static target tracker Ya, again we want to scale it because it's so big My goodness Who will ever make this cube? Okay Now we make it look like this Okay Now you can see in our simulator our cube appears to be floating over the image, right? Wow Okay Let's test this on our device Okay Very simple ah We just have the target tracker and then we're just placing the cube as a child of the target tracker So now the cube will follow the behaviour of the target tracker Okay So we send to app Send to camera Send to Facebook camera Okay So once you all have have done that, right? Like exported your project You can go to you can either open your image on your computer and then use it as the tracking marker or you can go to hackandroll.nussectors.org Why website? I don't know I just feel like it Ya, then the image is actually at the bottom Ya So we are using this image as the tracking marker So if you open up the application that you have exported and point it at the screen you should be able to see the cube hovering over the screen You should be ah Let me try to I'll see if I can show it, demonstrate it here I'm not sure if it works Computer Do you manage to do it? Which step are you start at? Sir? X or T? Oh, okay I guess it's because the first time you import the image, right? It will compress the image Ya, so it's only the first time it will take quite long to export Ya, then subsequently it will be fine Ya Let me know when you all have when you are able to see the cube on the screen I'll just come around to and see Can? Are you okay? Huh? Whoa Are you okay? Are you okay? Are you okay? Ya, it looks fine as in you can move the cube potentially nearer to the panel Okay Ya But you can you open the website Oh, which side? Oh, sorry Actually, you can also open up the image So, you've got the image safe somewhere, right? Oh, ya Here, right? You can just open up the image and then you just scan the image Oh, okay Is it using that? Ya So, I just opened the image share Ya, ya, ya So, you export the so you put the cube over it Where's the cube? It's a bit after I... Huh? So, you put the cube in the Ya, put the cube as a child of the target tracker and now you see it there Ya Okay, let me Okay Is it? Is it cube? Okay, let's put it here in front of the cube in front of the plane and then just view this project Send here Ya, and then you just open the image on your computer Open the image Where's the... What is going on here? Ya, let's put it Oh, here, here Ya So, just point your camera at this image Oh Ya Ya Ya Ya, just put it Ya, just place it like near the image in front So, you can see it So, if you scan this image you should be able to see Hello Are you alright? Oh, just wait It takes quite long I guess because of the image I use quite high resolution Sorry Just Just wait for it Are you okay? Are you okay? Okay After I connect to the device Ya, so, have you placed the cube in front? Okay, it's there, right? Ya So, let's go to the folder Where you save the image Ya Ya Right click Right click this Then you open Reveal it Ya, reveal and find Then you open that image Ya, open it Open it Open it bigger, I guess Just Expand Like the green Ya, then you try to scan it I just look at it Ya, so you can see the cube So, when you move the camera Image Oh, okay So, it might be the same image Ya, ya, ya Are you able to do it? Ya You can track the Track the image Are you sure? Okay Oh, okay Oh, just right click on the device Then, you should see the Right click on device Then you should see Fix target tracker If it's disabled then you need to go to project Edit properties Ya, so what you should see is that your screen that has an image will have a cube appearing in front of the image Can You get that? You get that? Oh, still has something Okay, then I'll tell you all the reason why we're using such a big image I'm tempted to say no particular reason Ya, so precisely it's very complex So, the way it works is that we want to find an image that has enough features, unique points that we can use to track It's just a marker So, good images would be images that have a lot of corners that have a lot of sharp edges sharp corners Ya, QR code is a very good example because you have a lot of information and a lot of points that you can track Ya, so this image in particular was because there's a lot of information inside and the third cost is hack and roll I mean, you don't have to go to the hack and roll website You can just go to folder and open it Ya, anyone? Everyone's okay? Everyone okay? Ya, I hope that you have exported it eventually because it takes quite long I think, the first time you export Ya, I charge anyway you want Am I so happy plug it? Okay, I guess I'm I guess this is a not subtle hint Is it on? Ya, I managed to get it Ya, I managed to get it Ya, I'm afraid to generate mask That's so strange Maybe we can try to refresh this It shouldn't be like this I think it should be fine What is a mask? A mask is basically a way to segment portions of the image like hide like mask to cover Ya I'm not sure why they want to I'm not sure why they say it's feeling I feel that error You feel that error? Ya, we got the same error now Oh, different error Ya, same Oh, fail Okay Maybe we can try another device Or we can try on my device We can try on my phone Try your phone I think it has to be updated Ya, I can just send a link Sir, why do we have to project it over this image itself because we have the same image Ya, yes Ya, so you can use any image Ya, you can change it to your image of your family Then you can project like maybe a video over it Currently, we're just projecting a 3D cube So you can pretty much project anything you want, really Ya Are you okay? Ya, I managed to see the thing They showed up They appear? Ya, they're cute Ya, they're cute Okay While you are still struggling I will cover some of you are still struggling I will cover some of the more chill stuff So like I'm wondering how do I get more 3D models, right? So you can go to websites like poly.google.com where a bunch of creators have uploaded their wonderful creations for people to use But I think you're supposed to Like say, oh, I took this model from somewhere Ya So in particular for this demonstration I took some of the Pokemon from this guy called Tipatat I can't pronounce his last name Ya But I took some Pokemon from him Ya, so you can download them and then import them into your scene as opposed to just a boring cube because the cube is kind of lame, right? Or if you are more creative you can use your own 3D modeling software Like if you're familiar with Autodesk Rhino Sketch Sketch Lab I don't know, sketch something SketchUp Or you can use my favourite Paint 3D Okay lah My favourite Paint 3D Paint 3D Sorry guys My computer is a little slow today looking very hard Ya, so I hope that you all have successfully visualise the cube on the image I'm going to very briefly show you all how to make your own 3D stuff So if you're very artistically inclined, right? This will be your time to shine Okay So you can actually make 3D do those in Paint 3D Ya, this is super rudimentary 3D modeling software, okay So you can make like a line I guess my computer is hanging Not too good ah I guess this 3D modeling is too intense Not too intense What? Ya, but I get the idea you get to like draw 3D models I make an F because it's the start of my name Ya, can? Simple stuff, right? You can also insert cubes spheres cones, whatever Ya So actually if you look into the models folder, right? I actually spent one afternoon to make some useless 3D models Ya Ya, so you can see the one that's like named zero dash that's zero underscore F underscore H You can look at it You can open it up My computer is a little slow I have no idea why Sorry Technical difficulties 3D modeling is not easy Ya, and also running Spark AR is quite computational intensive, I think because we need to do the visualization of the 3D objects and stuff and also we are we have the very big image Ya, so I made this very nice very nice 3D object here There is like a Eh, what? Ya, I made this in pain 3D, okay Ya, so so it's like an F from one direction Then it's like a H in another direction You can see Ya, F and then H Ya, so I did this with every letter of my name and the word hackers So it's like F-R-A-N-C-I-S and hackers Hackers Ya, I did it for every one So if you open it up you can see You can see it here Ya So if I close this Sorry for my computer's slowness Hello Very slow Ya, so the idea is that I did the same thing I put my the 3D models on top of the image So this plane represents the image So if I take my phone and I spot the file and I scan the image I will see these seven ever birds in front of me Then if I look at it from one perspective I will see I will see Francis and from the other perspective I will see Hackers Ya, so it's something I did like in one afternoon Ya, using like pain 3D So don't let yourself be limited by your by your skill sets or self-aware Okay Ya If you want this file I can send it to you also then you can try it for yourself and I'm not sure why you will do it but sure Ya, so I've got all of the files here and go through with y'all So same thing I've got the target tracker here on the top left then I've got the same image whole F3Fab 119 and then I put all the efforts there Ya, so it's just basically rearranging and spending time perfecting it Ya Can? Ya, so this is just one example of how y'all can use this kind of image tracking I would really love to show y'all this in real life because it's really quite cool I can look at it Maybe later Ya, so this is just one example Okay Then we're going to go through the final demo Okay Final demo Okay, bear with me guys Bear with me I know y'all my thing like Wow, this guy is talking so much nonsense Partially true The last demo We're going to make use of the pokemons that we have Okay Oh my goodness My computer is really very slow I think I should close my tabs Okay Let's start again, okay So we're going to add our pokemons into our scene Let's just add Pikachu and Pikachu and Charmander We'll just use these two Okay Then Now instead of using the fixed target tracker We're going to be using the plain tracker Okay So the difference is that the fixed target tracker targets the image Now we want to target any arbitrary plane So, like I mentioned earlier this is termed markerless tracking So it just tracks an arbitrary plane It can be your table It can be your floor It can be anything really Okay So what we're going to do now is we want to move the Pikachu as a child of the plain tracker Wow, look at that Pikachu Oh, look at that Okay And if you can see in the viewport It's not very clear on the screen but there is this There is this a square of a cross Can you see? Can you see this one? A square of a cross So this square of a cross It represents the centre of the plain tracker So everything that is displayed is with respect to this plain tracker represented by this square So what we're going to do now is that we want to place our Pikachu nicely on top of this square so that when we detect a plane the Pikachu appears Okay Can you do that? Okay, let's try that Okay, so it's going to be a lot of eyeballing So So you can see here So you can change the viewpoint top left here View You can change it to different views So you might need to play around with it So one thing to note is that when we select the Pikachu please do not click the Pikachu from the viewport because you will probably select only a portion of the Pikachu and then when you move it the eyes or the tail will fly around I can show it to you Like it will fly See now the eyes are Ya, please do not dismember Pikachu So we want to select Pikachu as a whole As a whole So I can say earlier we're going to move Pikachu to the the square Let's move in to the square Is Pikachu a guy or a girl? I don't know And so I'm shifting the viewport so I can precisely position Pikachu over because it might look like he's over it but then nope, he's like slightly below So you might want to change the viewpoint a little Oh and we will need to wrap it around another object as we did previously and we will name it we will name it Pokemon Paran Okay Then we will move our Pikachu Underneath our Pokemon Paran Alright So the order of the hierarchy is Plane Tracker Pokemon Paran Pokemon Pikachu Can? Pokemon Paran is just a not object with its properties, transformation all set to the default So our Pokemon Pikachu seems to be sitting happily on our Plane Tracker Alright Do you have cotton here? I hope So you see in our simulator our Pikachu is facing the wrong way So we want to rotate the Pikachu Oh, I should have rotated first Okay, my mistake So we want to rotate the Pikachu 580 degrees So it's jumping around and we want to scale it down So let's scale it down by half 3.525 Okay Oh, and it seems like it's moved again from its position So I want to move it back to the Plane Troublesome So make sure that you're selecting the Pokemon Pikachu when you're doing this Then move it on top of the Plane Marker Target Plane Tracker Can? Y'all see this now? I'll give you a moment So to reiterate, right The Pokemon Paran It's Transformation values are all the default 000 111 000 Okay Then I just moved the Pokemon Pikachu Child Object onto the square with the plus which represents the Plane Tracker Can? And for mine is a bit off-center but I think it's still forgivable Still forgivable, right? Ya Okay So once we reach this stage we can do a project Okay, we can just test on our device Send it to our Facebook camera or your spark AR player and then you should see it appear on your keyboard or something Ya Let me send it to myself Okay, I will go around and convince y'all that it works Are y'all able to do it? Are y'all able to do it? What? Oh, no, object So you set all the values to be 000 111 000 Ya, just put all zero at the position Where's my Pikachu? Okay Okay Ya, then you position the Pikachu to be on top of the square Ya, so you want to rotate it first first rotate it like in the Y axis Y, put 180 Then the scale put 0.5, 0.5, 0.5 0.5 like in all three axis squeeze now Ya, then just just drag it to above the square Ya, you might want to change your view point because you might have some parallax error Okay Have y'all got it? It's somewhere, right? Does it exist? Mine is on his shoulder He detected Oh, ya Ya, it's there Ya, so the reason why it's there is because you didn't place your Pikachu over the marker properly or it's still hovering, right? So you kind of want to position it nicely So we want to create this apparent to wrap around the Pikachu So for later So we want to create a null object null object then we want to name it the parent I can rename it later but basically this one should go underneath but it's for later So now we want to reposition it to be on top Oh, ya Oh, no Oh, it came Connect Do you have a charger? Ya, but Ya, you can just try to follow along Do you need an extension cord? Ya, we have Ya Alright Are we doing okay, guys? Are we doing okay? Anyone need more extension cords? Thank you Anyone need more extension cords? Has everyone seen Pikachu? Does it look alright? Oh, coating Y'all manage to get it up Can? Can? Plain marker? Ya Sometimes it's sensitive sometimes it's not Ya, I mean it's like the limitation of the software It's like that Ya, but that's the general idea I guess you got it like roughly the correct position I think it should be fine Okay, ya, I can It's fine because it depends on it depends on whether or not it tracks it as a plane Ya, but try on the floor the floor should be fine Ya, floor Oh, then you try to restart application and point it at the floor Ya, but at least you got something on the screen, right? So it's okay, right? That's good Y'all managed to get it to Ya, we got it but Oh ya, just need to rotate it around Okay, so you don't want to modify the parent So, I want Y'all to Ya, so Ya, set it to 1 and change this all to 0 0? Ya, all to 0 And similarly, change the rotation to be 0 because we will need this for later Ya Ya, so for the actually itself we will we will change the scale make it smaller 2.5 2.5 Oh, oops 0.5 Then we will rotate it by 180 degrees Ya, so now it's facing the correct way but it's still position wrongly so we will just move it Ya, so it's still a bit wrong but we will just nicely So now it's on top of the marker Ya, okay? Ya, so that's that's how it is Ya, okay Looks Can I add? Okay Oh, sorry I hope that we are all okay We are all okay Ya Ya Oh, no Just right-click the plane tracker Now object Then just make the Pokemon Pikachu a child of it Ya Okay Okay, guys I'm going to like move a bit faster because running out of time everyone to make our Pikachu look good not look good I mean it looks good already I mean move Okay, so what we're going to do now is that we're going to oh, you might have found that your Pokemon or Pikachu is like off the screen right? It detects a plane but then it's like flying off somewhere So we want to be able to move it around on our plane So what we're going to do is that we're going to map the X and Y value of the finger press finger position, right? onto the X and Z value of the Pikachu's location on the plane Okay? So you can imagine like that this is the plane Pikachu is like like this, right? So we want to map the value of X and Y on our finger swipe to the position on the plane So this is like the X axis the Z axis and this is the Y axis Okay? We want to make the Pikachu move around on the plane Okay? Okay, so how do we do that? So first step is to get our favourite patch editor out Control alternate P if you're using Windows if you're using Mac Okay? So we're going to create you're going to use the screen pan object screen pan patch screen pan Okay? Screen pan? Screen pan Okay? Screen pan patch has like 3 outputs state 2D offset 2D position We're not too interested in the 2D position but also of the 2D offset which refers to how much we have swiped How much we have swiped moved around Okay? So we want to create more patches Okay? Let's do this fast game We're going to create the divide patch Divide Okay? Put it here Am I going to zoom Zoom in here Okay? Divide patch Then next we're going to have the unpack patch Then we're going to have the pack patch and last but not least we want to have the position patch of the Pokémon parent Okay Very important your Pokémon parent needs to be 000 in position 101 in scale and 000 in rotation So all of the modifications of your Pokémon it should be done as it should be done on the child of the Pokémon parent on the actual Pikachu itself Okay? Because what we're going to do is that we're going to be manipulating this Pokémon parent and moving it around which houses the Pikachu inside that will follow along Okay? We don't want to modify the actual values of Pikachu because we have we have taken a lot of time to position it in the correct place Right? So we don't want to ruin that Okay? So like I mentioned earlier we select Pokémon parent and we create a position patch Okay? Then we put it here So let's see what do we get out of the screen pan Okay? Like I said earlier we're going to be using the 2D offset to change our what they call it the type of the divide patch to be vector 2 because we'll be taking in 2 vectors 2 values Okay? We try try to position it nicely Then we connect the 2D offset the second the second output into divide Okay? And we'll divide it by 1000 Why? No particular reason Actually the reason is because from my experiment the screen pan when you move around it moves the Pikachu too fast and so we want to slow it down by dividing it by 1000 Okay? So similarly we change the unpack type to be vector 2 because we only have 2 values that are coming in Then now we got the x and y values You can see here So we want to map the x and y values to the x and z value of the position of the Pokémon parent Okay? So we map the x to x and y to z Okay? So the first output to the first input of pack second output of unpack to the third input of pack Okay? Then we connect it to the Pokémon parent's position Okay? We just made it this far Okay? So next we we want to try out this thing, right? So let's simulate touch Okay? You go onto simulator press the hamburger menu on the top right hand corner and press simulate touch Okay? Now that we simulate touch, right? We try to drag the Pikachu around So if you drag upwards you move forward into the plane So if I drag downwards then you move closer to me So you can see that our Pikachu moves Wow Wow Crazy stuff, right? Ya Crazy stuff Okay? And if you export this application, right? to your phone you should also see similar functionality Okay? Are you able to move the Pikachu now? Look at how much control you have over the Pikachu now Isn't it great? Okay So help Oh you press Are you in the correct mode? Simulate touch Drag it I think it's just your touch Can't drag No, can't drag Can't drag Because if I do I can drag Oh Ya, why? There's probably something wrong here It's pretty tight It's quite Is it 1,000? Ya It's both 1,000 Okay Why doesn't it work? Oh, does it need to be plugged into this? No, no, no Unpack This should be correct You try to try to move again You try to export it onto your phone Ya, I'll try that Last patch You press the Pokemon parent Okay Then you press Position Arrow, ya Ya Ya Ya, but your Pikachu say it wrong But it's okay, it's fine Okay So let me reiterate like how this patch circuit reads, okay It reads from left to right Screen pan I'm taking the 2D offset and I'm dividing the values by 1,000 on both the X and Y values Okay Then I'm unpacking the values so that I can take these 2 individual signals and re-arrange re-arrange them to however I want So I re-arrange them by passing it into the patch in the X and Z axis and then finally into the Pokemon parent Okay Then you can get this kind of behaviour Ya If you're using a Mac it might be difficult to drag Cannot Thumbs down to you Cannot? Cannot Maybe you can cross and start Why is yours not working? Did I do something wrong? It's under the plane tracker Ya Pokemon parent Ya It should be correct Wait, can I see? Ya, it should be alright Can you drag it further away? Ya, it's correct, it's connected, right? Why? Maybe you can just save and open again Okay Are you able to move the move it around? Cannot? Cannot? Oh, Cannot Oh, so it's out of the viewport, right? So you might want to reset your camera reset camera Then ah, it's there Ya Ya That's fine, right? Okay Then can you move it? Drag Ya Ya, we move upwards Ya, it looks about right I think it's small But in my mind, we'll explain later Okay, I need to continue Okay, so I hope that you all have managed to move the Pikachu a bit Okay, we'll next add more functionality Okay, so some of you all have my notice that your Pikachu is too small or too big So we want to be able to resize it So now we're going to add this screen pen a screen pinch patch Okay Screen pinch Again, it has this scale as output and everyone to map this scale to the scale of our Pokemon parent Okay So we create a pack patch again and we create the scale patch from the Pokemon parent Cannot? Cannot? So now we take the values from the scale and we put it into all three values on the pack patch and we output this value onto the Pokemon parent's 3D scale So if I could pinch on my computer it would work but I can't Yeah it still translates So if you expose it onto your phone you should be able to resize your Pokemon Okay Sorry that I cannot show that it works Just take my word on it Okay Okay Then lastly, right we want to add some functionality to rotate the Pikachu So next we're going to because some of your Pikachu are facing the wrong way, right? because y'all didn't rotate it at the start So now we will add screen rotate patch and we will create a pack patch again pack patch and then we will create the rotation patch Okay or a lot of patches Okay and because the y-axis faces up, right? So we want to rotate about this axis Okay, rotate about this axis So we will map the rotation value to the y-axis of the pack patch and then output it to the Pokemon parent's 3D rotation Okay Okay So if you build this project right now you'll find that you're unable to rotate it properly because it rotates in the opposite direction If you make it if you rotate it clockwise clockwise the Pokemon seems to rotate anticlockwise So we want to inverse this effect So we want to use multiply the multiply patch and we want to multiply this value by 1 by negative 1, sorry by negative 1 Okay So now it will be in the correct direction Okay Ya, so Okay, let's just take a breather here, okay Y'all can export this project and then try to see on the phone So now we should have complete control over Pokemon Pikachu Ideally Ya, it all goes right Ya, so To reiterate what we have just done we created basically 3 sub-circuit 3 3 circuits of patch circuit to add 3 different functionality to our project Okay The first one is to map the screen pan information into the 3D position of the Pokemon the screen pinch information into the size of the Pokemon and the screen rotate functionality to the rotation of the Pokemon Okay Are you able to manipulate your status or Pokemon? Are you all okay? Okay And then I'll come by I can show you how it's supposed to look like So you all can take some reference Are you okay? Is it moving? Ya Mine is like this You're smoking? Ya, same It's just same Okay, figure it out Oh The value? Ya, so Ya, correct We divide it by Oh, no, you don't need to connect this So we want to break this connection How to break it? No, no, no Just need to break it Break this connection Okay, break it, right Then we change it to 1,000 Ya, 1,000 Ya, 1,000 Ya, then it should be fine Ya Okay Ya, correct So now it just exist somewhere Because previously you might have Ya, added now object, right? Also this this one should be the position of the now object Now object, ya So position Ya, now object So I name this as the Pokemon parent Ya, so the Pikachu exist as sub-object I think it's okay lah Reset Ya, it's fine Ya, it's fine I just reset it Ya, just now we move to a lot Ya, so we might want to move your Pikachu a bit lower to the plane Now it looks like it's on the ground Ya, now we can move it around F, right Ya, so what I did was that I continue making more patches and add the functionality Ya, so maybe I will just repeat later Yes, you can do it Um I'll go to that later at the end Ya, what I can do Ya So, are you okay? Okay Ya Are you okay? Ya, so you can scale it down at the start Like you can scale the sub-object Apa-apa So, what I did I scaled my Pokemon down by half So, you scale So, because you're right to say that like all these values will control the Pokemon parent Ya, right So, you want to change the sub-values So, I mean you So, all the sub-values No, so I see that you didn't add the Pokemon parent So, for what I did in the demonstration is that I wrapped this thing as a Pokemon parent So, I I create like a null object Null object Then, I need miss as Pokemon parent that I put it as sub-object Then, null of this is my null object Can? Ya Y'all manage to get it to work Can move the thing around Okay, cool cool Okay, I I hope that y'all manage to get it working Get it working So, the last functionality that we're going to add right is the ability to switch between different Pokemon Ya, of course I mean Pikachu is like cute, right but then it's like you get bored of it after a while So, how do we do that? Okay, so currently we got two Pokemon, right so we want to switch between the two So, we want to maintain the functionality as per what we did previously but now we want to add in the Pokemon Charmander as a sub as a child of the Pokemon parent So, it exists as a same tier as the Pokemon Pikachu Can? So, this Charmander is a bit not in the right position So, we need to reposition the Charmander just like how we position it position the Pikachu just now Okay, so we rotate it maybe we can scale it by half so that it looks similar in size to the Pikachu then we can try to position it correctly I mean, yeah Okay So, it's roughly in the same position okay, that's fine, right? So, what we're going to do to switch between the two is that both of the Pokemon are going to coexist together under Pokemon parent but we're just going to make them visible one at a time Okay, so let's make the Charmander invisible by selecting Pokemon Charmander and then we select visible and then now it's gone Okay? So, we make the Pokemon Charmander invisible Alright? So, the next step we need to do is that we want to add the screen tab patch once again So, now we're going to use the screen tab to to to to change the Pokemon Okay? I think I try to zoom out a bit so y'all can refer to the upper parts Are y'all okay? You can see, right? You can see the upper parts If y'all need to refer to it Okay? So, we will map the screen tab to a counter So, this counter will store which Pokemon we are currently looking at Okay? So, we change the maximum count to be 2 because we have only 2 Pokemon but this number would be however number of Pokemon that we have Then next, we want to map the tab output from screen tab into increase Okay? Yeah, everyone to see that it increases nothing increase Okay? So, let's create a value a value patch to be able to see what's the output Okay? So, currently the value is 1 if I tap the screen now it's 0 now it's 1 I'm not sure you can see very, very faint here very faint but I take my word for it is 0, 1 0, 1 Alright? So, what's happening now is that the screen tab is basically creating a pulse whenever we touch the screen Okay? Then we map that pulse to the increase input on counter So, the counter patch will increment the counter whenever there's a pulse input Okay? And because our maximum count is 2 whenever it increases more than 1 it will look back to 0 because in computing we always start with index 0 So, when we say we have 2 elements actually element 0 and element 1 So, once the counter hits 2 then it goes back to element 0 Okay? So we're going to do more fancy fancy logic here So, we're going to use the equals exactly patch Okay? Alright? So, if the value of the counter equals exactly 0 then I will make the Pokemon Pikachu visible visibility true Okay? Can? Can? So, I reach to left to right counter will control will have a value that is compared against our number here 0 and if it's equal to 0 then it will be visible otherwise it won't be visible So, let's say I press a screen now, right? So, now the value in the counter is 1 1 is not equal to 0 Yes, no surprise there and now the Pokemon is not on the screen anymore Okay? So, 0 1 0 1 Great Okay? Next, Pokemon that we want to map So, we take the Pokemon Charmander and we do something similar we create a visibility patch for Charmander as well and then we will create an equals exactly patch as well Okay? So, now instead of being equals exactly to 0 we want it to be equals exactly to 1 because our values on the counter will be from 0 to 1 0 to 1 0 to 1 then we connect it to Pokemon Charmander and now we can see Charmander appearing when the counter's value is 1 So, this way we can switch between the Pokemons Okay? Then we can of course add in more Pokemons Can add in like Oh, what I do? Can add in Squirtle and Bubble Soul to join the gang Yup So, just drag them in show them in Then do the repositioning step again Where did it go? Ya, so you need to reposition the Squirtle again Okay? Something like that lah Don't wait to picky ah Okay? Then we can add the Squirtle Oh can add the Squirtle's visibility as another patch Then now we can create another patch equals exactly You guessed it 2 Okay? Then we will map the values as the input of equal exactly and then map the value to be here Okay, then now we need to increase the maximum count to be 3 So now the values of the counter change from 0, 1, 2 0, 1, 2, 0, 1, 2 So now we got 3 Pokemon Ya, so you can do this for like arbitrary number of Pokemons ah All of these Pokemons because they are a child of the Pokemon parent which we can manipulate using the screen screen pinchers and rotations and whatnot So they will all have the same functionality as the Pokemon Pikachu Can? So that's that's actually all there is to it for the workshop this like the angle Ya, so you can build your project and then you can play around with the Pokemon It doesn't it doesn't be Pokemon it can be any of your wonderful creations that you make in 3D pain or whatever software you are using Okay? Any questions at this point? It was kind of me just rambling actually Ya I need to find my slide somewhere now Let me find my slide Are you able to get the Pokemon out and moving and changing and I don't know what else So back to my good old slides They also need to refer to the patch circuit thingy Just refer slow ah Ya, so why did we do all of that nonsense with the Pokemon So I want to show you this video So this is an augmented reality application done by Ikea So they help you to visualise how your furniture will look like in your house So it's just similar to what we have done instead of putting a Pikachu just put a furniture Ya, and this one has like actual real world use right Ya, oh buffering Ya, so if you if you all have you all saw right like they did the rotation, scaling all within the application itself Ya, so that was what I wanted to like try to have your build to some degree Ya, so of course this is a very simple application because all you have is just a Pokemon itself but I think it is good enough to be able to demonstrate some of the ideas in augmented reality like for example tracking the plane and manipulating the objects Can? So coming to the end and so what's next So actually much of the content was based off the documentation by Spark AR so they've got some of the tutorials online and guides online Many of them include like how to make your own filters like Instagram filters so you can play around with those I will send you all this slide or a few slides because most of the pictures I took from the internet I don't think I can share with them if you all because you know copyright and stuff What's next Google call Google AR call with Unity So AR call is this developer kit that is by Google so that application you can build it you can build us in that SDK you can use with Unity or you can use with just general Android programming but that one is a lot more challenging than Spark AR I think using it with Unity is fine as well so in Unity itself you also will see a lot of the similar elements that you saw earlier with respect to like the inspector the viewport the key and the assets Maybe later I will show you how it looks like in Unity So Unity is what all of the company is used to create augmented reality experiences or virtual reality experiences So initially actually for this workshop I wanted to do everything in Unity but it takes quite some time to set up and also Google AR call is quite difficult to use with iOS and I cannot really predict what will happen on iOS so I just did Spark AR instead so I think that's easier for us Next is AR Foundation also similar to AR Call AR Foundation is this organization trying to consolidate all of these different SDKs like they're trying to be device agnostic so for example Android devices iOS devices should both be able to use AR Call at a higher level AR Foundation at a higher level and then they will do all the lower level stuff like mapping whatever you do in AR Foundation to AR Call and ARKit so it's supposed to be more universal and of course the next one is web VR basically web VR experiences that exist on the web so you can run them on your handphone and then put it into like this cardboard thingy and then you can view 360 degree experiences or you can have controllers and then manipulate the use them as input in the virtual environment so so all of these can be done on your more devices or your laptop I didn't go through any of those more challenging ones like interfacing with for example the HoloLens or the VR headsets like the HTC Vive or those because they all have their own different developer kits so this is just more for like us, our level you know beginner-friendly okay any questions I guess not yeah then that's about it so you can go to this link that link yeah for some feedback you can scan this QR code too sorry I mess up here yeah I can scan this QR code and give some feedback so that we can improve like what do you like about this workshop or what do you hate about this workshop maybe I talk too much nonsense maybe I talk too little nonsense maybe you want to have other demonstrations maybe you found it useless maybe you find pokemons propulsive maybe you I don't know I don't know yeah just feedback okay feedback can sorry I talk a lot of nonsense okay alright okay