Back to the Shapespark home page

Text onto a Texture - feature request

In hopes of gradually making these scenes more dynamic and interactable, thought I’d ask if any one can think of a way to render text onto an object.

I know there are some scripts on github to do this through <div>'s, but I’m interested in projecting this onto a texture (thus the feature request on the title).

I see this as an extension that would allow us convert an object into a canvas that can receive some text, either inputted from the editor or assigned at runtime through some sort of selector.

Thoughts?

Have you considered using the browser canvas API to create a canvas with some text? For example this function: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText

This is what Shapespark does internally to create textures with texts that are used on trigger sprites and spheres.

1 Like

Hi @jan, this method sounds very interesting.
hope this actually means that you can place dynamic text inside the scene?

how can we do that?

thanks

I’ve experimented a bit with this and it turns out Shapespark JavaScript API for creating textures out of HTML image element does not work with HTML Canvas elements. I was able to do it using an internal Texture API. A demo is here: https://demo.shapespark.com/api-texture-with-editable-text/

If you input a text in the upper left corner, the rug material will show this text. The code for it is here: https://gist.github.com/wrr/2246328455a010c5900f59eddacd7ec8
It uses internal APIs, but if you find it useful we can expose it a public API for it.

Keep in mind that such texture changes are local. If you do them during a video meeting, other meeting participant won’t see the changes. We have recently release a screen sharing functions that allow to present text or any other screen content on textures within a video meeting, so you can use this if you need to share the changes.

1 Like

Is it possible to load the texture from an external source? You then could create a wall with the latest twitter messages or update content from a text file based description of a product.

This is for loading HTML Canvas into a texture. Browsers have APIs to draw or write on a canvas, but it is not possible to load page content onto a canvas. You can load text descriptions from an external file and write them to a canvas. If Twitter perhaps has some API that could be used to load text of tweets, you could also write them into a canvas, but loading a whole tweeter stream page would not be possible.

Canvas text output API is quite low level, you need to take care of all the formatting and ensure texts are not too long, so they do not cross canvas borders. For longer or fancy formatted texts proper formatting will be challenging.

1 Like