An efficient model-to-pixel transformation with motion effects, leveraging WebGL's hardware acceleration and GPGPU through Three.js:
Tip
If you would like to implement a similar effect on a 2D image, you can use the related library d3p1/img2pxl.
You can install this library using a package manager like npm:
npm install @d3p1/thr2pxlOr you can use a CDN like jsDelivr and this importmap in the <head> of your html file:
<head>
...
<!-- Vanilla -->
<script type="importmap">
{
"imports": {
"@d3p1/thr2pxl": "https://cdn.jsdelivr.net/npm/@d3p1/thr2pxl@<version>/dist/thr2pxl.min.js",
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@<version>/dist/tweakpane.min.js"
}
}
</script>
...
</head><head>
...
<!-- React -->
<script type="importmap">
{
"imports": {
"@d3p1/thr2pxl": "https://cdn.jsdelivr.net/npm/@d3p1/thr2pxl@<version>/dist/thr2pxl.min.js",
"react": "https://cdn.jsdelivr.net/npm/react@<version>/jsx-runtime.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@<version>/index.min.js",
"three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.min.js",
"tweakpane": "https://cdn.jsdelivr.net/npm/tweakpane@<version>/dist/tweakpane.min.js"
}
}
</script>
...
</head>Note
Remember to replace the <version> with the actual version of thr2pxl and its peer dependencies (three - tweakpane - react - react-dom). To do that, you can check the package.json of the last release and get required versions from there.
Using this library is straightforward:
-
Go to our builder page and make the desired customizations in the tweak panel to achieve the desired effect.
-
Use the
Copybutton to obtain the configuration that produces the desired effect. -
Instantiate the library with the configuration copied in the previous step, for example:
// Vanilla
import {Thr2Pxl} from '@d3p1/thr2pxl/core'
...
const config = {
models: {
0: {
src: {
highPoly: <model-high-poly-src>,
lowPoly: <model-low-poly-src>
},
width: <model-width>,
height: <model-height>,
point: {
size: 5,
motion: {
frequency: 0.1,
strength: 1.5,
ratio: 0.25,
lifeDecay: 0.2
}
}
},
},
pointer: {
strength: 0.2,
minRad: 1,
maxRad: 2,
pulseStrength: 0.2,
pulseFrequency: 1
}
}
new Thr2Pxl(config)// React
import {Thr2Pxl} from '@d3p1/thr2pxl/react'
...
const config = {
models: {
0: {
src: {
highPoly: <model-high-poly-src>,
lowPoly: <model-low-poly-src>
},
width: <model-width>,
height: <model-height>,
point: {
size: 5,
motion: {
frequency: 0.1,
strength: 1.5,
ratio: 0.25,
lifeDecay: 0.2
}
}
},
},
pointer: {
strength: 0.2,
minRad: 1,
maxRad: 2,
pulseStrength: 0.2,
pulseFrequency: 1
}
}
return <Thr2Pxl {...config} />Note
To gain a deeper understanding of how to use this library and how it works under the hood, visit the wiki page (in progress).
Detailed changes for each release are documented in CHANGELOG.md.
This work is published under MIT License.
Always happy to receive a greeting on: