I've always been fascinated about 3d, and I firmly believe it's one of the greatest software achievements of our time.
I spent this last month building a small app just for the sake of it.
I asolutely needed, in a OpenGL ES app, a way to render 3D text out of geometry, in real time with dynamic strings.
So i was searching for a way to read a font, have it translated to geometry and then exported in whatever format (possibly retaining font information like kernings).
I perfectly know this is insane: bitmap fonts are there for a reason (yes, it's performance and memory usage) but still I wanted to give it a shot, and I assure you that is a very lightweight app that can handle the load (it would be pretty much the only thing rendered there).
Also, being in the full Javascript madness for work in a while, I knew I needed to use this stuff.
Well, turns out that, not only it's super fun to code, but i works pretty well:
I knew I wanted an app to run on different machines, and did not want this to run on the web: file transfers may be slow, and some meshes tend to be quite large.
Atom Electron, although pretty big, I still think it's a solid choice. It gives everything you need (exception is a smart drag and drop option, but meh, you can work around that pretty fast).
Being that nothing more than a Chrome browser with "super powers", we need a way to easily compile our ES6/React and JSX stack. Even though there are glorious boilerplates for this purpose, be sure to check out electron-compile. It sure is going to speed you up in the setup process (and if you need to be super fine-grained you can customize everything).
Let's now jump into the interesting part. If you want to integrate 3D into a React application, you sure can write a custom solution, or you can look into these two libraries:
I'll let you decide what are the main differences between those two: I preferred the first one, but both are very valid libraries.
This will help you speed up your development by declaratively set up your scene with something like this:
<scene>
<perspectiveCamera
near={0.1}
far={100}
aspect={this.props.windowSize.width / this.props.windowSize.height}
position={this.props.camera.position}
rotation={this.props.camera.rotation}
fov={75}
name="camera"
ref="camera"
/>
<ambientLight color={0x000000} />
<pointLight intensity={1} distance={0} position={new THREE.Vector3(0, 10, 0)}/>
<pointLight intensity={1} distance={0} position={new THREE.Vector3(5, 10, 5)}/>
<pointLight intensity={1} distance={0} position={new THREE.Vector3(-5, -10, -5)}/>
Right now this app only exports the full alphabet in a json format like this one:
{
".": {
"colors": [0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1, 0.00392156862745098, 0.00196078431372549, 0, 1],
"normals": [0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, -1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 1, 0, 0, -1, 0, 0, 1, 0, 0, 1],
"vertices": [0, 0.151, 0, 0.14200000000000002, 0.151, 0, 0.14200000000000002, 0, 0, 0.14200000000000002, 0, 0, 0, 0, 0, 0, 0.151, 0, 0.14200000000000002, 0, 0, 0.14200000000000002, 0.151, 0, 0, 0.151, 0, 0, 0.151, 0, 0, 0, 0, 0.14200000000000002, 0, 0, 0.14200000000000002, 0.151, 0, 0, 0.151, 0, 0.14200000000000002, 0.151, 0, 0, 0.151, 0, 0, 0.151, 0, 0.14200000000000002, 0.151, 0, 0, 0.151, 0, 0, 0, 0, 0, 0.151, 0, 0, 0, 0, 0, 0, 0, 0, 0.151, 0, 0, 0, 0, 0.14200000000000002, 0, 0, 0, 0, 0, 0.14200000000000002, 0, 0, 0.14200000000000002, 0, 0, 0, 0, 0, 0.14200000000000002, 0, 0, 0.14200000000000002, 0.151, 0, 0.14200000000000002, 0, 0, 0.14200000000000002, 0.151, 0, 0.14200000000000002, 0.151, 0, 0.14200000000000002, 0, 0]
}
}
I know what you are thinkin, it lacks the infomation I was talking about earlier and files get big fast.
That's true, but this small app is far from being perfect. I'll sure add missing info and limit float precision to get smaller jsons.
As soon as I'm confident with it being working (I just have a crappy Android loader not quite ready to share) I'll write a new article and release another repository as an example.
Overall, pretty fun programming experiment!
PS: Repo here!