Polygonal Mind
  • Home
  • Metaverse Builder
  • CryptoAvatars
  • MegaCube
  • Blog
  • Decentraland
  • Projects
  • Assets

Blog

Doing a Video Stream in Decentraland

4/15/2021

1 Comment

 
Doing video stream in Decentraland
Premise 
"Create, explore and trade in the first-ever virtual world owned by its users." With this welcoming phrase Decentraland invite us to dive into one of the first blockchain-backed platform that enhances an alternate reality to express our ideas and projects into the world.
​
Launched in February 2020, Decentraland has seen its potential grow as a place to display and showcase cryptoart. Nowadays you can find NFTs placed all over the Land, some of them inside buildings specifically made to gather them, others in parks and open areas and even some of them can be found flying around.
Superrare NFTs placed Land
A caption of different points where NFT art can be seen, near coordinates 15,44 in Decentraland

The mission
This guide focuses into the steps to follow if you want to display a video NFT in Decentraland with the current version of the SDK (6.4.9 at the time of writing). We will see what it can and what it cannot do Decentraland and the chunks of code needed.
Resources
  • Unity Editor (2018.3.6f1)
    unityhub://2018.3.6f1/a220877bc173
  • Decentraland SDK
    https://docs.decentraland.org/development-guide/SDK-101/
  • Unity Decentraland Plug-in
    https://github.com/fairwood/DecentralandUnityPlugin
  • Decentraland Picture Frame Display
    https://docs.decentraland.org/development-guide/display-a-certified-nft/
  • Decentraland Video Stream
    https://docs.decentraland.org/development-guide/video-playing/
Listing your NFTs, knowing your limitations

The most important thing to do at first is to create a list of your desired NFTs to be in place. Decentraland doesn't have a hard limit regarding NFT placing or video streaming as they count in the Entity limitation.
​
If you don't know your limitations, you can find a lovely spredsheet here: https://docs.google.com/spreadsheets/d/1BTm0C20PqdQDAN7vOQ6FpnkVncPecJt-EwTSNHzrsmg/edit#gid=0

This is the list of assets we are going to display in:
  • https://app.rarible.com/token/0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0:16973:0xfec33a90737254dcf9aa33188a11f32797197f93 by ToxSam (https://app.rarible.com/toxsam/created)
Address: 0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0
Token: 16973
  • https://app.rarible.com/token/0xd07dc4262bcdbf85190c01c996b4c06a461d2430:92976:0xfec33a90737254dcf9aa33188a11f32797197f93 by Bananakin (https://app.rarible.com/bananakin/created)
Address: 0xd07dc4262bcdbf85190c01c996b4c06a461d2430
Token: 92976
  • https://app.rarible.com/token/0x60f80121c31a0d46b5279700f9df786054aa5ee5:59183:0xb7ee502c4dadcc9a62934b02c5f8decbbfa32c48 by kourtin (https://app.rarible.com/kourtin/created)​
Address: 0x60f80121c31a0d46b5279700f9df786054aa5ee5
Token: 59183
  • https://superrare.co/artwork-v2/painting-study-01-8552 by Lauretta (https://superrare.co/lauretta)​
Address: 0xb932a70a57673d89f4acffbe830e8ed7f75fb9e0
Token: 8552

For our example we will use a splendid land of 1x1. Here we will build our environment and decide where to place our finest cryptoart pieces. For this small piece of metaverse the platform allows us to have a maximum of 10.000 triangles, 200 entities, 30 bodies, 20 materials and 10 textures in our exported project zip folder.
where to place cryptoart pieces
Caption of the ECS limitations spreadsheet
To have a better understanding of limitations, we have to take into account that every "entity" (called in Unity gameObject) that has it's own independent Transformation node (Position, Rotation and Scale) is considered an Entity. Even if it doesn't have a 3D mesh (Body) attached to it.

This means that every NFT, video stream or model will count at least as one entity each.
​

So for now we know that our NFTs will "size" 4 Entities within the limitations and we know that although they are all animated, only one is a video source and it will be the one to do a video stream. The other three artworks are in GIF format, supported by the Picture Frame by Decentraland.
Extracting the video source

There is one simple rule in Decentraland to do a display of NFT picture frame and it's that: if it is in OpenSea, it can be shown. This is due to the API used to extract the blockchain data to display the artwork that requires the Entity to include a NFTShape stating the Smart Contract Address and the Token ID of the artwork. This flexible set up allows you to incorpore to your land NFT assets from SuperRare, Rarible, KnownOrigin, Whale, MakersPlace and many more!

For all the artworks that remain apart of the current admitted formats (Image file formats), we have to do a video stream of them but we must know that even video streams have limitations.

The formats currently supported by the Decentraland API are .mp4 , .mov , .ogg , .webm.

Note: The inclusion of the .ogg format makes possible to only stream audio indeed :)
​
To extract the video source of an artwork it's just as simple to catch the static video source some platforms give you by right clicking on the artwork
Video artwork Bananakin
Original artwork by: Bananakin
Source link: https://storage.opensea.io/files/28b5a343586b597f755148a85d8edd23.mp4
​

With this source our artwork can be streamed.
Deciding the placing

