ZIM TextureActives for Interactive Textures

ZIM is a general 2D JavaScript Canvas Framework with many conveniences, components and controls. For a long time we have brought three.js into ZIM to overlay meshes in our 2D world. Now, we have TextureActive that lets us add ZIM to the three.js CanvasTexture. TextureActives pass x and y raycast data into ZIM in place of the pointer events so that any ZIM feature can be used as animated and interactive materials for meshes. An introduction video premieres at https://youtu.be/LbtmzpSh2Co on Thursday, September 7, at 11:45 am EST. Samples can be found at zimjs.com/015 as this was just launched for ZIM 015.

TextureActives can be used for interface panels and HUDS but also to add games, puzzles, interactive art and more to surfaces. ZIM has over 40 components, including editable text, lots of cool features like dragging objects along blobs and squiggles, exciting pens and particle emitters.

The TextureActive system lets you press the T key to toggle to a 2D scrollable tile of all the textures used. This is handy while creating - and can be turned off for the final product. There are currently a series of ZIM Bubbling and Explore videos about TextureActives available at zimjs.com/vids - we hope that you can join us for the premiere of the promo video. Cheers.

NOTE: We have just added TextureActives in VR - please see ZIM TextureActives for VR

Dr Abstract (Dan Zen)

3 Likes

It looks impressive. Thanks for sharing.

(There are some minor glitches related to transparency when TextureActives is used as a Three.js texture.)

1 Like

Thanks, @PavelBoytchev - send us a note, if you have time, about the glitch you spotted. We had not noticed anything in our examples. Cheers.

It is very hard to notice the glitch, as it happens rarely. Sometimes the far part of the curved screen disappears, while it is behind the front part. When I move the mouse one pixel left or right the far side becomes visible again. This might be unrelated to TextureActives itself, as TextureActives only provides the texture. Here is a short video:

Ah yes… we had noticed that too and assumed it is a three.js issue… perhaps it is not - we would see things like that happen in AltpsaceVR too - there is probably an official word for it…

1 Like


We do not see the issue in R149… but we do in R155. We will keep an eye on it and give it a little thought - maybe it is the curved plane code that we used from @prisoner849 - but then again, it is working in R149. Might be worth mentioning it on GitHub issues… will see if it does it with normal textures and then with a static CanvasTexture, etc. See if we can pin it down.

2 Likes

textureactive_hud
We would just like to point out that any of the ZIM components can adjust properties in three.js. In the hud example here ZIM 015 - TextureActive HUD - Code Creativity we change color and animation speed of the mesh with a ZIM Slider and ColorPicker. And in the top corner, the ZIM Tabs animate the OrbitControls / Camera. The ZIM components do not need to be in a hud format, they can also be on panels, on walls, etc.

2 Likes


In this example ZIM TextureActive - Interactive Textures in three.js we show six ZIM components all controlling the rotation of the panel. These are Tabs, Slider, Selector, RadioButtons, Indicator and Stepper. The panel also shows editable text, a button (linking out to UI/UX at ZIM) and a scrollable List of about 40 components - click one to see the docs.

2 Likes


In the same example at ZIM TextureActive - Interactive Textures in three.js we let the user draw on a cube… and drag an object along a path - and much more - check it out!

2 Likes

hello, i have some questions. So i use fabricjs on all of my 3d customizer app, but the problem we’re facing is that the canvasTexture that is rendered was always blurry if we’re using canvas size below 2048. Does this happen also using ZIM?

Also does the ZIM objects has controls like fabricjs does? such as bounding box, transform etc?

Yes to the transform - in the link above there is a transform example at level 3 on the cube. To make this is: new Triangle().center().transform(); You can also specify what to transform, and easily save the transformed state with the TransformManager().

I don’t think images are blurry… in this screenshot we are using a 960x540 for the ZIM Book. It looks basically the same as the image as far as I can tell.

1 Like

Hello, i’m trying ZIM now. https://codepen.io/naonvl/pen/RwvwpOx?editors=0010 i wanna know what it takes to drag around the ZIM objects like i did on threejs+fabricjs using raycast?

I’m planning on creating the same template as i did here https://discourse.threejs.org/t/three-js-fabric-js-but-with-mouse-and-touch-raycast/ but using ZIM

Also this is my demo https://jersey-designer.netlify.app it’s using 1024x1024 fabricjs canvas as canvas texture but it looks blurry

image

I wanna know if it’s happening on ZIM too

1 Like

The example you were using was an earlier experiment in ZIM 014. Here is an update using TextureActive in ZIM 015 https://codepen.io/zimjs/pen/qBgBxjP

1 Like

that is really cool! i’ll explore more, but i have question is there a setting to set the texture size to 2048?

I think setting the TextureActive() width and height to whatever size you want the texture would do it.

Just wrote an article on Medium about TextureActives and linked back here: 2D Interactivity in 3D. Imagine that you are in VR and on one… | by Dr Abstract | Dec, 2023 | Level Up Coding

We have launched a video about using TextureActives in Svelte, React, Angular and VUE.

TextureActive Studio has just launched showing 35 examples of 2D interactivity in 3D. See TextureActive Studio - 2D Interactivity in 3D with ZIM in three.js. Let us know what you think and if you have any questions, feel free to ask here or at the ZIM Forum

image

2 Likes

A few different types of 2D progress bars that you can use in your 3D…

Z_QV8RQ