This code runs fine in Firefox, but in Chrome doesn’t display anything (Also if i enable WebGL inspector, suddenly the code works fine in Chrome :S). Thanks! (Im using GWT)
/**
* Create and store the font
*
* @param customCharsArray
* Characters that should be also added to the cache.
*/
private void createSet(char[] customCharsArray) {
// If there are custom chars then I expand the font texture twice
if (customCharsArray != null && customCharsArray.length > 0) {
textureWidth *= 2;
}
// In any case this should be done in other way. Texture with size
// 512x512
// can maintain only 256 characters with resolution of 32x32. The
// texture
// size should be calculated dynamicaly by looking at character sizes.
// Set the canvas space
Canvas canvas = Texture.getCanvas();
canvas.setWidth(textureWidth + "px");
canvas.setHeight(textureHeight + "px");
canvas.setCoordinateSpaceWidth(textureWidth);
canvas.setCoordinateSpaceHeight(textureHeight);
// Clear the background of the context
Context2d ctx2D = canvas.getContext2d();
ctx2D.setFillStyle("rgba(0, 0, 0, 1)");
ctx2D.fillRect(0, 0, textureWidth, textureHeight);
// Set the context for rendering the characters
ctx2D.setFillStyle("#FFFFFF");
ctx2D.setStrokeStyle("#FFFFFF");
ctx2D.setLineWidth(1.0);
ctx2D.setFont(fontSize + "px " + fontName);
ctx2D.setTextBaseline(TextBaseline.TOP);
// Initialize the position for the loop and the custom characters
float rowHeight = 0.0f;
float positionX = 0.0f;
float positionY = 0.0f;
int customCharsLength = (customCharsArray != null) ? customCharsArray.length
: 0;
int spaceBetween = fontSize / 4;
// This element is for getting the height of the characters
Element div = DOM.createDiv();
div.getStyle().setPosition(Position.ABSOLUTE);
div.getStyle().setProperty("font", fontSize + "px " + fontName); // CHECK
div.getStyle().setProperty("whiteSpace", "nowrap"); // CHECK
RootPanel.getBodyElement().appendChild(div);
// For each character, render to the canvas
for (int i = 0; i < 256 + customCharsLength; i++) {
// get 0-255 characters and then custom characters
String letter = (i < 256) ? String.valueOf((char) i) : String
.valueOf(customCharsArray[i - 256]);
// Get the metrics of the character
div.setInnerHTML(letter);
float charWidth = (float) ctx2D.measureText(letter).getWidth();
if (charWidth <= 0) {
charWidth = 1;
}
float charHeight = div.getOffsetHeight();
if (charHeight <= 0) {
charHeight = fontSize + 1;
}
// Check boundaries
if (positionX + charWidth + spaceBetween >= textureWidth) {
positionX = 0.0f;
positionY += rowHeight + spaceBetween;
rowHeight = 0.0f;
}
// Populate the new object coordinate
FontGlyph charData = new FontGlyph();
charData.width = charWidth;
charData.height = charHeight;
// Set the coordinates of the vertex
charData.imageX = (positionX) / textureWidth;
charData.imageY = (positionY) / textureHeight;
charData.imageX2 = (positionX + charData.width) / textureWidth;
charData.imageY2 = (positionY + charData.height) / textureHeight;
// Update new height values
if (charData.height > fontHeight) {
fontHeight = (int) charData.height;
}
if (charData.height > rowHeight) {
rowHeight = charData.height;
}
// Do we render the text with antialiasing?
if (antiAlias) {
ctx2D.strokeText(letter, positionX, textureHeight - positionY
- charData.height);
}
ctx2D.fillText(letter, positionX, textureHeight - positionY
- charData.height);
// Continue with the next letter
positionX += charWidth + spaceBetween;
// Add the character into the list
if (i < 256) { // standard characters
charArray[i] = charData;
} else { // custom characters
customChars.put(new Character(letter.charAt(0)), charData);
}
}
// Remove the div added for text calculation
RootPanel.getBodyElement().removeChild(div);
// Create the texture from the canvas
fontTexture = new Texture();
fontTexture.setData(canvas.getCanvasElement());
fontTexture.setDimension(textureWidth, textureHeight);
fontTexture.setFlipY(true);
fontTexture.update();
fontTexture.setData(null);
}
/**
* Update the texture object
*/
public void update() {
// Create the id if we had too.
if (id == null) {
id = Renderer._gl.createTexture();
}
// Set the data of the gl texture object
// Set current texture object as active
Renderer._gl.bindTexture(WebGLRenderingContext.TEXTURE_2D, id);
// If generating mipmap is requested, parameter the texture filtering to
// using them and generate mipmaps ...
Renderer._gl.texParameteri(WebGLRenderingContext.TEXTURE_2D,
WebGLRenderingContext.TEXTURE_MAG_FILTER, magFilter.getId());
Renderer._gl.texParameteri(WebGLRenderingContext.TEXTURE_2D,
WebGLRenderingContext.TEXTURE_MIN_FILTER, minFilter.getId());
// Now with the data update.
if (element != null) {
// Generate the mipmap if it's supported in the vram
if (generateMipmap && minFilter.supportMipmap()) {
Renderer._gl.generateMipmap(WebGLRenderingContext.TEXTURE_2D);
}
// Check for non-pot 2 textures
int fWidth = Mathematic.nearestPowerOfTwo(width);
int fHeight = Mathematic.nearestPowerOfTwo(height);
boolean isFlipped = isFlipY;
Element renderElement = element;
// Only render into a canvas resized if the texture is not
// power of 2
if ((width != fWidth) || (height != fHeight)) {
// Set the canvas coordinate
_canvas.setCoordinateSpaceWidth(width);
_canvas.setCoordinateSpaceHeight(height);
// Render the image into the canvas
_context2d.drawImage(ImageElement.as(element), 0.0D, 0.0D,
width, height);
isFlipped = false;
renderElement = _canvas.getCanvasElement();
}
// As opengl texture conventions about image origin is inversed on Y
// axis compared to OS image convention
// we have to flip the Y axis of the image
Renderer._gl.pixelStorei(WebGLRenderingContext.UNPACK_FLIP_Y_WEBGL,
isFlipped == true ? 1 : 0);
// And finaly, set the image pixels data in the texture object
Renderer._gl.texImage2D(WebGLRenderingContext.TEXTURE_2D, 0,
WebGLRenderingContext.RGBA, format.getId(),
WebGLRenderingContext.UNSIGNED_BYTE, renderElement);
}
isUpdated = true;
}