For this test we have developed a small environment scenario where we place a "dummy" game object that will indicate the complete transform data we need, position of the video stream, its rotation and its very own scale. We have named this personal beacon "COG VideoDisplay (1)", this code name will make it easier to find it in the game.ts code the export processes for us.
where to place cryptoart pieces
Our view with Unity, you can already spot the place where we will place a video stream
place cryptoart pieces code
​The view of the same place for the video stream in the game.ts code
As you may have noticed among the code, rotations are not set in Euler angles. Instead unity runs angles in Quaternions to avoid the gimbal to happen. If you want to input Euler angles remember to put .eulerAngles after rotation to indicate that your values are being written differently.
place cryptoart pieces code
More about Euler vs Quaternions
​https://stackoverflow.com/questions/6002516/quaternions-vs-euler-angles
Placing the chunk of code

As the official Decentraland documentation follows, the code to do a stream goes by stating the following lines:
code to do a stream
CODE
Code

    
This chunk of code would create a video in the position 8,1,8 located in the land with a size of 1 meters square.
​
To adapt it we extract the code needed to our scene, specifically we need the part where a plane is spawned in the world position.
code to do a stream
CODE
Code

    
This is the vanilla code, stating that "entity77588n" is called "COG VideoDisplay (1)". This is the Entity we need to work on to make it stream a video on it. For it we add the following lines:
code to do a stream
CODE
Code

    
Instead of spawning a new entity, we have decided to set a material on the current one and tell it to have an specific material (that contains the VideoTexture) and describe the behaviour it has to have when the player interacts with it.
Local deploying and debugging

After setting our code we can deploy it locally and see if Decentraland runs our chunk of code, luckily for us this works and so the video can be seen in motion alongside the other NFTs.
​
The main counterpart to stream a video it's the fact that it is not an NFT in essence, somewhat we could say that breaks the spirit of the blockchain but it's the only way possible to do this at the moment.
Decentraland runs our code
Decentraland runs our code
Another point against it's use is the memory usage and the overload that may cause to play raw videos or stream to much data into Decentraland. Because it is a platform that it is already streaming a lot of information, overloading it with additional videos and images can be problematic if you look to have a smooth experience.
Additional features to your stream

You can also set different properties to the stream that by default are not enabled. Or you may want to start the video in a specific position or stream it slower. This is the complete list of things you can add to you custom stream code:
​
  • videoTextureName.Play()
Simple performer to play the stream, useful to trigger a video by custom events
  • videoTextureName.Pause()
Pause the video
  • videoTextureName.Reset()
Takes the stream to the start point
  • videoTextureName.Loop
(true or false), set a boolean to indicate if your stream continously loops or stops at the end of the video stream
  • videoTextureName.PlaybackRate
The speed of streaming your video has, 1 is the default speed.
  • videoTextureName.Volume
The audio volume of the video, 1 by default.
  • videoTextureName.Seek
Allows you to change the starting point of the video once it's played or reset. -1 by default.
place cryptoart pieces code
Conclusion

Streaming a video source in Decentraland is, among other things to develop to your land, simpler than it can be thought at first glance. But be careful when placing multiple streaming videos without stop as they can overload your scene (and your neighbouring lands too!)
Picture
​Kourtin
​ENVIRONMENT ARTIST
​I purr when you're not looking. I'm passionate about environments and all the techie stuff to make them look rad. Learning and improving everyday to be a better hooman.
TWITTER
    1 Comment
    Joe's Time Machines
    6/14/2021 02:11:48 pm

    Great walkthru. I actually did this exact thing a few weeks ago when I rented a couple parcels and deployed some NFT artwork and was disappointed that the NFTs weren't animated on their own.

    I have 4 mp4 videos running at 1080p each, and every few seconds I get some stuttering in the videos. The videos are not streaming; the files are uploaded into the scene. It works perfectly in the offline scene preview, but when i deploy for real it the videos stutter sometimes. Have you had any similar issues?

    Love the blog.

    Reply



    Leave a Reply.

      Categories

      All
      Blender
      CryptoAvatars
      Decentraland
      Decentraland En Español
      Maya
      Metaverse
      Mixamo
      Morphite
      Substance Painter
      The Sandbox
      Totally Reliable Delivery Service
      Unity 3D
      Updates
      Vrchat

      Archives

      March 2022
      July 2021
      June 2021
      May 2021
      April 2021
      March 2021
      February 2021
      January 2021
      December 2020
      October 2020
      August 2020
      July 2020
      June 2020
      May 2020
      April 2020
      March 2020
      February 2020
      December 2019
      October 2019
      September 2019
      August 2019
      June 2019
      May 2019
      February 2019
      January 2019
      December 2018
      November 2018
      October 2018
      September 2016

      Picture
    Home
    Projects
    Assets

    Picture
    Crypto
    Friendly
    Picture

    Subscribe to get some 💚 in your inbox once in a while.

    Follow us and your visit will never be forgotten!
    Picture
    Picture
    Picture

     © 2015-2022 POLYGONAL MIND LTD. ALL RIGHTS RESERVED.
    • Home
    • Metaverse Builder
    • CryptoAvatars
    • MegaCube
    • Blog
    • Decentraland
    • Projects
    • Assets