load font

shader-park · Jun 15, 2019 · f961f50 · f961f50
1 parent e5c3057
commit f961f50
Show file tree

Hide file tree

Showing 12 changed files with 1,127 additions and 10 deletions.
diff --git a/fonts/Helvetica-msdf.json b/fonts/Helvetica-msdf.json
diff --git a/fonts/Helvetica.png b/fonts/Helvetica.png
diff --git a/fonts/Helvetica2.json b/fonts/Helvetica2.json
diff --git a/fonts/Helvetica2.png b/fonts/Helvetica2.png
diff --git a/fonts/msdf.png b/fonts/msdf.png
diff --git a/index.html b/index.html
@@ -36,15 +36,19 @@
   <link rel="shortcut icon" href="/manifest/favicon.ico">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <meta charset="UTF-8">
+  <style>
+    body {
+      margin: 0px;
+    }
+  </style>
 </head>
 <body>
 
   <!-- 
     To configure starting state of the checkbox from markup: 
     <renderer pie="true"> 
   -->
-
-  <las-renderer spSculptureId="-LMyIqwl4kMxIUlMoj0p">
+  <las-renderer spSculptureId="-LhN4h_eCne8kYRnnc42">
     <!-- Placeholders to improve time to first paint -->
 
     <!-- Check for JavaScript -->

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@webcomponents/webcomponentsjs": "latest",
     "lit-element": "latest",
+    "load-bmfont": "^1.4.0",
     "three": "^0.105.2"
   }
 }
diff --git a/src/Sculpture.js b/src/Sculpture.js
@@ -3,10 +3,10 @@ import { defaultVertexSource, sculptureStarterCode, fragFooter} from './core-gls
 import { sketch } from './sketch.js'
 
 export class Sculpture {
-    constructor(size, sculptureData) {
+    constructor(size, fontTexture, sculptureData) {
         this.size = size
         this.vertexShader = defaultVertexSource;
-
+        this.fontTexture = fontTexture;
         // this.geometry = new THREE.BoxGeometry(size, size, size);
         let fragSource = sculptureStarterCode;
         if(sculptureData) {
@@ -16,7 +16,8 @@ export class Sculpture {
         }
         this.fragmentShader = fragSource;
         fragSource += fragFooter;
-        this.geometry = new THREE.SphereBufferGeometry(size, 400, 400);
+        this.geometry = new THREE.BoxBufferGeometry(1.0, 1.0, 1.0);
+        // this.geometry = new THREE.SphereBufferGeometry(size, 400, 400);
         this.mesh = new THREE.Mesh(
             this.geometry,
             this.generateMaterial(defaultVertexSource, fragSource)
@@ -51,7 +52,8 @@ export class Sculpture {
           stepSize: { value: 0.8 },
           size: { value: this.size },
           raySize: { value: this.raySize },
-          minStep: { value: this.minStep }
+          minStep: { value: this.minStep },
+          msdf: { value: this.fontTexture }
         },
         vertexShader,
         fragmentShader: fragmentShader,

diff --git a/src/loadFont.js b/src/loadFont.js
@@ -0,0 +1,13 @@
+import * as THREE from 'three';
+import * as loadFont from 'load-bmfont'
+
+// A utility to load a font, then a texture
+export const loadFonts = (opt, cb) => {
+  console.log(loadFont);
+  loadFont.default(opt.font, function (err, font) {
+    if (err) throw err
+    THREE.ImageUtils.loadTexture(opt.image, undefined, function (tex) {
+      cb(font, tex)
+    })
+  })
+};
diff --git a/src/renderer.js b/src/renderer.js
@@ -10,6 +10,7 @@
 
 import {renderScene} from './there-scene.js'
 import { LitElement, html } from 'lit-element';
+// import {loadFonts} from './loadFont.js';
 
 export class StartLitElement extends LitElement {
 
@@ -43,6 +44,7 @@ export class StartLitElement extends LitElement {
       <style>
         :host { display: block; }
         :host([hidden]) { display: none; }
+
         canvas {
           height: 100vh;
         }
@@ -61,7 +63,7 @@ export class StartLitElement extends LitElement {
     console.log('spSculptureId', this.spSculptureId);
     const canvasEl = this.shadowRoot.getElementById('container');
     if (this.spSculptureId) {
-      console.log('getting Sculp');
+      console.log('getting SC')
       fetch(`https://shader-park-core.firebaseio.com/sculptures/${this.spSculptureId}.json`)
         .then(res => res.json())
         .then(data => renderScene(canvasEl, data));

diff --git a/src/there-scene.js b/src/there-scene.js
@@ -5,13 +5,14 @@ import { Sculpture } from './Sculpture.js'
 export const renderScene = (container, sculptureData) => {
     // const container = document.querySelector('.container');
     const scene = new THREE.Scene();
-
+    const texture = new THREE.TextureLoader().load('fonts/msdf.png');
     const camera = new THREE.PerspectiveCamera(35, container.clientWidth / container.clientHeight, 1, 1000);
-    camera.position.set(0, 0, 5);
+    camera.position.set(0, 0, 2);
 
     const raycaster = new THREE.Raycaster();
 
     const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
+    // renderer.setClearColor('0x000000');
     // render.setClearColor('0x000000');
     renderer.setSize(container.clientWidth, container.clientHeight);
     renderer.setPixelRatio(window.devicePixelRatio);
@@ -30,7 +31,7 @@ export const renderScene = (container, sculptureData) => {
     document.addEventListener('mousemove', onDocumentMouseMove, false);
 
     let objectsToRaycast = [];
-    let sculpture = new Sculpture(1, sculptureData);
+    let sculpture = new Sculpture(1, texture, sculptureData);
     scene.add(sculpture.mesh);
     objectsToRaycast.push(sculpture.mesh);