28th week: MRTK3 on web

Tensorflow

This week I tried to reuse tensorflow using the MNIST tutorial. It is much useful than years before. So I’m starting to watch this freeCodeCamp to get a structured knowledge. It will be done this week.

Web3

I don’t know too much about web3, just watched fireship’s video. There’s a series of videos about solidity. Maybe I will use it one day.

• NFT Art Generator is a tool to generate NFT art.
• Waffle is a testing framework for solidity.
• Pinata puts your NFT on IPFS. This is a tutorial.
• HardHat is a development environment for Ethereum. It’s a replacement of Truffle.Building a bridge between JS and solidity.
• chain-link is a decentralized oracle network.
• OpenZeppelin is a library for smart contract development.

Tailwind

Tailwind is a utility first CSS framework. But the templates on the site are not free. These are some free component templates:

• float UI
• a17t
• ko Meta
• headless UI
• tailwind UI Kit
• daisy UI
• tailwind kit
• tailwind Starter Kit
• kutty
• post src
• tail blocks
• hyper UI
• meraki UI
• mamba UI

These are page templates:

• tailwind tool box
• CUIP
• tailwind awesome
• tailwind components
• tReact
• unlight tailwind components

FBX files

some FBX files can not be read on Windows 3D viewer. Can use Autodesk FBX Review to check the file.

These are some free FBX emojis

UI for webXR

UI on canvas is quiet different from UI on DOM. Babylon.js has it’s own UI toolkit both 2D and 3D. And one can make the UI using the UI editor. Space.js is a 3rd party UI for Three.js.

Babylon.js treats UI as materials, so I can’s add Gizmo on it. But I can attach it to a mesh.

With the SVG’s foreignObject tag, I can insert an HTML into SVG. This is how html-to-image works. I think I can implement an HTML Control for babylon.js.

furthermore, I can use height-map to add 3D effect for a 2D GUI.

Babylon.js

Babylon.js now supports MRTK3 on web. But right now, only a button is supported. The full MRTK3 components can be found in github. checkout the mrtk3 branch. You can build it on Unity.

Babylon.js has an editor, Three.js also has one. I have to say babylon.js is better. But to integrate it with react-babylon still need some work. It exports scene as a .babylon file. I am trying to import it to react-babylon.

Snippets is a babylon material server. You can build your own with this. Also you can use node-editor to generate one.

WebXR

I found a tutorial of WebXR on medium. I will check it out next week.

Swipe keyboard

This is a document about how swipe keyboard works.

What to be done

• Finish the tensorflow tutorial. freeCodeCamp
• Integrate babylon.js editor with react-babylon.
• make an HTML Control for babylon.js.
• learn react-babylon tutorial
• learn rust on android
• try to make snippets(not emergent).