Learn To Create A VR Curved Canvas With Oculus Interaction SDK - バイリンガル字幕
What's going on everybody?
This is theomer and welcome back to my channel.
So in today's video, I'm going to continue working on the interaction SDK.
We're basically going to be using interactions to be able to interact with the curve canvas.
A curve canvas has been something that I've been getting past for a long time.
And now you can actually create a UI that looks more like what you will see in a VR experience.
So I'm going to do is I'm going to walk you through all the components that you need
to do to be able to implement your own curved canvas and also what kind of
interactions you can apply such as using AdrayInteractor or if you want to use poke interactions you can also do that.
So let's jump into my computer and it's not working on it.
Alright, so the first thing that we're going to do is we're going to be adding a new
component to this template scene that I'm having here and in fact what I'm going to do is I'm just
going to go ahead and clone it and then you guys can use that template scene for any of
the future tutorials but this template scene contains an Oculus integration sample rate which you can find in the Oculus examples.
have a run environment which is also part of the Oculus examples and the direction of life in an event system.
So these templates seen I think I'm going to name it since we're going to be doing curved canvases.
I'll just call it curved canvases and you guys can clone this and look at it after the fact.
So the first thing that I'll do here is if you go down to the Oculus folder and then go into interaction if you scroll down you're gonna see that
they also have a bunch of prefabs in here but the one that I that I really
want it's the one that is in the examples and the algorithm interaction
samples ray canvas is that one that we're gonna use I was going to walk you
through every single one of these components and and basically tell you what it does, but I think it'll be overwhelming.
I think it'll be easier if we just modify these compounding in here, which for some reason I went away.
There we go.
So you can drag it and drop it, modify it, and then that's going to work for you.
But what I want to do today though,
is I'm going to grab the, if you remember from the previous video, I had the this debug area, right?
And if I expand the debug area and we set it, let's kind of put it in a place.
Okay, there we go.
So we have a other right here and I'll put it, let's just change the rotation.
I wanted to make it a little cooler.
So I'll go ahead and put it right here.
And the way that it works,
this debug area was going to be the one that I'm using for you know for printing information about
the games that I'm building and things like that.
So it's easier to see the information and some of the components that it has if I go into the Bulgaria.
It's pretty simple.
It a background, it has the title which says the Bulgaria.
Actually this one is the title header.
it's just basically that banner going across.
And then the title text is just the debug area.
And then the debug text,
this is going to be basically what contains the basically a reference to text mesh, so we can write to the log.
And if you go to the bug area, there's a logger component in here.
So what I'm going to do is, let's go ahead and modify it so that we can make it more look like VR.
So we'll just do a curve.
So just put it right here so we have it next.
it.
And if we go close to this one, this is going to be the one that we're going to be modifying.
So if you needed to implement something like this in your own game, this is normally what I would probably recommend that you do.
You just use the prepat that the Oculus team provided for you.
And then we can just go ahead and rename it.
I'm just to go ahead and rename these to be something like the bulk area curve.
That way we know that this is going to be the one that has the curve implementation.
And just to kind of give you an idea of some of the components,
this is going to have a right interactable because we're going to be
using or hands to be able to select and interact with UI components, also a pointable canvas, canvas cylinder.
The idea behind this is it's going to have some curvature, right?
So we're going to have basically the system is going to build a mesh that is going to be a cylinder,
and this is going to basically project onto a cylinder.
You that's just all handled by Oculus, we don't have to do much of that.
The only thing here that you can modify,
there's multiple things that you can modify,
but the one that I modify was the curve radios,
and this is going to determine how much curvature the VR canvas is going to have.
So we can now leave it at two for now,
and then there's going to be multiple things in here that we're going to be able to change pointable canvas you know the event wrapper this one is going to be helpful
because anytime we have the ray pointing at the canvas we're going to be able to capture one of
the actions that get broadcast from the event so when somebody is highlighting when we're
highlighting the canvas this is going to be executed when we're hovering over the canvas.
When selecting anything in the canvas, basically it's gonna, it's gonna be playing sound.
So you can change these to be any type of events that you like.
So what I'm gonna do here though is if we go into this one,
I'm gonna go ahead and extend it, go ahead and extend it.
Alright guys,
I got this running,
you guys can see the UI,
it's currently working, but if I try to do a selection on anything, there's really no race, and that's something that we need to fix.
I also want to show you how we can change the race.
in runtime so if I wanted to change this to be like something like maybe two to
have a larger radius we can do that so you guys can see we can get back in
here so the reason why we don't have rays yet is because we haven't really told the
system to have rays in our hands and and also the controllers I'm also going to move this back a little bit,
maybe 1.2 so that we can see the radius doesn't affect.
And also change this color to be black because the canvas is going to,
there's a flat canvas behind it and it doesn't look good if you have transparency on the background.
So I think what I'm going to do is I'm going to show you,
so if we go into the sample radius, and then input and enhance.
You're going to see like if you want to modify the controllers to have race, there's also interactors in here for poke interactors.
If you wanted to poke something, then this has it already out of the box.
So what I'm going to do for a race is we're going to go ahead and expand this.
And if you go into the interaction folder under oculus,
you're going to see that also have a ray option in here and we make this a little bit bigger so you guys can see the whole thing.
So there's gonna be one for the controller ray and also one for the hand ray interactor.
I think what I'm gonna do for this video we're just gonna do the the the actual hand one but
you're more than welcome to do you know if you wanted to do a controller one you can just drag
the controller back on the controller and drag it into the controller interactor.
I'm also going to do that for the other hand, so make sure that you go here and you have the right hand selected.
So this one we can just drag and drop as well in here.
and then you can also rename it and make sure that you drag and drop it in the right place.
Okay so if you want to rename it let's just go ahead and do this one it's going to be left
and then the only thing that you need to change in here is going to be which hand it's going to be associated with.
So remember this one is going to take an eye hand interface and then this one I'm just going to go ahead and rename it as well it's going to be for the right hand and
then we'll just go ahead and drag and drop or hand in here so make sure you do that and I think everything is going to work
because we have the the ready in our component.
You see that we have the range interactable.
So that means that we can interact with the canvas.
So can go ahead and hit play.
We can see if this is going to work.
There should be a ray that comes out of our hands.
Now, if I go here, you can see that it's happening, right?
And I can go ahead and tap it.
And I go for, you know, and select something, you can see that everything.
it's getting selected and I'm going to go into 2D make sure that I have the
that I have the 2D selected that what we can resize this and what I'm not doing
here we're just going to add a couple things something simple we can go ahead
and drag and right click on the sample canvas and then go into UI and then I
can select you know to add a bar on it.
right and this could be something like clear logs so we can say clear
log button can I move it here we go ahead and get closer and we can probably put it
somewhere in here this is not gonna work but I'm gonna show you why clear logs
and I'm doing this on purpose so you guys know how the components work okay so
we have that let's say that we added something else we also need to buy buying this to the proper method.
So you go into unclick and then drag and drop this component here, go into logger.
So this could be any method that you want to execute.
In my case, I have a clear lock and the idea is that it's going to clear this lock.
So I'm going to add another component.
This one is just going to be a placeholder.
We're not going to be using it.
And I'm going to be it's going to be a drop down, right?
And let's say that we want to change something about this.
Perhaps the radios in runtime you can do.
I'm just going to leave it like that and we're not going to do anything.
So let's go ahead and hit play see if this is going to work and I know that it's not going to work and I'm going to show you why.
So if I go here and we can see our hands and I can interact but I can't release clear anything actually it is working
and I thought it wasn't going to work and I thought I didn't add that component but I'm going to
show you why I didn't think it wasn't going to work so if you go into the event system here
and you go okay so I did add it so normally what you'll see here there's going to be an
extender input handler so if I go a standard input module this is what you'll see it by default
you're going to have the event system you're going to have an standalone input module and this
is the input module that basically directs everything that you're doing with the input to the canvas
so that we can actually select we can you know if you want to type on a text box you can do that
you want to see can do that basically by clicking or touching depending on the platform.
In our case we're using VR so we don't need the standalone input module because we're using a different implementation.
So in this case what you would need to do is you're basically going to be adding the coin module,
there we go pointable canvas module.
In that pointable canvas module is the one that is going to be directing everything to you know to the actual canvas.
So if we go back in and we play everything should be working because we have that component.
So if I go in here and I select something you know I am able to select B and C and I can
clear the log as well as you guys can see some highlighting things and and then if I go here I go clear the lock.
So the last thing that I also wanted to show you is that you can also do what's called a poke interactor.
And there's an example that the Oculus team put together that you can look at.
But you can also you look at the prefabs that is in here.
So if you look at the poke button that's going to have everything that you need to be able to poke a button,
You also have this menu here,
which is the Oculus Interaction samples bone menu, and that is one that I use at the beginning of the video of the introduction videos.
And this is going to allow you to poke basically a UI, right?
So if I wanted to do that, you can go ahead and hit play.
You're going to see that this is going to work out of the box, and you can basically use it.
just follow their implementation to be able to use that.
But I can basically just tap and tap and select it.
And every time you select it, it's going to change one of the scenes.
So can see that that is currently working.
So you can use that implementation if you wanted to use and implement your own poke system.
In this case,
because I'm using in you know more of a far type of UI where I just want I don't want to poke then you can do that
but if you had a menu where maybe when you turn your hand you want to you know show a menu
and you want to basically poke it that's when you will use that type of interaction or or something
like in here or if you're building a game where you have to go through and select different UI
components and you want the user to feel like they're poking on something I
think that's when you'll use that implementation and because these poke
buttons like if you go and drill in for example the basic wrap they already have
a poke interactable you can you know specify how far the button is going to
go also this is going to allow you the interactable unity event wrapper is going to allow you to see and events,
if something happens, for instance, when you hover over a bun, when you, on hover, when you select it.
And then the other trick in here is just make sure you have a hand poking director,
or in the case of the controller, the controller poking director.
So that's how those two are going to work together.
That's honestly everything that I wanted to show you guys, I'm gonna be putting this and get help so you guys can download it.
But to be honest, what the interaction SDK is providing you, it's basically more than enough to be able to implement your own curved canvas.
So you guys have any other questions, please let me know in comments
さらなる機能をアンロック
Trancy拡張機能をインストールすると、AI字幕、AI単語定義、AI文法分析、AIスピーチなど、さらなる機能をアンロックできます。
主要なビデオプラットフォームに対応
TrancyはYouTube、Netflix、Udemy、Disney+、TED、edX、Kehan、Courseraなどのプラットフォームにバイリンガル字幕を提供するだけでなく、一般のウェブページでのAIワード/フレーズ翻訳、全文翻訳などの機能も提供します。
全プラットフォームのブラウザに対応
TrancyはiOS Safariブラウザ拡張機能を含む、全プラットフォームで使用できます。
複数の視聴モード
シアターモード、リーディングモード、ミックスモードなど、複数の視聴モードをサポートし、バイリンガル体験を提供します。
複数の練習モード
文のリスニング、スピーキングテスト、選択肢補完、書き取りなど、複数の練習方法をサポートします。
AIビデオサマリー
OpenAIを使用してビデオを要約し、キーポイントを把握します。
AI字幕
たった3〜5分でYouTubeのAI字幕を生成し、正確かつ迅速に提供します。
AI単語定義
字幕内の単語をタップするだけで定義を検索し、AIによる定義を利用できます。
AI文法分析
文を文法的に分析し、文の意味を迅速に理解し、難しい文法をマスターします。
その他のウェブ機能
Trancyはビデオのバイリンガル字幕だけでなく、ウェブページの単語翻訳や全文翻訳などの機能も提供します。