2021 Demos

[trusktr]

Hello! Hope all of you are well during these pandemic times!

One of my goals is to use demos as a way to force myself to improve LUME.

Here are the first 6 demos I made in 2021 separate posts along with details and descriptions:

Jan 1

Post:

3D Shiny Image Grid (live demo)

(from Jan 1st) Happy 2021 everyone! Tonight I made a shiny image grid to start the new year of 2021. I am posting a new demo every day all 2021. I wish to unleash more creativity this year! This demo introduces a <grid-layout> element that takes the child LUME nodes, and, you guessed it, lays them out in a grid. Made with LUME #webgl #threejs #html #css #javascript #webdev #webdevelopment #graphics #3D

Demo:

Jan 2

Post:

Shiny Shelby GT350 Photo (live demo)

(Demo from Jan 2) A #NewYear2021 resolution: one demo per day. Here’s an #HTML <img> tag in #3D space with shine from a light, featuring my #ShelbyGT350. This demo defines a new <shaded-image> HTML element that makes it possible to size the element (notably the underlying WebGL object) based on the natural size of the <img>. This way we don’t need to explicitly know the image size. topics: #webgl #css #javascript #webdev #graphics #365DaysOfCode

Demo:

Jan 3

Post:

<lume-gltf-model> 3D model element (live demo)

(Demo from Jan 3) New demo! One per day all 2021! Today I added a <lume-gltf-model> element to LUME, an HTML 3D toolkit. It works similar to an <img> tag: just give it a src attribute to a file like so: <lume-gltf-model src="path/to/model.gltf"></lume-gltf-model> Made with LUME: topics: #threejs #webgl #css #javascript #webdev #graphics #365DaysOfCode2021

Demo:

Jan 4

Post:

Ripple of flipping squares (live demo)

(Demo from Jan 4) I had limited time today, but still one demo per day all 2021! So I tweaked the #animation and colors of an old demo. It uses only the #CSS3D rendering that LUME had at the time (back when it was called Infamous, and before it had any #WebGL features). LUME’s WebGL rendering abilities allow regular HTML content (div tags, span tags, etc) to be mixed with 3D content in the same 3D rendering space. Check out my previous posts for examples, and stay tuned for one new demo eve…

Demo:

Jan 5

Post:

Updated <lume-gltf-model> 3D model element (live demo)

(Demo from Jan 5) I’m posting one demo per day all 2021! I improved the previous demo by adding new attributes to the <lume-scene> element that give the rendering an “environment map” that reflects off of shiny surfaces in the scene. It looks a lot better now: This is what it looked like before: The gist of it is you can write HTML like the following and you’ll have a 3D model on your web site: <lume-scene id="scene" webgl background="https://assets.codepen.io/191583/airplane-hanger…

Demo:

Jan 6

Post:

Morphing spirals (live demo)

(Demo from Jan 6) I’m making one demo per day for 2021! I took an old spiral demo of mine, and made two new spirals from it. All I had to do was modify a couple numbers, and the result was two distinct spirals. The code is short too! Which spiral do you like more? Made with LUME topics: #365DaysOfCode2021 #webgl #html #css #creativecoding #creativecode #graphics #webdev

Demo:

[trusktr]

Making one demo per day turned out to be more difficult than I thought, especially with some features and refactors that took time, while also working on LUME Glas,

lume/glas

which is getting close to having rendering abilities.

Despite not making one demo per day, LUME has seen some improvements like better TypeScript support (especially for React-TypeScript projects with JSX type checking), more demos, and documentation improvements! I will open a write a topic with those details soon.

In the meantime, more demos can be found on CodePen under the lume tag. Here are a few picks:

Hello World!

NASA Astrobee Scene

Camera Rig

Reactive elements

<lume-plane> element with custom shader

LUME Element, simple fast custom elements, no build tools required