Texture problem with detached DOM elements

[jgottero]

When you create a texture from a DOM element, for example a canvas, if this element is not attached to the document, the texture will not work.

The reason is texture size is read from the element's offsetWidth/offsetHeight properties, and these properties are always 0 for DOM detached elements; hence texture size will be (0,0).

            boolean isImagePowerOfTwo = Mathematics.isPowerOfTwo( image.getOffsetWidth() ) 
                    && Mathematics.isPowerOfTwo( image.getOffsetHeight() );

(NB: I pasted these few lines of code but same problem in others methods.)

Three.js read width/height properties instead, which is nice because you must fill these properties when you create a canvas to use it as a texture; thus you dont need to attach the canvas to the document.
One possible solution would be to first read width/height properties, then having a fallback on offsetWidth/Height (I can provide a patch if you wish and if you agree on this solution).

[thothbot]

Can you provide your patch. I'll have to take a look at it.

[jgottero]

Here is my texture generation code:

    private Texture createTextTexture(double size, double margin, String text, Color color, Color backColor) {
        if (text == null)
            return null;
        Canvas canvas = Canvas.createIfSupported();
        Context2d context = canvas.getContext2d();
        double width = size + margin;
        double height = size + margin;
        canvas.setCoordinateSpaceWidth((int) width);
        canvas.setCoordinateSpaceHeight((int) height);
        context.setFont(size + "pt Arial");
        context.setFillStyle("#" + getHexString(backColor));
        context.fillRect(0, 0, width, height);
        context.setTextAlign("center");
        context.setTextBaseline("middle");
        context.setFillStyle("#" + getHexString(color));
        context.fillText(text, width / 2, height / 2);

        // Without the fix, this line is mandatory, otherwise the texture wont display
//        RootPanel.get().add(canvas, -10000, 0);

        Texture texture = new Texture(canvas.getElement());
        texture.setNeedsUpdate(true);
        return texture;
    }

Example usage:
createTextTexture(10, 20, "0", new Color(0xaaaaaa), new Color(0x202020));

[thothbot]

This is very nice solution. I suppose we should create TextTexture class in Parallax for this. What do you think?

[jgottero]

I think it would be a nice addition, as rendering text is easy with canvas and well supported by browsers, but not everybody will have the idea to use it.
There are a few choices to consider:

• Should it handle multiline text (this is not builtin in canvas but can be achieved with canvas' measureText())
• Should the texture size be computed automatically based on font size and margin, as a power of 2

I'm a WebGL beginner and I wouldn't be able to tell what are the most common use cases for text textures, but the class should be easy to extends to cover custom use cases.