Three.js高速テキスト彫刻

Question

Three.jsを使用して、サーフェス上にテキストを彫刻しようとしています。私はcsg.jsとThreeCSGを使ってそれを達成しました。そしてそれは完璧に動作します、結果は本当に良いですが、問題は多くの時間がかかることです。私のパソコンでは、Helloと刻むのに約30秒かかります。

他の解決策を検索したところ、thisサイトが見つかりました。彼らはカスタムジュエリーを作って、あなたはそれにテキストを刻むことができ、テキストを刻むのにかかる時間は本当に短いです！だから私は彼らがcsg.jsを使用していないと仮定します。この結果を達成するために使用できる他の技術は何ですか？

私はバンプマップを使用していますが、各文字のバンプマップを生成する必要がありますが、正しいアプローチであるかどうかはわかりません。

Answer 1

あなたのリンク先のサイトがバンプマップを使用しているシェーダーを見て見ることができます。

文字ごとにバンプマップを作成するとは思わないが、1つのキャンバス上ですべての描画（テキスト）を行い、バンプマップとして適用するだけだ。

キャンバスバンプマップのデモについては、以下の「コード実行スニペット」をクリックしてください（白いボックスでクリックアンドドラッグ）。
こちらがお役に立てば幸いです。

var camera, scene, renderer, mesh, material, stats; 
 
var drawStartPos = {x:0, y:0}; 
 

 
init(); 
 
setupCanvasDrawing(); 
 
animate(); 
 

 
function init() { 
 
    // Renderer. 
 
    renderer = new THREE.WebGLRenderer(); 
 
    //renderer.setPixelRatio(window.devicePixelRatio); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
    // Add renderer to page 
 
    document.getElementById('threejs-container').appendChild(renderer.domElement); 
 

 
    // Create camera. 
 
    camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 1, 1000); 
 
    camera.position.z = 400; 
 

 
    // Create scene. 
 
    scene = new THREE.Scene(); 
 

 
    // Create material 
 
    material = new THREE.MeshPhongMaterial(); 
 

 
    // Create cube and add to scene. 
 
    var geometry = new THREE.BoxGeometry(200, 200, 200); 
 
    mesh = new THREE.Mesh(geometry, material); 
 
    scene.add(mesh); 
 

 
    // Create ambient light and add to scene. 
 
    var light = new THREE.AmbientLight(0x404040); // soft white light 
 
    scene.add(light); 
 

 
    // Create directional light and add to scene. 
 
    var directionalLight = new THREE.DirectionalLight(0xffffff); 
 
    directionalLight.position.set(1, 1, 1).normalize(); 
 
    scene.add(directionalLight); 
 

 
    // Add listener for window resize. 
 
    window.addEventListener('resize', onWindowResize, false); 
 

 
    // Add stats to page. 
 
    stats = new Stats(); 
 
    document.body.appendChild(stats.dom); 
 
} 
 

 
function setupCanvasDrawing() { 
 
\t \t // get canvas and context 
 
\t \t var drawingCanvas = document.getElementById('drawing-canvas'); 
 
    var drawingContext = drawingCanvas.getContext('2d'); 
 
    
 
    // draw white background 
 
    drawingContext.fillStyle = "#FFFFFF"; 
 
    drawingContext.fillRect(0,0,128,128); 
 
    
 
    // set canvas as bumpmap 
 
    material.bumpMap = new THREE.Texture(drawingCanvas); 
 
    
 
    // set the variable to keep track of when to draw 
 
    var paint = false; 
 
    
 
    // add canvas event listeners 
 
    drawingCanvas.addEventListener('mousedown', function(e){ 
 
     paint = true 
 
     drawStartPos = {x:e.offsetX, y:e.offsetY}; 
 
    }); 
 
    drawingCanvas.addEventListener('mousemove', function(e){ 
 
    \t if(paint){ 
 
     \t draw(drawingContext, e.offsetX, e.offsetY); 
 
     } 
 
    }); 
 
    drawingCanvas.addEventListener('mouseup', function(e){ 
 
     paint = false; 
 
    }); 
 
    drawingCanvas.addEventListener('mouseleave', function(e){ 
 
     paint = false; 
 
    }); 
 
} 
 

 
// Draw function 
 
function draw(drawContext, x, y) { 
 
    drawContext.moveTo(drawStartPos.x, drawStartPos.y); 
 
\t drawContext.lineTo(x,y); 
 
\t drawContext.stroke(); 
 
    drawStartPos = {x:x, y:y}; 
 
    material.bumpMap.needsUpdate = true; 
 
} 
 

 
function animate() { 
 
    requestAnimationFrame(animate); 
 
    mesh.rotation.x += 0.005; 
 
    mesh.rotation.y += 0.01; 
 
    renderer.render(scene, camera); 
 
    stats.update(); 
 
} 
 

 
function onWindowResize() { 
 
    camera.aspect = window.innerWidth/window.innerHeight; 
 
    camera.updateProjectionMatrix(); 
 
    renderer.setSize(window.innerWidth, window.innerHeight); 
 
}

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
#drawing-canvas { 
 
    position: absolute; 
 
    background-color: #000; 
 
    top: 0px; 
 
    right: 0px; 
 
    z-index: 3; 
 
} 
 

 
#threejs-container { 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
}

<script src="https://rawgit.com/mrdoob/three.js/r83/build/three.min.js"></script> 
 
<script src="https://cdn.rawgit.com/mrdoob/stats.js/r17/build/stats.min.js"></script> 
 
<canvas id="drawing-canvas" height="128" width="128"></canvas> 
 
<div id="threejs-container"></div>