android+webgl+性能优化,WebGL Three.js大量文本渲染性能优化方案演示

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

/* https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/ */

require(['src/cartogram', 'underscore'], function(Cartogram, _) {

var canvasEl = document.querySelectorAll('.js-cartogram-canvas')[0];

var cartogram = new Cartogram(canvasEl, {

canvas: canvasEl,

backgroundColor: '#F7F7F7',

showDebug: false,

immediate: false,

resizeCanvas: true

});

var topLevelSceneSet = Cartogram.Shapes.set();

var myTextSet = Cartogram.Shapes.set();

var possibleLabels = ['pizza', 'pepper', 'olives', 'cheese', 'salami'];

// create a bunch of text on screen and merge it all

for (var i = 0; i < 200; i++) {

for (var j = 0; j < 20; j++)

myTextSet.push(Cartogram.Shapes.text(

_.random(-1000, 1000), _.random(-1000, 1000),

possibleLabels[_.random(0, possibleLabels.length - 1)], {

color: 0x000000

}

));

}

// let's add our text to the scene

topLevelSceneSet.push(myTextSet);

// let's plop our scene into cartogram

cartogram.paper.add(topLevelSceneSet);

cartogram.render();

});