WebGL 文本 使用字符纹理.pdfVIP

WebGL ⽂本 使⽤字符纹理 WebGL ⽂本 使⽤字符纹理 在上⼀篇⽂章中我们复习了在 WebGL 场景中如何使⽤纹理绘制⽂本。技术是很常见 的 对⼀些事物也是极重要的 例如在多⼈游戏中你想在⼀个头像上放置⼀个名字。 同时这个名字也不能影响它的完美性。 ⽐⽅说你想呈现⼤量的⽂本 这需要经常改变 UI 之类的事物。前⼀篇⽂章给出的最 后⼀个例⼦中 ⼀个明显的解决⽅案是给每个字母加纹理。我们来尝试⼀下改变上⼀ 个例⼦。 var names = [ anna, // 0 colin, // 1 james, // 2 danny, // 3 kalin, // 4 hiro, // 5 eddie, // 6 shu,// 7 rian, // 8 tami, // 9 rick, // 10 gene, // 11 natalie,// 12, evan, // 13, sakura, // 14, kai,// 15, ]; // create text textures, one for each letter var textTextures = [ a,// 0 ,// 1 c,// 2 d,// 3 e,// 4 f,// 5 g,// 6 h,// 7 i,// 8 j,// 9 k,// 10 l,// 11 m,// 12, n,// 13, o,// 14, p,// 14, q,// 14, r,// 14, s,// 14, t,// 14, u,// 14, v,// 14, w,// 14, x,// 14, y,// 14, z,// 14, ].map(function(name) { var textCanvas = makeTextCanvas(name, 10, 26); 相对于为每个名字呈现⼀个四元组 我们将为每个名字的每个字母呈现⼀个四元组。 // setup to draw the text. // Because every letter uses the same attri utes and the same pro // we only need to do this once. gl.useProgram(textProgramIgram); setBuffersAndAttri utes(gl, textProgramInfo.attri Setters, textBu textPositions.forEach(function(pos, ndx) { var name = names[ndx]; // for each leter for (var ii = 0; ii name.length; ++ii) { var letter = name.charCodeAt(ii); var letterNdx = letter - a.charCodeAt(0); // select a letter texture var tex = textTextures[letterNdx]; // use just the position of the F for the text // ecause pos is in view space that means its a vector from the // some position. So translate along that vector ack toward the var fromEye = normalize(pos); var amountToMoveTowardEye = 150; // ecause the F is 150 units l var viewX = pos[0] - fromEye[0] * amountToMoveTowardEye; var viewY = pos[1] - fromEye[1] * amountToMoveTowardEye; var viewZ = pos[2] - fromEye[2] *