WebGL progress updates, and Mixed Mode!

The following are examples taken from the comments below, latest first:

<button> elements with WebGL-powered light and shadow, defined with HTML:

WebGL-only example with basic lighting:

Mixed Mode, DOM elements with lights and shadow:

Polydance, presented at 3DWebFest 2017, in collaboration with Anastasiia Vedernikova. This one uses an older version of the WebGL API


Original Post:

I’ve started work on the infamous WebGL API in the webgl branch.

Here’s code and a screenshot of what a basic example using React currently looks like:

import * as React from 'react'
import 'infamous/motor-html'

export default
class App extends React.Component {

    constructor(props) {
        super(props)
        this.sheet = null
    }

    render() {
        const items = [1,2,3,4,5,6]
        return (
            <motor-scene>
                <motor-node
                    ref='node1'
                    id='node1'
                    absoluteSize='100 100'
                    rotation='30 30 30'
                >
                    {items.map((item, index) => (
                        <motor-node
                            ref='node2'
                            id='node2'
                            key={index}
                            absoluteSize='10, 10'
                            rotation={`${index*30} ${index*20} ${index*10}`}
                            position={`${index*100} 100 100`}
                        >
                        </motor-node>
                    ))}
                </motor-node>
            </motor-scene>
        )
    }
}

Currently there’s unconfigurable default lighting, and every node renders as a non-configurable 100x100x100 cube. These things will become configurable of course (via JavaScript or HTML), but as of right now the only thing that can be done is to create a scene graph (f.e. with <motor-node> html elements) and move them, rotate them, etc, and it will update the cubes rendered in the WebGL.

Work in progress…

1 Like

This looks great, Joe!!

1 Like

I decided to just work on the webgl stuff in the master branch. It is currently behind a DOM flag,

<motor-scene webgl="true">
</motor-scene>

but I will change it to

<motor-scene experimental-webgl="true">
</motor-scene>

when I get back to work, so it is more obvious that it isn’t production ready.

2 Likes

Here’s the direction the WebGL HTML API is taking:

Try changing the attributes. For example, change from has="box-geometry phong-material" to has="sphere-geometry phong-material". The phong-material behavior listens to changes in the color="" attribute, for example. -geometry behaviors react to changes in an elements size="" attribute. The has="" attribute is part of what I call “element behaviors” (more on that idea here), which is essentially an “entity-component system” but renamed to “element-behavior system” to avoid conflicts with other libraries that use the word “component” (f.e. React, Vue, Angular, Web Components, etc). An element has any number of behaviors, listed inside the has="" attribute. Behaviors are classes that have life-cycle methods similar to Custom Elements (f.e. see src/html/behaviors).

Note, the call to infamous.html.useDefaultNames() defines the default names for the elements (i-mesh, i-node, etc). You can also define any names you want, as mentioned in the README. For example:

This work is currently in the threejs branch. After checking out that branch, you can npm install && npm run build-global to rebuild the global.js file to the latest. Then just place it in a script tag to try it out easily, like in that above codepen.

Alright, “Mixed Mode” is upon the land of Infamous. In case you’re not familiar with the concept of “mixed mode”, it is a concept that was introduced by Famous (a.k.a Famo.us) around 2015 that gave users an easy-to-use API that allowed regular DOM content to be mixed with 3D WebGL content.

We now have this in Infamous!

Here’s a basic demo showing a few DOM elements with lighting and shadow (best viewed in a new tab):

2 Likes

This looks pretty great!

1 Like

You can say that again. Awesome!

1 Like

Thanks guys! Alright, here’s another one. Some <button> elements with lighting and shadow. Be sure to click them:

Very cool! Nice work Joe!

1 Like

@newswim @talves @dmvaldman @andrewreedy Nice to see you guys are still around!

I’ve got more stuff to show soon (WebVR/XR features and the new component system that makes it easy to define new elements and compose them together, and also a rename/rebrand with new website (I’ll need your help @gadicc with the forum migration)).

By the way, check out the first VR example if you haven’t seen it yet: VR Mode, initial experimental API

Are any of you near SF or LA? It’d be nice to grab a drink and talk about what’s coming up. I’m in West Oakland and work in SF, but also visit LA (and anywhere else really, it’s just a flight away!).