 Good morning everyone who we I'm glad to be here with you to talk about how to build Immersive experiences for the metaverse with WordPress. This is not a click-bite title. This is true And as she said, I'm Javier Salinas. I was born in the Canary Islands in Tenerife Spain I've been working as photographer videographer Web designer and graphic designer and for the last years in virtual reality applied to educational sector in 2008 As a web designer used to work with flash. I think many of you know what flash was It was a many amazing tool for designing websites, but it has a problem It was very difficult to update the sites You have to unpack all the site and make the changes and upload it again So then I discovered the WordPress and I have been working with WordPress since then So the metaverse I have a question. How many of you have played with virtual reality glasses? a few Only a few Well the metaverse I have a bad news the metaverse today is nothing But marketing sorry marketing campaign Well, I say that what you see here is the search volume for the keyword metaverse in 2021 Before 2021 nobody was talking about that then in 2021 social media company changed its name So the interest Crisis and then in 2022 The NFTs came to to life and then in 2023 the IA came to life So the interest of the metaverse is going down Maybe the last week is going up again But today the problem is that many companies has spent a lot of money creating worlds or metaverses their own metaverses But worlds for brands and for companies and not for people But I have also good news The metaverse is a fictitious virtual world or a collective and shared virtual space This definition was written by Neil Stevenson science fiction writer in his novel snow crash from 1992 So the metaverse today It doesn't exist, but it's a Long-term project. We are starting now to to write this path The futures of the metaverse metaverse is single Many people talks about several metaverses, but this is not right. The metaverse is only one. It's like the internet We know today The metaverse is universal. We can access from everywhere every time like the internet We know today, but the third one is the game changing. It's immersive if you have played With virtually glasses the sensation of immersive Inversive website Is unique? So we have to change our mind. We have to start to think 3d spatial websites spatial computing is a term we just recently heard and We have to change from 2d to 2 3d the space We have to break the two axes of our screens We have the x-axis and the y-axis and we have to think in a third one. It's the see the axis We have to change from shapes to form. It's a very different way of Thinking how to design and build websites So how can we make WordPress immersive? This is the the main question And as I have been working with virtual reality, I have the idea to mix some technologies some languages and to start to to to to design 3d Websites and many of you may know a frame is an open source library 3.js basic framework for building immersive web experiences. It has a couple of years But it's very interesting because with a very few lines of code we can do 3d websites, but it has a problem the same problem that flash had in Those days it's very difficult to update the site because it's pure code. You have to edit the code and Abelod it again. So It is very simple as you see here We have a library main library and script and then we Open attack a scene and inside this thing. We put our content. Okay. This is a basic thing You can see in 3d space, but this is Immersive this this is in okay, so I started to think that it has some Similities with WordPress for example in WordPress. We have the themes and plugins and In a frame we have the libraries. This adds our extra functionalities In WordPress, we have the post and the pages and in a frame. We have the scenes This is the publication type and in WordPress in Gutenberg We have the blocks and in a frame. We have entities that is our content. Okay, so We can combine the power of a frame with the flexibility of the word for CMS to design and build immersive websites So let's make an experiment. This is only idea is a moonshot is Hope and inspiration for the future, but it's also opportunity for designers and for developers and for WordPress To build this future So the first thing we have to do is to add this functionality this a frame functionalities We have to insert the less the summation of our e-frame library in the header of our site How can we do that with a simple function? Here you have for the first line of a plugin. I'm writing from weeks ago And my first attempt was a theme, but I think that plugin is a better approach for that So we load the library in our header with this simple function The second thing we have to do is to create a custom post type. I have to I have tried to To do this this we have to to name the the custom post type scene You have to be compatible with Gutenberg We have to add the this tag at the beginning of the our content again We use a function to do that simple function to add our tag In the content, so we have the opening tag then the content and the closing tag pretty simple And the third the third thing we have to do is to add the content elements We can use our custom plugins. I have tried and I failed because it's very tricky You may know to have custom plugins, but there are a lot of plugins in the in the plugins repository to do that We have to create our own elements our own entities For inserting as content. Okay We have all these entities in a frame. We have of course shapes like boxes cycles spheres Cylinders we also have 3d models We have cameras. We have flights and all these elements We can use them to build our scenes How can we search our content in our scene? For example here? We have a E-box an entity called box you have all these attributes for this element Okay, and this will be the code to to insert it We have a custom block. I'm adding here in this example only free attributes position rotation and color Position and rotation are coordinates. Okay to our x-axis y-axis and sit axis And the color is a simple color picker The resulting code is like many short codes in WordPress So we have our first entity our first content type After creating custom blocks, we can add more we can have cylinders as we saw before We can add the spheres. We can add planes. So we have this basic a certain again, but with our new system We can also add accurate tangular images for making skies We can do we can add a video Video sources and we can have the lights to lighting our scene every Each of these elements have its own properties. Okay lights for examples as a rotation at the color the intensity We can upload a 3d models. I have said But we have to use a filter because WordPress doesn't allow to Upload 3d models to the media gallery, but again with a simple function We can tell WordPress to allow us to upload these models To the models we can add shadows reflections and rotations with simple coordinates simple tags we can Edit our our models and customize it And of course we can add motion controls. You may know that virtual reality headsets as a motion control for for hand tracking and of course for interact with the environment because it is not a Dead environment. We have it to be interactively, okay And I will go to my editor will look like this We have the left the list of elements and at the right We have our custom elements with its own properties It's pretty simple to edit it safe again, and we have our site updated We have sold the problem that we had before with a frame We are using the WordPress database to store all this information to update it and then to paint on the front page But combining all those elements is possible to will match more complex scene You may know that in adding 3d models or editing lightnings cameras. We can Will this these words? In 2021 from work with Spain WordPress Spain we did that work come Late night show it was a life-streaming program and I could Work there making a 3d Scenario And I had the idea to Replicate this with this that that scenario with this This method and what you see here This is a workplace page This is made everything with that method as you see we have floor We have lights we have 3d models the sofa. We have a video source and this is in is interactive The media gallery will look like this We have all these 3d elements uploaded we can edit them we can swap them we can change upload the new new and The Gutenberg editor will look like this We have the list of elements and at the right. We have all our elements that we can combine as we like I should Have the opportunity to have a to do a live demo. It has not been possible but it works also for bookomers and Last month I did a test for a 3d e-commerce shop where you have the 3d products You can touch them. You can add them to the Card you know of course buy them and with the glasses is really impressive because of the immersion and I think Maybe in 10 years It's very difficult to say but 3d webs and will be more common than today So we have to keep an eye on this and I hope you You can try and Be success. Thank you very much. If you have any questions That was really only caught me off guard Thank you. Thank you. All right We have any questions to start off right here William got a mic Where's the microphone the mic is coming? I just want to say good presentation. My question is related to What are your views on how the metaverse is actually going to affect the changes of web development for work camp? conferences and WordPress itself Because I'm in a similar field like you are creating Metaverse sites for work camp conferences itself and I find that there isn't I Think like a seriousness to it or it really taken off now Because of that. It's very difficult to say in their positive. There are some plugins for 3d There are first attempts to do things with WordPress. I do not really what it's going to be in In some years, but I think it's a good opportunity because WordPress is spread all over the world over the internet and I think the metaverse really is an evolution of the internet how we know today so We have to be there we have to We have to Read we have to test things we have to talk to each other We have to see what other people is making for example if you know Mozilla hub They have a couple of impressive 3d web demos You have to look that is amazing what these people is doing and of course we have today a problem It's a bandwidth. It's very short Stretch but maybe in the future this will be not a problem. So it's really difficult, but we have to be there I'm sure it's going to be serious Not for all things, but I'm sure that for working for studying Have a lot of potential Thank you. I connected with you on Twitter. I sent your message on Twitter. Oh, yeah Thank you Next question. Hello. Hello. Thank you very much Will you be able to manipulate with three gs functions everything of this or is it a different You didn't load the three gs. You have to load it. It's it's codependent. Is there a dependency? I know there are some plugins for the team three models, but yeah, the model you have to upload it as it is maybe we can do a Trick for changing textures for example or changing shadings I have to try that but Now you have to upload the model as it is but you can upload the model as it is and then with the lightning for example Everything changes. So you can move it. You can scale it You can do a lot of things, but yeah the models you have to upload So three gs doesn't have to be loaded. Is it on the same library? But because you showed only one JavaScript Is everything inside? Yeah, you upload a you upload the 3d models as images No, no, I mean The library showed for the A. Oh, yeah, the library is only one line. That's that. Yes. Yes. No, just that. Wow That's good. Yeah was like This is gonna be work. This is not going to be work to work, but yes, it works It's only one line if you get into the a-frame code. It's a Huge library But from WordPress only with this line on the header you have all the functionalities of a-frame and it's curious because Even you have one thing or another. It paints the 3d web In front of what you have in WordPress. It's very curious Yes, this is impressive and only with the attacks. Yeah, because 3ds is actually really huge There's so much to do with it I have a lot of free information. Yeah, there's a lot of to do. Yes. Thank you. Thank you Any other questions? Anybody is gonna ask for the air pollution Hi, thanks for awesome talk. I have a question very interested in your point of view from from your experience Maybe you know some current tools that connect AI With metaverse development 3d development and If there are any like current opportunities to connect it and what future do you see from that perspective from that angle? Thank you for your question The IA is an amazing tool for making 3d systems is amazing that It knows what a frame is you tell chat gpt Write me as an A-frame machine and it does It's really amazing. You can use IA for example for Writing this plugin writing a scene for example, but you have to know what to tell it to do For example the university We recommend to use chat gpt only for things, you know for To if you don't know the answer it can give you run information But if you do the answer you can use it to have more ideas To develop more content, but you have to guide it What do you want and I feel it has a lot a lot of potential It's another thing that is is here for staying It's only one year, but it's amazing what we can do with IA so maybe in 10 years What could be it's it's awesome So we have to be there too and to combine it is how I think it's a time to start to Make to make experiments and to mix things because you can do very interesting things Thank you. Thank you very much Questions. Oh my gosh Wow Okay, Siri Did you illustrate all your slides? Have you had there was one slide that was like it was just beautiful. Did you design that the experiment? Yes, the one of the experiment. No, this is Okay, I'm meeting your name age. Oh, no, no way with a a Part of this code is made with a it's a guide. It's a help For the maches for example Don't have copyrights. So absolutely beautiful. There were a lot of try before Yeah, no, no, absolutely. I was just curious Thank you Yes, hello Hello from a fellow Neighbor, I'm glad that we have people doing this kind of stuff there a question about the Design of what you're presenting it took us about the decade to create a responsive web design for the 2d websites But what you're showing like it looks great on a great big screen But how do we accommodate? You know Smartphones tablets anything else that they are existing and we have to know about them If we are about to make it, you know, more popular So how do you think about designing this 3d environments that will be you know responsible? Responsive but also, you know fun to play with Okay, thank you Well, obviously Immersive design is not responsive, but if you use a mobile phone or a tablet for For our 3d website you can use your gyroscope So you turn and you see how the environment is changing. Okay. It's like a window through another place So you turn and you see the back of the of the scenario, you know So in that way, it is responsive. It works on mobile phones. It was very good But the main objective here is to be immersive so This is really for virtual reality glasses. We are designing 360 environments that are the The platform is virtual reality headsets now not too many people have the reality glasses at home, but maybe in two years It will be very common. No, so and we have the last week new In presentation of another fear headset and is Pupilating now the the idea of having this device at home. So This is really a platform, but it works on mobile phone But not responsive up to the as to the webs are, you know Any other questions? Well, I think that wraps it up then. Oh Wait, I need to let you guys know that we have our first question for the card game. Is anybody playing the card game? well the first question is here and that's When and where was the first word camp? Are they supposed to answer me? That's the next question though, so if you're playing the game, that's the next question and otherwise Lunch is soon, but we got one more sash and everybody give a big round of applause for Javier You