Animated Textures - CopperLicht Forum

Ambiera Forum

Discussions, Help and Support.

	Ambiera Forum > CopperLicht
	Animated Textures

Totenkopf Guest
Quote
2013-02-10 07:18:14

Yeah,
it's me again. Hope, i'm not disturbing too much :D

So, i want to create an animated commercial board, which switches some different commercials by the time. So first think i have to think about, was an animated gif as the texture. But this won't work, it just shows the first frame of the gif as used texture. Is there a way to use animated gifs as animated texture?

So second thing i thought about was the "CL3D.AnimatorAnimateTexture". But i have some questions for this:
- For a smooth change i need somethin like 4 or 5 frames for a change. so i need 5 frames per second, which means 10 second the same texture needs 50 frames with the same texture. Does CopperLicht load the texture each frame even if the texture is the same? This would result in way too much ressource wastage...
- Is there an opportunity to load all textures before the animation, so the Animator will change the texture without loading time?
- If yes, how do i realize this?

Thank again for your help :)

Totenkopf

niko Moderator
Quote
2013-02-11 20:02:49

No, you need to use separate images. Unless you find some way to maybe load an animated .gif using JavaScript and extract the images out of it, maybe this is also possible.
For loading: The texture manager has a method to test if all textures are loaded already.

Totenkopf Guest
Quote
2013-02-12 03:07:20

" For loading: The texture manager has a method to test if all textures are loaded already. "
That sounds great =)

Thanks

badcommandorfile Registered User
Quote
2013-04-08 04:22:43

Hi,

In a related question, is there a way to modify a texture once it has been loaded?

I want to use a single texture on a billboard node, but tint it red/blue/green/etc for different teams/players.

Is there a way to do this without having to make multiple texture files and force the client to download all of them? I may have to make dozens of textures which are all essentially the same.

Thanks, and thanks for making CopperLicht such a great tool!

niko Moderator
Quote
2013-04-10 06:59:04

Hm, currently there is no public interface for it, sorry. But since it is JavaScript, you can use WebGL itself easily to do this anyway:
For a texture object, you can use getWebGLTexture() to get the WebGL texture from it. And from the renderer interface, you can call

var gl = renderer.getWebGL();

to get the WebGL interface object. Then you can modify the texture as you like.

badcommandorfile Registered User
Quote
2013-04-14 11:41:19

Thanks for the advice niko!

I started to look at modifying the GL.TEXTURE_2D handle directly through the Renderer, but then realised there was an easier way which fits beautifully within the existing CopperLicht framework.

First, create a temporary canvas element (this won't be displayed unless it's added to the DOM):

var tempcanvas = $('<canvas id="tempcanvas"/>').get()[0];

Then load the base image and draw the intermediate texture on the canvas:

var tempimage = $('<img id="tempimage" ' + 'src="' + imgsrc + '" ' + 'width = ' + w + ' ' + 'height = ' + h + ' ' + '/>').get()[0];
var ctx = tempcanvas.getContext('2d');
ctx.drawImage(tempimage, 0, 0, tempimage.width, tempimage.height);

You can modify the contents of the canvas as you see fit! Change the colour, crop it, add decals, whatever!


for (var y = 0; y < h; y++) {
     for (var x = 0; x < w; x++) {
        var pix = ctx.getImageData(x, y, 1, 1);
        //modify the pixel with ctx.putImageData()
     }
}

The final step is the most important - use toDataURL() to convert the current canvas image into a url:

var newsrc = tempcanvas.toDataURL('image/jpg');
buf.Mat.Tex1 = engine.getTextureManager().getTexture(newsrc, true);

I'm currently writing a wrapper for CopperLicht for the ScriptSharp project, so I've put an example up at https://github.com/badcommandorf...

Relevant StackOverflow for more information http://stackoverflow.com/questio...

niko Moderator
Quote
2013-04-14 17:31:21

Ah, cool :)

Create reply:

Possible Codes

Feature	Code
Link	[url] www.example.com [/url]
Bold	[b]bold text[/b]
Image	[img]http://www.example.com/image.jpg[/img]
Quote	[quote]quoted text[/quote]
Code	[code]source code[/code]

Emoticons