ZIM TextureActives for Interactive Textures

Resources
, , ,
1

textureactives
textureactives1269×640 249 KB

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)

2 Likes
2

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
3

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

4

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:

5

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
6


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.

1 Like