A 3D Model Rendered By Houdini Paint API

Using Houdini Paint API to Render a 3D Model

Ada Rose Cannon
May 16 · 5 min read

“That’s f*cked up”

— Daniel Appelquist, co-chair of the W3C Technical Architecture Group

Why is it a bad idea?

Constraints of the Houdini Paint Worklet

Breaking down how it works

Importing the 3D Model

Export All Interface in Clara.io
import * as campfire from './scene.json';
const loader = new ObjectLoader();
const camp = loader.parse( campfire );
const floorName = "mesh1292612855";
const floor = camp.getObjectByName( floorName, true );
floor.renderOrder = -1;
camp.position.y = -3;
camp.rotation.y = -Math.PI/2;

Setting up the Houdini Pain Worklet

registerPaint( "three",
class {
static get inputProperties() {
return [];
}
paint(ctx, size, props) {
camera.aspect = size.width / size.height;
camera.updateProjectionMatrix();
renderer.setContext(ctx);
renderer.setSize(size.width, size.height);
renderer.render(scene, camera);
}
}
);
main {
background-image: paint(three);
}

Controlling the Scene in Realtime

static get inputProperties() {
return ["--rotate-x", "--rotate-y", "--rotate-z"];
}
group.rotation.set(
Math.PI * Number(props.get("--rotate-x"))/180,
Math.PI * Number(props.get("--rotate-y"))/180,
Math.PI * Number(props.get("--rotate-z"))/180
);
main {
--rotate-x: 10;
--rotate-y: 90;
--rotate-z: -50;
}
document.addEventListener('mousemove', function (e) {  document.body.style.setProperty(
'--rotate-y',
30 * ((e.screenX / document.body.clientWidth) - 0.5)
)
document.body.style.setProperty(
'--rotate-x',
30 * ((e.screenY / document.body.clientHeight) - 0.5)
)
})

Be careful with animations

Have fun!

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog

Ada Rose Cannon

Written by

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://samsunginter.net/about-blog