14VUFORIA CONFIGURATION1. Once done generate license key, noticed the license name will be listed and click on theAR_testing license.2. Click on the license key and it will automatically copy the license.3. Go to Unity software, select ARCamera on Hierarchy Panel and on Inspector Panel,locate Vuforia Behaviour component and click Open Vuforia Engine Configurationbutton.4. Paste (Ctrl + V) the copied license key on the App License Key in Global tab.PAGE 44
1. Go to Vuforia Developer, click on Target Manager tab.2. Click on Generate Database button.3. Type AR_First for database name and click on Generate button.15VUFORIA DATABASEDatabase nameshould have nospacePAGE 45
4. Click AR_First database on the lists.5. Click on Add Target button.6. Set the following settings:a. Type: Imageb. File: Fish Marker.jpg (locate on Bahan Kursus > Marker Folder)c. Width: 100PAGE 46
10. Choose Unity Editor radio button and click on Download button.9. Click on Download Database button.8. Target will be added on the lists and tick on Target Name checkbox.7. Once done, click on Add button.PAGE 47
16IMPORT DATABASE1. Locate the downloaded database in your Downloads Folder (in computer).2. Double click onthe database and it will open unity software. Next, click on Importbutton.3. Click on ImageTarget on Hierarchy Panel. On Inspector panel, locate Image TargetBehaviour component. Set the following settings:a. Type: From DatabasePAGE 48
4. Clik on --- Empty --- at the Database field and choose AR_First.6. Click on y axis to make it to the top view.5. Automatically for Image Target, it will load the fishmarker.7. Double click on Image Target and you Scene Panel will show like this.PAGE 49
4. Terms of Service pop up box will appeared and click on Accept button.3. Click Emperor Angelfish and click Add to My Assets button.173D OBJECT IMAGE TARGET1. Click on Asset Store.2. You can find FREE 3D model in My Assets Store. Write fish on the search textbox.PAGE 50
5. Click on Open in Unity button.6. Click on Download button.6. Click on Import 1.0 to project button.6. Next, click on Import button. Locate the 3D object on the Project Panel > CGSoul >Emperor Angelfish > Prefab > EmperorAngelfish.The folder might bedifferent for thedownloaded asset.PAGE 51
9. Go to Edit > Rendering > Materials > Convert Selected Built-In Materials to URP.7. Drag and drop the Emperor Angelfish into image target on Hierarchy Panel.7. Your fish will look like this on the Scene Panel. This happen because the fish lost it ttextures. We need to reapply it again.8. On Hierarchy Panel, Locate CGSoul > Emperor Angelfish > Art > Materials. Selectall items in the Materials folder.PAGE 52
10. On Scene Panel, your fish will look like this. It will have the color and textures.11. On the Hierarchy panel, click on AR Camera.12. On Inspector panel, set the following settings for Transform component:a. Rotation X: 90b. Position Y: 16013. Locate orientation and click on arrow below the Z axis.9. Next, click on Proceed button.PAGE 53
15. Take a look at Scene panel and Game Panel. You will notice that the AR Camera14. The fish model will be added on top of the marker. Click on Fish 3D model and onInspector panel set the following setting for Transform component:a. Position X: 14, Y: 18, -12b. Rotation X: 450c. Scale X, Y, Z: 20will be placed above the marker.PAGE 54
16. Save your file (Ctrl+S). Then, we can test our AR page and click on Play button.17. Hover the marker to the webcam on your computer.18. If you noticed, when the marker is out of the camera, the fish 3D model still intacton screen. We do not want the fish to be on the screen if there is no marker detected.19. On Hierarchy panel, click on AR Camera. On the Inspector panel, locate VuforiaBehaviour component and click on open Vuforia Engine Configuration button.PAGE 55
21. Test again your AR page and you will noticed when the marker is out of the camera,the fish 3D model also will disappear from the screen.20. Scroll down and find Device Tracker. Untick the Track Device Pose. This is tomake sure when the Image Marker is outof camera, the object will be destroyed.PAGE 56
1. On Hierarchy panel, click on to add Canvas. Choose UI > Canvas.18CLOSE BUTTON UI2. Right click on Canvas. Go to UI > Button - TextMes.hPro. Rename it to Close btn.4. Expand the Close btn by clicking a small arrow beside it and select Text(Mesh) andpress delete on your keyboard.PAGE 57
7. Click on icon on Scene Panel. Then, you can move your back button tothe position of top left corner of the canvas.5. Click on Close Btn. Drag and drop back_icon.png in the Assets > Image Folder intoSource Image. Then, click Set Native Size button.6. Set Width and Height in the Rect Transform component on Inspector panel.a. Width: 34b. Height: 34PAGE 58
9. On Hierarchy Panel, click on and choose Create Empty.8.Move the anchor to match with the back button.10. GameObject will be in the lists. Rename it to menu.11. Go to File > Save (Ctrl + S).12. On the Unity Editor, drag and drop the menu C# Script into the menu. Noticed thatMenu (Script) component will be listed on the Inspector panel.PAGE 59
13. Select Close btn on Hierarchy panel. On the Inspector panel, click on the Buttoncomponent.14. Automatically below screenshot will be generated.15. Drag and drop menu GameObject to the None (Object) box.16. Click on No Function > menu > GoToHome( ).PAGE 60
17. Click on the Play button to test the close button.19. Go to File > Save (Ctrl + S).18. Click on back button on Game Panel and see if it redirects to the main page scene.PAGE 61
2. Right click on the ImageTarget. Choose 3D object > Text – TextMeshPro.19TEXT 3D OBJECT1. Click on icon on Scene Panel. To change from 2D to 3D.3. On the scene panel, go to orientation, click on Y axis.PAGE 62
6. On inspector panel again, locate Rect Transfrom for Text(TMP). Change thea.b.c.following details:Pos Y: 30Pos Z: 26Width: 335. Click on Text(TMP). On Inspector panel, go to TextMeshPro - Text component.Type Emperor Angel Fish and choose Vertex Color to black.4. It will become like this.d.e.Height: 5Rotation X: 90PAGE 63
20PANEL2. Take a look at Game Panel, a button will appear on the canvas.1. Right click on ImageTarget again, choosethe button to info btn.UI > Button – TextMeshPro. RenamePAGE 64
5.4. Right click on Canvas inside Image Target, choose UI > Panel.Resize the panel and don’t forget to move the anchor as well. It should looks likethis. (Try it yourself)3. Style your button to Information button. It should look like this and the position atbottom. (Try it yourself)UI > Panel.PAGE 65
7. Edit the Text and Button to look like this.6. Right click on Panel, add UI > Text - TextMeshPro and UI > Button - TextMeshPro.Rename both GameObject to suitable name and delete Text inside button.8. On Hierarchy panel, click the Close Button in panel component, then on inspectorpanel, scroll down to locate On Click ( ) component. Click + and Drag and dropPanel into the object slot and set No Function to GameObject > SetActive(bool).PAGE 66
11. Click on10. On Hierarchy panel, click the Info Btn in panel component, then on inspector panelscroll down to locate On Click ( ) component. Click + and Drag and drop Panel9. Click on Panel. On Inspector panel, the checkbox.to test. Don’t forget to save your project. Save (Ctrl + s).Then tick the checkbox.Play Buttonuntickinto the object slot and set No Function to GameObject > SetActive(bool).PAGE 67
21VIDEO IMAGE TARGET1.Create new Image Target. You need to add the image target in the Vuforia Databasefirst – Refer 15 VUFORIA DATABASE (step 4 - step 10) and 16 IMPORTDATABASE (step 1 - step 2).2. On hierarchy panel, click then, go to Vuforia Engine > Image Target.PAGE 68
3. Click on ImageTarget on Hierarchy Panel. On Inspector panel, locate Image TargetBehaviour component. Set the following settings:a. Type: From Database4. Clik on --- Empty --- at the Database field and choose AR_First.5. Automatically for Image Target, it will load the videomarker.6. Right click on new Image Target, choose 3D Object > Plane.7. Click on icon on Scene Panel. To change from 2D to 3D.PAGE 69
8.plane. The plane must be on top of the image target, it will look like this.Resize and move the plane to fit on top of the Image Target. This will be our video9. Click on Plane, ona. Rotation Y : 1806. Find the video that you wanted to import., change the following:the video intoFolder in Assets.Inspector PanelDrag and drop the ImagePAGE 70
8.7. Right click on Plane, then chooseOn inspector panel, locate Video Player component. Drag and drop the Video intothe Video Clip slot . Checked on the Loop.Video > Video Player.PAGE 71
11. Click Play button to test. If you noticed,there will be audio on without it track themarker. If the video is upside down, youmay modify the position and keep ontesting to make sure it will be in correctposition.13.12. Click on Video Image Target. LocateDrag and drop Video Player into the object slot.Default Observer Event,ObserverEvent, OnTargetFound(), click on + button.in Default10.9. Change theDrag and drop plane GameObject intoRender Mode from Render Texture to Material Override.Renderer.PAGE 72
15.16.14. Click on17. Click on, go to, go to,LocateVideo Player into object slot., click on18.Click on Play Button to test the video. It should be Play when it found the markerand stop once the marker is out of camera.Drag and dropNo FunctionNo FunctionIn Default Observer EventVideo Player > Play ( ).On target Lost( )Video Player > Pause ( ).+ button.PAGE 73
19. Go to File > Build Profiles.20. Click Open Scene List button.21. Click Add Open Scenes button.22. Two scene had been added into the Scene List.23. Make sure the mainpage is set to 0. This is because when launching the application,it will launch the 0 first. If you set the ARpage to 0, it means this page will be launchedfirst.PAGE 74
22ANDROID PACKAGE KIT (APK)1. Click on button.2. On Player, set the following settings:a. Company Name: Any name you like.b. Default Icon: Drag and drop icon.png on Image Folder in UnityPlayer SettingsPAGE 75
3. Click on , scroll down to. Untick ALL except4. Click on Other Settings tab, scroll downto Identification and Configurationand change the following:a. Identification > Package Name:Any name you like but follow the format(com.Company.ProductName).b. Configuration > Application Entry Point: Untick GameActivity, TickActivityResolution and Presentation tabfor Auto RotationAllowed OrientationsPORTRAIT.5. [OPTIONAL] If you want to add your logo at the splash screen, you can go toSplash Image tab.PAGE 76
7. On , click on Build button.6. Now you are done setting up for APK publishing and close the Player Settingswindow.Build Profile13.Wait until the build is done.12. Build Android window will pop up. You can change the location if you want to. Then,give your apk a name and click on save button.14. FishAR.apk successfully being build. Congratulations!15. To test your apk in android device, connect your android devices on computer.PAGE 77
16. Double click on your phone icon on computer.17. Open up folder and find Download folder and place your apk in here.18. Go to your android phone, locate the apk and install it on your phone.PAGE 78
ADDING MORE IMAGE TARGET1. You can find in My Assets Store.2. You need to add new marker inside the Vuforia and import it into unity.3. The Second Image Target will look like this. (Depending on your 3D model)FREE3D model23EXERCISEScan here to get themarker.PAGE 79
1. You can add the rest of the UI Image byfollowing this UI below.CREATE HOMEPAGEScan here to get thematerial.2. You can add this code in your script to open url link.3. Attach the code into menu gameobject and then drag it to the button.Click No Function, go to menu > OpenUrl(string).PAGE 80
SCANMARKERAR MarkerPAGE 81
SCANMARKERAR MarkerPAGE 82
Scan for Step-by-StepVideo GuideVIDEO GUIDEPAGE 83
REFERENCESChoudhary, Y. (2023). Augmented Reality in Education. International Journal for Research inApplied Science and Engineering Technology.Jiang, S., Tatar, C., Huang, X., Sung, S. H., & Xie, C. (2021). Augmented Reality in ScienceLaboratories: Investigating High School Students’ Navigation Patterns and Their Effects onLearning Performance. Journal of Educational Computing Research, 60(3), 777-803.Korre, D., & Sherlock, A. (2023). Augmented reality in higher education: A case study inmedical education. 9th International Conference of the Immersive Learning Research Network(iLRN2023), Practitioner Proceedings.Lee, T., & Höllerer, T. (2007). Handy AR: Markerless Inspection of Augmented Reality ObjectsUsing Fingertip Tracking. International Symposium on Wearable Computers, 1–8.https://doi.org/10.1109/ISWC.2007.4373785Nasikhin, Murtadho, A., Syukur, F., Escuela Superior de Cómputo, Roya, A., & Hasan, Z.(2023). Development of augmented reality in Islamic religious education learning: Case studyin Islamic boarding school-based schools. At-Turats, 17(1), 91–105.PAGE 84
AUGMENTED Reality