 So, in my last video on Godot, we did where we spun around the outside of an object. Really, it was just a series of still frames. This time, we're going to be using a photo sphere, much like a Google Street View. So you would take it like this and you can move around like that. I'm sure you guys can see that right. You'll get a closer look in a moment. To do this, you're going to need a 360-sphere image. You can find these online or you can take your own, either with a regular camera and stitching them together. There's software to do that. I've done videos on that. Then there's also, if you have a cell phone, there's programs where you can just take a whole bunch of pictures and it automatically stitches together. Or you can get a camera that does 360-sphere sphere photos. So let's go ahead. It's actually really, really simple. The setup's simple. I'm going to go over the code. You can download this project off of GitLab. But the basic setup is this. You put a 3D sphere. You wrap the texture around it. You put a camera in the middle and you move the camera around. That's about it. You put a button so you can switch images in this. It's not very long of code. So let's jump right in. So again, there'll be a link in the description of this video to the project on GitLab. But my GitLab is gitlab.com forward slash metalx1000. The project is Photosphere in Godot. When you download this project, it will look like this. You'll have license information. It's under a GPL license. And then under the source folder here, you'll have your Godot project. Open that up in Godot. And you will see this. I've loaded up three different images I've personally taken. But again, you can replace these with any images. Our scene is very, very simple. It's a 3D scene. And if I uncheck this, you can see there's a sphere. Inside the sphere is a camera. That's pretty much all you need is a sphere with the texture on it and a 3D camera. Now I also have a button that will allow us to change, go to the next image and loop around the images. And I also have a label, but that's just for troubleshooting when I was doing the calculations. The movement of the camera here, I eyeballed it all. And it could probably be tweaked a little bit better. Especially I was trying to get some accelerometer or other sensors going. And I got it working, but it didn't quite feel right. So I've disabled that for the time being. But you can play around with that. But let's go ahead and just look at the source code. Again, it's not very long. Just over 100 lines, including spaces. So here, this is just the type of scene it is. We got our sphere here. I'm sorry, our 3D scene with the sphere. We have our objects here. I've created variables for them. Each one, they say Unready. That means it waits for the scene to load, because we have to wait from the load to grab these things. And then I'm just creating a variable for the camera, the sphere, the label, and the button. Next I have here the list of all three images. If you look at our project over here, I have sphere.jpg, sphere underscore 2, sphere underscore 3.jpg. That's what these are here. If you're going to really use this code, I'm trying to keep this code simple for the tutorial. Really, you probably want to create a function, put all your sphere photos inside a folder, and have that code, that function, check that folder for all files. That way you don't have to modify the code if you add or remove images. It will just check what's in that folder. But to keep things simple, I just created a simple array here. Next we're going to have a variable called photo number. That's the photo we're currently on. That way we know what photo we're on, and we can loop back around to the beginning. And then last x and y. That's going to be the last position you had your mouse cursor at, or your touchscreen at. And that's going to update regularly so we know how much to move the camera. We have our main process here, which is going to constantly check keyboard inputs, and also check the alignment of our buttons. Let's have a quick look at that. So again, if we look here, our 2D scene, we have a button that says Next Image. But it falls up in the top left. I want it in the bottom right, but it's going to change based on the size of your screen. And that's what our function here does. If we scroll down to a line button, what it's going to do is it's going to get the size of our screen, both x and y. Then it's going to subtract the size of the button, both x and y. And that will give us the position we want to place the camera, or the button. And so then we just place the button at that spot. So that's all we're doing is getting the size of the button, the size of the screen, using those calculations to move the button where it is. And we're checking that every time the game loops, the program loops, so that if you change the size of your window or if you're on a device that you can rotate from portrait to landscape, it will automatically move that button to the right spot constantly. Here we're doing loading the image as a material. So we're creating new material, setting the properties for that, and applying it to our sphere. When do we do that? Well, we do that in a second. Load. Load right here. So when you press a button, it's going to load the image. There's already one on there by default in our scene that I've added. But when you press the button, it's going to update that. What it's going to do here, every time you press the button, it is going to say, OK, add one to the current number of images. So we started at zero. That's the first in the array. And then we're going to say, OK, at any point, if that number is greater than the number of items in that array, go back to zero, which is the first one. Otherwise, we're going to take that image. We're going to get that image from the array. And we're going to load that, calling that function we just did, load image. And we're going to load that resource, that image, as a JPEG. So in the array, I didn't put the .jpeg. I'm doing that here in the function. Again, all depends on how you search for those images. And we're just manually embedding them here. So we have three different inputs. We can do mouse, keyboard, and touch screen. And you know what? Let's go ahead and run this program so you can see what it looks like. This is what it looks like. I can drag with my mouse and look around all the way up and down. I can click Next Image, drag all the way up and down. If you notice, as I'm spinning like this one, for example, it feels like the camera's kind of going up and down, not going straight around. That's not the program. I didn't have the camera straight when I took these pictures, because it's just on a little tripod. So keep that in mind if you're taking these sphere photos. If you're using something like your phone, it's probably going to auto level it. But if you're using a sphere camera, if it's not level, it's going to be a little wonky as you're turning it. Also, you'll notice in some examples like this, if you look at the sky where it's a lot of solid color, you can see the sphere here. Probably could tweak the textures a little bit or add more resolution to that sphere to get rid of that. But I think it's good enough. Again, there's a lot in this that could be tweaked. We can go to the third image. There's me and my wife. And click again. We'll go back to the first image. And I can also use my keyboard here. And then if I had a touchscreen on my computer, then I could also use that. So let's look at the code for those inputs. So we have our input. So this detects anytime there is an input. And we're going to check the touchscreen and send the event to that. Touchscreen, is it a drag event? If so, get the relative x as long as it's not zero. Then we're going to do some math. And again, this is what I eyeball. I'm getting how much the location, the relative location of the touch. And then I divide it by five because it felt like it was moving way too fast originally. This label update here, again, this is I have the label hidden. But if you're curious about the numbers that are being calculated, so you could tweak this a little bit better, you would basically show that, unhide that, and you'll see on the screen up there at the top. It says this is a test. If the touchscreen was enabled, you would see updates on those numbers so you can see exactly how they're being calculated out. Again, that's just for troubleshooting. And then we're going to send, we're going to update that movement. We'll look at our update function in a moment. For mouse, we're doing the same thing. We're saying, OK, is this action? The mouse clicked. And then we're going to get the last position. We're going to set that with the event position. And we're also going to hide the mouse here because we don't want to see it. And then here, we're going to say, OK, if the mouse was just released, we're going to make the mouse visible. If the action is press the mouse, it's clicked. OK, this is where we're going to calculate out the movements. Again, here, I'm doing some math, divide it out. Otherwise, it would move too fast. And then we're going to update that. And then also, we can zoom in and out by scrolling. So we're going to adjust the camera focal length. So I'm going to hit F5 here to start a game. If I scroll, I can scroll in. And I can scroll out. Now, I did not set any limits in my code. You can. So if I scroll all the way out here, it's going to start to look a little funky until you're basically looking from outside this here, even though you're still inside this here. That's why it's all distorted. But again, you can put clamps on this. I just did not. So we have our mouse. We have our touch screen. And here, I have sensor check. This is for trying, I was trying to play around with the accelerometer and other sensors. And I got it working, but it just didn't feel right. Again, I'm eyeballing all the math. So if I was to turn all the way around, it may have only gone three quarters of the way around. And it just felt kind of weird. So for right now, I disabled that. If you want to re-enable that, you just uncomment this line. And then you can use those sensors on something like a phone, and you can play around with it. And maybe you can get it working better than I can. But that's what this function is doing. Again, I have the label here. If you unhide that, you'll get those numbers. It might help you tweak it a little bit more. Here, we're doing the keyboard input, keyboard controls. We've got left, right, up and down. We're using what is set in our Godot project for left, right, up and down. So I have the arrows, but you can assign other keys as well. And basically it's gonna keep looping, and it's going to basically determine, did you press left or right? That's what this does here, up and down. And then it'll send to that same update. So all of our inputs, whether it's mouse, touchscreen, you know, other sensors, keyboard, they're all gonna call this update function, which basically takes the camera and rotates it. And then we have delta here, so that it's consistent on all machines. And we also have a clamp. The clamp, what that does is if I go up, it's gonna stop. It's not gonna keep on rotating. Otherwise, the camera would eventually go upside down. Same with going down. So basically it's just making sure you don't go past that top and bottom point, and the camera's upside down. That's what the clamp does. I think we've gone over the entire code. Again, the link is in the description. You can download this and you can export for all your different systems, HTML5, and also Android devices. So again, you can use a camera like this. If you do, make sure it's level. Lots of times I just place it down somewhere and it may not necessarily be level, but if you don't, then the camera might be a little wonky. If you're using your phone or a camera, the software you're using that stitches the images together can help level that out. But let's go ahead and look at it on a phone. And there we go. I can drag the image around. Again, you can adjust the speed of this. Originally I had it going a little faster. Recently slowed it down because it just felt like it was going too fast. Move all around. Bottom right corner, there's a button here. We can click that will load the next image. Might take a few seconds to ping on the resolution of the image and your phone. If I turn it like this, the button automatically stays in the bottom right corner because it's constantly checking that function and moving the button into position. And of course you can re-enable the sensors so you can move it around like this and have it move the image around to your liking. I hope that you enjoyed this video. I hope that you found it fun and useful. Check out again, the code in the description of this video on GitLab, download it, replace it with your images and maybe improve upon it a little bit. Again, there I mentioned some improvements that could be made. And I thank you for watching. Visit FilmsByChris.com, that's Chris Decay. I'll link to that in the description as well. If you like this video and want to see more, be sure to like, share, subscribe, comment. I also have a Patreon page, link in the description. Have a great day.