A Start of Something?

Well, Here goes nothing ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

I finally feel confident enough in my abilities to share what I learned over the course of the last few years as a (((professional developer))), so I've created this blog-like site to do it.

To give context about myself, I am primarly a Java developer who happens to have an interest in creative programming. I dabble with Unity, Processing, Raylib and React outside my job. and these are mostly going to be things that I'll be posting about.

To start off, I thought I'd show off some of the capabilities I've built into the blog itself.

Gatsby MDX

This site actually happens to be my first real attempt with react and gatsby and I obviusly took (a lot of) inspiration from the blog tutorial on this page, it is a really good tutorial overall.

I do want to customize this skeleton further than I've already done, I could talk about technical details but it'd be plagiarizing the original guide, so I'll just leave the blog specefic tech at that.

Future "Portfolio" Page

Since I have somewhat of a grasp on 3D graphics now, I thought I could build a portfolio using a combination of Unity and react three fiber (wrapper for ThreeJS)

Obviously page is not done yet. There is just a spinning pyramid for now. But soon™ I hope to make it all shiny and snazzy, showing off all the stuff I've done.

Scroller Component

The little box on the left is a fixed react component that is reactive to the whats happening on the body of the mdx.

Fun part about this component is that its also built into the frontmatter of the mdx

scrollerComponent: <p> This is a living breathing react component </p>
scrollerComponentProps : {"alignedTo":"left", "width":150, "height":250}

It also parses components from plain text. Which means i can create things like a fixed content pane or carry around a r3f canvas or a Unity Player.

Speaking of Unity Player...

Unity Player

This is actually something I am quiete proud of. There is already a component made for embedding Unity Player as a React component called "react-unity-webgl" I've made my own wrapper around it to make it work as an embedded component on gatsby's mdx pages.

Here is a sample (I use Netlify for hosting so it might take some time to load):

Neat huh?

Just like the rainbow text example on the original guide I've made a new component and called it UnityPlayer and put it into MDXProvider custom components.

const MDXComponents = {
 UnityPlayer, ...
};

export const rootWrapper = ({ element }) => {
    return (
        <Layout elementBasis={element}>
            <MDXProvider components={MDXComponents}>{element}</MDXProvider>
        </Layout>
    );
};

The UnityPlayer component itself is a wrapper which builds context from the properties given on the mdx. For example, the player on this page has a tag like the following:

<UnityPlayer dir="2022/01/10/new-post/player1" name="build" maxWidth="300" maxHeight="300" flavorText="flavor text"/>

The "dir" property tells the context builder where the player is located on the public directory. in gatsby's case this is also equative to the static directory. And the "name" property tells the name of the build files.

Here is what the context builder looks like

const directory = `${__dirname}${dir}/${name}`;

    const unityContext = new UnityContext({
        loaderUrl: directory + ".loader.js",
        dataUrl: directory + ".data",
        frameworkUrl: directory + ".framework.js",
        codeUrl: directory + ".wasm",
    });

This automated context building makes creating multiple Unity players on a single page very easy.

Apart from that, the loading bar and the play button are simple react states for the component.

There is also a current unity issue going on 2021.2 builds which causes an error to be thrown on invoking quit so I'll be using the latest 2021.1 version until it gets fixed.

There are several other features that I am yet to figure out how to show, such as sending messages to/from Unity player to react. I am currently playing around on how I can make that interesting. Maybe something like a shader show-off project where properties of the shader can be set through html components.

Anyway, this is it for now. Next post is probably going to be about r3f integration with unity, the spherical movement seen on the unity player demo or something dumb like that.