threejs文字粒子化（cpu&gpu）

function loadFont() {
	var loader = new THREE.FontLoader();
	loader.load( 'fonts/' + 'text.typeface.json', function ( response ) {
		font = response;
		refreshText();
	} );
}

function createText() {
	textGeo = new THREE.TextGeometry('需要粒子化的文字', {
		font: font,
		size: 10
	});
	
	// ...
}

var loader = new THREE.JSONLoader();
loader.load( 'models/text.json', function ( geometry, materials ) {
    // ..
    addScene()	
});

function addScene () {
    var mesh = new THREE.Points( geometry, new THREE.PointsMaterial({
        color: '#fff '
    }));
    scene.add( mesh )			
}

// 单行文字
// 获得文字像素值
function getTextInfo (text) {
	var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    ctx.font = '32px adobe-text-pro';
    var width = canvas.width = Math.ceil(ctx.measureText(text).width);
    canvas.height = 32;
    ctx.font = '32px adobe-text-pro';
    // 将文字绘制到canvas上
    ctx.fillText(text, 0, 32 * 3 / 4);
    
    var x, y;
    var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
    var xyas = [];
    for(var i = 0, len = data.length / 4; i < len; i++) {
        if(data[i * 4 + 3] > 0) {
            xyas.push(
                i % width,     // x位置
                i / width | 0, // y位置
                data[i * 4 + 3] / 255 // alpha (glsl是0-1 所以／255)
            );
        }
    }
	return {
		width: width,  // 文字宽度
       amount: xyas.length / 3, // particles数量
       xyas: xyas // 位置数据
	}
}

getTextInfo('填写绘制的文字');

// 多行文字
function getTextInfo (text) {
	
	// ..
   var textLines = text.split('/n');
   var maxWidth = 0;
   for(var i = 0, len = textLines.length; i < len; ++i) {
            maxWidth = Math.max(maxWidth, Math.ceil(ctx.measureText(textLines[i]).width));
        }
   canvas.width = maxWidth;
   
   // ..
}

getTextInfo('第一行文字/n第二行文字');

var arr = [];
var _textXY = getTextInfo();
	
var pointGeometry = new THREE.BufferGeometry();
var amount = maxAmount;
var positionData = new Float32Array( amount * 3 );
var randomData = new Float32Array( amount * 3);
var textXY, x, y, a, i, j, offset;

for (j = 0; j < amount; j++) {
    textXY = _textXY.xyas;
    offset = j * 3;
    x = textXY[j * 3 + 0];
    y = textXY[j * 3 + 1];
    a = textXY[j * 3 + 2];
    
    var radius = 30 + Math.floor(j / 360.0) / 200;
    positionData[offset + 0] = x - _textXY[0].width / 2;
    positionData[offset + 1] =  -(y - 32);
    positionData[offset + 2] = 0;
    
    randomData[offset] = Math.random();
}

pointGeometry.addAttribute( 'a_random', new THREE.BufferAttribute( randomData, 1 ) ); //用于动画
pointGeometry.addAttribute( 'position', new THREE.BufferAttribute( positionData, 3 ) ); // particles位置

var pMaterial = new THREE.PointsMaterial({
    color: 0xFFFFFF,
    // size: 20,
    blending: THREE.AdditiveBlending,
    transparent: true
});

var points = new THREE.Points(pointGeometry, pMaterial);  

scene.add(points); // 添加至场景

shaderMaterial = new THREE.ShaderMaterial({
    uniforms: {},
    vertexShader:   document.getElementById( 'vs' ).textContent,  //顶点着色器
    fragmentShader: document.getElementById( 'fs' ).textContent,  //片元着色器
    // blending:       THREE.AdditiveBlending,
    depthTest:      false,
    transparent:    true
});

function startEvent1 () {
    var particlesAttr = points.geometry.attributes;

    TweenLite.to(particlesAttr.position.array, 1, centerArr);

    centerArr.onUpdate = function () {
        particlesAttr.position.needsUpdate = true;
    };

    centerArr.onComplete = function () {

        TweenLite.to(particlesAttr.position.array, 2, arr1);
        arr1.onUpdate = function () {
            particlesAttr.position.needsUpdate = true;
        };

    };
}

// ----------BufferGeometry 部分----------

var geometry = new THREE.BufferGeometry();

var a_text_pos_arr = [];

var randomData = new Float32Array( _maxPixelAmount * 3);
var position = new Float32Array( _maxPixelAmount * 3 );

var offset = 0;
var a;
        
for (var i = 0; i < _pixelInfos.length; i++) {
	a_text_pos_arr.push(new Float32Array( _maxPixelAmount * 3 ));
	for (j = 0; j < _maxPixelAmount; j++) {
	    offset = j * 3;
	    if(offset) {
	        a_text_pos_arr[i][j * 3 + 0] = _pixelInfos[i].pixelsXY[j * 3 + 0] - _pixelInfos[i].width / 2;
	        a_text_pos_arr[i][j * 3 + 1] = _pixelInfos[i].pixelsXY[j * 3 + 1];
	        a_text_pos_arr[i][j * 3 + 2] = _pixelInfos[i].pixelsXY[j * 3 + 2];
	    } else {
	        a = 0;
	    }
	    randomData[offset] = Math.random();
	    position[j] = 0;
	}
	
	geometry.addAttribute( 'a_text_pos_'+ i, new THREE.BufferAttribute( a_text_pos_arr[i], 3 ) );
}

geometry.addAttribute( 'position', new THREE.BufferAttribute( position, 3 ) );

geometry.addAttribute('a_randoms', new THREE.BufferAttribute(randomData, 3));

// ----------material部分----------

var material =  new THREE.ShaderMaterial({
    uniforms: {
		u_text_offset_1: { type: 'v2', value: {x: 0, y: 0}},
		u_text_offset_2: { type: 'v2', value: {x: 0, y: 70}},
		u_max_particle_size: { type: 'f', value: 15 },
		u_noise: { type: 'f', value: 1 },
		u_level: { type: 'f', value: 0 },
		u_time: { type: 'f', value: 0 }
    },
    vertexShader:   document.getElementById( 'vs' ).textContent,
    fragmentShader: document.getElementById( 'fs' ).textContent,
    blending: THREE.AdditiveBlending,
    transparent: true,
    depthTest: false
});