Jump to content

Editing an image in real time?


joshcamas
 Share

Recommended Posts

Hello guys!

 

I've been working on a project that works as a terrain editor. One large problem however, is editing the textures in real time - aka texture painting.

 

Is this possible in the browser? Is there any code somewhere that has this working at all?

 

Thanks! :D

Link to comment
Share on other sites

You can use DynamicTexture for that:

var texture = new BABYLON.DynamicTexture("dynamic texture", 512, scene, true);texture.hasAlpha = true;var textureContext = texture.getContext();var size = texture.getSize();var text = "Hey I can write text on my texture!!";textureContext.clearRect(0, 0, size.width, size.height);textureContext.font = "bold 120px Calibri";var textSize = textureContext.measureText(text);textureContext.fillStyle = "white";textureContext.fillText(text, (size.width - textSize.width) / 2, (size.height - 120) / 2);texture.update();
Link to comment
Share on other sites

oh, sweet! :D Thanks!

 

EDIT: Hmmmm....

 

How does one use this, other than drawing text? :D

 

EDIT 2: OHHHH the texture is like a canvas? So you can draw images like a canvas!? If so, that's amazing - I once worked on a 2D Javascript engine! Reuse code time! Huzzah!

 

When I load a image using the assets manager:

this.binaryTask = Game.assetsManager.addBinaryFileTask("binary task", "../Assets/map.png");this.onSuccess = function (task) {	this.testImage = task.data;}

And then, after everything is loaded, use the drawImage() function on it's context, it gives this error: "Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. "

 

:( Is task.data a image, or not?

Link to comment
Share on other sites

Hmmm....

 

I can't seem to get it working:

var imageTask = Game.assetsManager.addImageTask("image task", "../Assets/map.png");imageTask.onSuccess = function (task) {	this.testImage = task.image;	console.log("worked!");}		imageTask.onError = function (task) {	console.log("error");}

Nothing gets logged! :o

 

Also, one nice feature for the assetsmanager could be if there is nothing to load just run onFinish()

:)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...