X3D OFF file viewer

[Wagyx Xygaw]

Hello there,

Today, I have been working on a POC for a simpler-to-use viewer for regular and Antiprism OFF files that you can put within your webpage.
I have set up a github project for it: https://github.com/Wagyx/x3d-off-viewer

I think this solves the issue Roger had with my previous viewer if I remember correctly : how to embed the viewer within the webpage. The old one had to live within an iframe which was not great, this one uses the x3d-canvas tag.

I kind of thought that I could/would address some of the problems related to the old viewer but I kinda dropped the project, sorry for that.
I hope this new one is better. If not please refresh my memory with what are the needs and problems. I am feeling motivated by the new (for me) technology. I don't know if there is a solution for all of them but at least we can start the discussion.
Or maybe these topics are already on another thread.

Also, I see that Roger was already using X_ite to display VRML files. Neat !

[Roger Kaufman]

Hi Wagyx,

I tried this and I get 4 windows that say loading but all are black screens. Also how you intend to convert off to vrml since x_ite doesn't take OFF format.

You gave me an idea. I have a cube with 5 white faces and one face with 50 percent transparency. (attached)

antiview wincube.off

With the simple off viewer all the faces will be opaque because face 0 has an alpha value of 1. Since its the first alpha value encountered the rule we made is the whole model will be have that alpha value.

offview wincube.off

However, if it is first converted to vrml and then send to x3dview, the one face becomes transparent.

off2vrml wincube.off | x3dview

Caveats:
antiprism has to be installed and off2vrml accessible for someone to be able to do this.
various changes to the display like black edges, edge diameter, background color, etc, have to applied with off2vrml first.
the loss off a rotating images

If you don't have them the webview project is here.

Scott, if you aren't in the google group you are welcome here!

Roger

--
Antiprism Site: http://www.antiprism.com
---
You received this message because you are subscribed to the Google Groups "antiprism" group.
To unsubscribe from this group and stop receiving emails from it, send an email to antiprism+...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/antiprism/d6f17a65-f465-4dd2-8b8b-37f63b276bb7n%40googlegroups.com.

[Roger Kaufman]

Hi Wagyx,

(an afterthought)

Caveats:
antiprism has to be installed and off2vrml accessible for someone to be
able to do this.
various changes to the display like black edges, edge diameter,
background color, etc, have to applied with off2vrml first.
the loss off a rotating images

...

Additionally: calling the off viewer from a web page can't execute
off2vrml so it wouldn't be able to send it parameters.

So the idea of using off2vrml from the command line only would be useful
from the desktop and not a good solution for the online models.

Roger

[Wagyx Xygaw]

Hi Roger,

If you are seeing black screens, that's because you forgot to run a local web server.
I need it to fetch the off files though x_ite does not seem to need one to run.

I am not converting the off file to vrml file but directly to the x3d format in a sense.
X_ite does not support OFF format because it is missing a parser for it,
today I'll try to see how that can be integrated properly. It may also solve the need for a web server.

I thought the rule was to make the faces invisible only when alpha was zero
(I actually remove them from the render because I could not set opacity per face),
same for the edges and vertices.
Anyway, If I can manage to integrate the loader into x_ite,
I could figure out how the opacity is handled for vrml files and do the same with off files.

Wagyx

[Roger Kaufman]

Hi Wagyx,

On 5/2/2024 3:56 AM, Wagyx Xygaw wrote:
> I thought the rule was to make the faces invisible only when alpha was
> zero
> (I actually remove them from the render because I could not set
> opacity per face),
> same for the edges and vertices.

Sorry, I was mistaken. The rule is, if the alpha value is 0 then don't
display that element.

Transparency for faces (only) is controlled for the whole model with a
parameter which overrides all alpha values for all the faces.

If the alpha value was used for all elements, the transparency would be
controlled by the model and the global transparency parameter would no
longer be needed. This would be the ideal situation.

Roger

[Wagyx Xygaw]

Hi Roger,

I have managed to insert my AntiprimsOffLoader into the x_ite framework so it means that you can use the <x3d-canvas src="your-off-file.off"> </x3d-canvas> on your webpage like you would with vrml files.
This is shown in the x_ite-off-viewer.html that I have added to the github repo.

Also transparency is fully supported for faces, edges and vertices. Let me know if there are still issues in the expected behavior.

Good night,

[Wagyx Xygaw]

I have updated the viewer with the latest features, you can control the radii of the vertices and edges, the rotation and the background color now.

[Wagyx Xygaw]

But I have a problem with transparency and double sided faces:
The x3d-off-viewer (no transparency) shows

the x_ite-off-viewer (with transparency set to 1) shows

Antiview shows the same as the  x3d-off-viewer.

[Roger Kaufman]

Hi Wagyx,

On 5/3/2024 12:27 PM, Wagyx Xygaw wrote:
> I have updated the viewer with the latest features, you can control
> the radii of the vertices and edges, the rotation and the background
> color now.

I have made a beta test page using the x_ite version that is roughly
like the original test page. The displayed models are what is changed,
the links go to the current standalone viewer.

Simple-Off-Viewer Test Page
https://www.interocitors.com/polyhedra/offview/off_test/index.html

https://www.interocitors.com/polyhedra/offview_new/off_test/index.html
x_ite-off-viewer Test Page (beta)


Notes on the beta page:
- Are intersecting faces a problem? That may be why solid faces aren't
coming out right. Perhaps that might also be something going on per your
second note?

- The simple off viewer had scaling that worked nicely and could be used
here.
- edge and vertex sizes mirror the simple off viewer exactly.
- UC15 with line edges, the edge and vertex size part works.
useBaseColor=false is not implemented.
     useBaseColor made the edges and vertices black. Either that could
be implemented or have an element color override like edgeColor="a
color" vertexColor="a color" (for consistency) face_color="a color".
     That would allow elements to be any color. What do you think makes
more sense?
- UC15 without edges & UC15 edges only
     edgesActive="false" verticesActive="false" facesActive="false" are
not yet implemented
- changes in behavior
     the models spin can be "thrown" and keep spinning like vrml can
do. This is great! (Antiview can do this if the 's' key is used)
     color values were hexadecimal format, now they are rgb format

> Also transparency is fully supported for faces, edges and vertices.
> Let me know if there are still issues in the expected behavior.
>

- Ivanov Q5 excavated by J92 Live, is exactly right! The faces that are
set as transparent are the only ones transparent. The interior faces are
solid. Bravo!
- UC15 (50 percent transparent) is a new OFF file which has faces, edges
and vertices at 50 percent transparency showing that they all are
displayed correctly as such.

Looks great so far! Is the "old way" going to be developed more or

Is the x3d-off-viewer.html just an example or are you developing more
than one method?

Roger

[Wagyx Xygaw]

Hello Roger,

Thanks for putting up a beta test page and giving feedback.

My goal is to experiment with the technology to see if it can cover all the requirements we have in terms of settings, rendering and webpage integration.

Let me redo the list of things that are important so that we can discuss (you can add to the list) :

- load and display models of any size fast. "Size" meaning the number of primitives : faces,edges,vertices and "fast" means no more than a few seconds for ~10000 primitives is okay (that's an order of magnitude that I can reach with 3JS).

- handle transparency of faces, edges and vertices in regular and self intersecting cases (does self intersecting case mean that two faces cross themselves or that a pentagon can be a pentagram ?

- have colors/alpha per primitive and not only per category of primitives (that's usually easy)

- control some of the aspects of rendering like changing the colors/alpha globally, animate (rotation), the size of the geometry that represent some primitives (vertices and edges)
- be simple to add to a webpage just adding a script or two and using a specific tag (an iframe for the JS viewer or an x3d-canvas for the new stuff)
- have multiple models displayed on the same webpage at once without your computer burning into fire

- have a way to go and back from a full screen view (without leaving the page preferably)

- other stuff ...

So for the moment, I am testing how well this new rendering framework X3D/X_ITE can address these items.
As you may know, vertices are rendered by putting a little sphere in their place and edges uses a cylinder,
this additional geometry lives in the scene and comes at a cost.
The faces are a single geometry where I can input a color/alpha per face, so it's fine apart for the issue with self intersecting models.

Here are my notes regarding rendering color/alpha vs loading and rendering performances:
- Regular way (used on the beta page) : A shape per vertices and edges (meaning a material, transform and geometry per element).
     * pros: color and transparency seems to be rendered correctly but for self intersecting models.

                  Plus this is using only standard X3D.
     * cons: very slow to load and render when the number of additional geometry created for the vertices and edges is large (>500).
- InstancedShape for vertices and edges (same material and geometry for all element but different transforms):
    * pros : fast to load and render
    * cons: only a single color/alpha for vertices and edges (the material is the same for all instances of the same category).
                  Not using standard X3D elements.
- Merged shape (the geometry of all elements are merged into one big geometry, same material but colors per face):
    * pros: fast to load and render and the color/alpha are per primitives.
                 Plus this is using standard X3D.
    * cons: transparency is completely off in some simple cases (reversed rendering order though alpha is 1)

I hope you get a good view of the situation now. I also did that for myself to clarify, summarize all my testing. I can commit multiple parsers if you would like to test these in your webpage.
I have disabled the radii settings for now. I've noted your comments on the settings I'll be working more on them later.

Do you prefer having hexadecimal, integers or normalized values for colors ? All of them ?

If you consider the renders by Antiview to be the reference (for color, alpha, sizes, lighting, view...), could you please add screenshots as another webpage ?
I am doing it on my computer to check my improvements and errors.

I am not giving up on the 3JS viewer neither. We know that it has some constraints on some aspects (transparency and webpage integration mostly).

Have a good night,

[Roger Kaufman]

Hi Wagyx,

On 5/4/2024 3:53 PM, Wagyx Xygaw wrote:
> Thanks for putting up a beta test page and giving feedback.

Just a short note. I have renamed the test pages so they don't get mixed
up and the old url's won't work.

The original simple off viewer:
https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/simple-off-viewer.html

The new one:
https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-off-viewer.html

And a try at the x3d version:
https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x3d-off-viewer.html


Be careful having more than one page open at at time because it is
running out of webgl instances.

For the new one, all the models look the same as the simple off viewer
except for the scale. If the scale was the same I think the models would
look the same as the simple-off-viewer (except for the transparent uc15
which is a slightly different model).

The x3d version has the scale situation as well, but I think it runs out
of webgl instances so the first box is blank (for me). Is this like the
simple off viewer? The parameters don't seem to do anything.

> Do you prefer having hexadecimal, integers or normalized values for
> colors ? All of them ?

In antprism we take colors as r,g,b,a or hexadecimal... from the help
(hex doesn't need to be capitals but it takes them).
A colour value can be ... a value in
form 'R,G,B,A' (3 or 4 values 0.0-1.0, or 0-255) or hex 'xFFFFFF'

Note that rgb also allows for the alpha value. I don't think we can do
that now but it would be useful.

A global alpha transparency override might be useful as well, as it
wouldn't change current colors. But if that were don't it would be on an
elemental basis like faceTransparency , edgeTransparency,
vertexTransparency. I know we just took that out so I'll let that up to
you as you know the difficulty level for coding it. If not, we could
just document that transparencies are controlled by the model only.

Roger

[Roger Kaufman]

Hi Wagyx,

On 5/4/2024 3:53 PM, Wagyx Xygaw wrote:

- have a way to go and back from a full screen view (without leaving the page preferably)

I wanted to mention that for x3d-canvas, Fullscreen is already a popup menu item on window hover, right mouse button.

Also there is a way to make a Fullscreen Button which I use. I think this is what they are doing internally with the x_ite system. See here.

https://www.interocitors.com/polyhedra/offwin.html?url=x3d-off-viewer/off_test/uc15.off&rotationSpeed=0.5&rotationDirection=0,1,0

Look at the page source and there is the code with where I got the code snippet.

<!-- https://idev.games/post/fullscreen-button-for-your-embedded-games -->
function goFullscreen(id) {
    var element = document.getElementById(id);
    if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    }
}

Any id can be made to go full screen. The button statement is where winframe is in this case the iframe for the simple-off-viewer window

<button class="button" onclick="goFullscreen('winframe'); return false"><font=1>^Fullscreen</font></button> I also do this with the x_ite viewer for X3D/VRML. But unlike the simple-off-viewer there isn't a '5' keyboard press to refresh the image. F5 will refresh the whole page, but when I send a x3d model from the command line using the x3dview python app, the temporary http server is no longer running and so the model will report not found. The way to refresh the model in this example is mouse hover, right mouse button, viewpoints, default_camera_0. But camera viewpoints are user defined so they won't be consistently named. For example in Stella vrml the Telephoto viewpoint is what refreshes those vrml models. https://www.interocitors.com/polyhedra/x3dwin.html?url=x_ite-x3d-browser/x3d_test/Ivanov_Q5_excavated_by_J92.wrl Roger

[Wagyx Xygaw]

Thanks for the information Roger, I'll try it as soon as I can.

Also, I have committed changes to the git repo for the x_ite viewer.

I think I have fixed the scaling issue and I have added attributes to the canvas.

Moreover, I have splitted the Parser into 4 different ones so you have 4 different versions of the page.
The readme explains how to setup the page correctly between linking the script and commenting code.

[Roger Kaufman]

Hi Wagyx,

On 5/6/2024 1:56 PM, Wagyx Xygaw wrote:
> Thanks for the information Roger, I'll try it as soon as I can.
> Also, I have committed changes to the git repo for the x_ite viewer.
> I think I have fixed the scaling issue and I have added attributes to
> the canvas.
> Moreover, I have splitted the Parser into 4 different ones so you have
> 4 different versions of the page.
> The readme explains how to setup the page correctly between linking
> the script and commenting code.

Thanks for pointing that out. In light of that I made 4 different test
pages for the four methods. Which js is set is the only difference
between the 4.

1 TooManyShapes
2 InstancedShape
3 TriangleSet
4 2DSets

https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-off-viewer1.html
https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-off-viewer2.html
https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-off-viewer3.html
https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-off-viewer4.html

Scale is still  an issue, but you can zoom out to see them.

Roger

[Wagyx Xygaw]

Thank your very much Roger.
I just thought that I could have one instance per color so that as long as there is not too many different colors, it should be fine though I don't have a model to test.

I'll be working on that then and also this wrong setting on the camera.

Amongst the four, which one do you think works the best for now ?

[Roger Kaufman]

Hi Wagyx,

On 5/7/2024 1:34 PM, Wagyx Xygaw wrote:
> Thank your very much Roger.
> I just thought that I could have one instance per color so that as
> long as there is not too many different colors, it should be fine
> though I don't have a model to test.
> I'll be working on that then and also this wrong setting on the camera.
>
> Amongst the four, which one do you think works the best for now ?

1 TooManyShapes
Works best

2 InstancedShape
Works fastest, sacrifices edge colors

3 TriangleSet
About the same speed as 1, however the cylinders would need higher
resolution as the rectangles can be seen

4 2DSets
Fast but wonky

Also I noticed the backgroundColor is not changing. I only have one
example where I set it to black and I had to zoom out to see it was
still "cccccc" color

Roger

[Wagyx Xygaw]

Hi Roger,

I have split the different methods into separate html and JS files so that they are independent now.
I have fixed the scaling.
I have added a new way to create the scene called MultiInstancedShape. Fast to load, to render and with all the colors and parameters supported.

I think it is the one to keep so let me know what you think.
Do you still have an issue with backgroundColor="000000" ?

[Roger Kaufman]

Hi Wagyx,

On 5/8/2024 2:20 PM, Wagyx Xygaw wrote:
> I have split the different methods into separate html and JS files so
> that they are independent now.
> I have fixed the scaling.
> I have added a new way to create the scene called MultiInstancedShape.
> Fast to load, to render and with all the colors and parameters supported.
> I think it is the one to keep so let me know what you think.
> Do you still have an issue with backgroundColor="000000" ?

A very quick! note

I made 7 test pages corresponding to what your names. I reused your
index page so we don' have to list all the urls.

Not all the pages are working, specifically the x3dom ones.

All the pages complain about "modifyOff" not found. Maybe this is obsolete?

I think the background color is working.

The MultipleInstancedShape page seems very good. You can compare these here.

Simple off viewer test page for reference.

https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/simple-off-viewer.html

Roger

[Wagyx Xygaw]

Thanks Roger,

You forgot to include the link to the index page but I have managed to find it: https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/index.html

The x3d pages use a different tag than the x_ite pages now and there is no modifyOff function in the JS script.
You should use <x3d filename="./off/U1.off" vertexRadius="0.1" edgeRadius="0.1" ><scene></scene></x3d>

They also don't support modifying other parameters than the radii.

I don't plan on adding those parameters nor integrating the off parser more into the x3dom library apart from the vanilla one maybe.

Yes, the MultipleInstancedShape looks great !

[Roger Kaufman]

Hi Wagyx,

On 5/8/2024 5:56 PM, Wagyx Xygaw wrote:
> Thanks Roger,
> You forgot to include the link to the index page but I have managed to
> find it:
> https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/index.html
> The x3d pages use a different tag than the x_ite pages now and there
> is no modifyOff function in the JS script.
> You should use <x3d filename="./off/U1.off" vertexRadius="0.1"
> edgeRadius="0.1" ><scene></scene></x3d>
> They also don't support modifying other parameters than the radii.
> I don't plan on adding those parameters nor integrating the off parser
> more into the x3dom library apart from the vanilla one maybe.
>
> Yes, the MultipleInstancedShape looks great !

I was in a hurry creating pages yesterday and was running out of time.

Yes the link was forgotten, but I'm glad you found it!

https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/index.html

> All the pages complain about "modifyOff" not found. Maybe this is
> obsolete?

only x3d pages had this error.

I fixed some problems in the two x3d pages. It wanted "https" in the
links. But I'm not getting any images and there is an error in the js
code. I might not be able to get away with how I do it there.


The x_ite pages would as expected for their particular viewer. I had to
fix the background color hex code on a few pages and so it works ok now.

In the package some of the off models referenced in the package test
pages are missing. wincube I had somewhere, geo_t20_20 was easy to
create (off_util geo_t20_20 > geo_t20_20.off)
wincube.off
geo_t20_20.off


Are you planning to obsolete the simple-off-viewer?

The x_ite view for vrml is rectangular. However, I will retain the
square window for my OFF standalone viewer when I switch to the new
package. e.g this windows view will still be square

https://www.interocitors.com/polyhedra/offwin.html?url=simple-off-viewer/off_test/uc15.off&transparency=0.5

On the full screen view we had an info icon on at the bottom left. I
wonder if this will still be possible. e.g.

https://www.interocitors.com/polyhedra/offview.html?url=simple-off-viewer%2Foff_test%2Fuc15.off&transparency=0.5&edgesActive=true&facesActive=true&verticesActive=true&useBaseColor=true&vertexRadius=0.03&edgeRadius=0.02&backgroundColor=cccccc&rotationSpeed=0&rotationDirection=0,1,0

Roger

[Roger Kaufman]

Hi Wagyx,

On 5/9/2024 3:32 PM, Roger Kaufman wrote:
>
> The x_ite view for vrml is rectangular. However, I will retain the
> square window for my OFF standalone viewer when I switch to the new
> package. e.g this windows view will still be square
>
> https://www.interocitors.com/polyhedra/offwin.html?url=simple-off-viewer/off_test/uc15.off&transparency=0.5
>
>
> On the full screen view we had an info icon on at the bottom left. I
> wonder if this will still be possible. e.g.
>
> https://www.interocitors.com/polyhedra/offview.html?url=simple-off-viewer%2Foff_test%2Fuc15.off&transparency=0.5&edgesActive=true&facesActive=true&verticesActive=true&useBaseColor=true&vertexRadius=0.03&edgeRadius=0.02&backgroundColor=cccccc&rotationSpeed=0&rotationDirection=0,1,0
>
>

On this page I made links to a beta window view using MultipleInstance...

https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-antiprism-off-viewer-MultipleInstancedShape.html

Proof of concept really. Anywhere you see:

x_ite-off-viewer Live Window

It will open the windowed viewer for that model.

I'll work on the direct full screen link tomorrow. I noticed the help
icon was placed via html before, so this might also work here. I will see.

That is all for tonight.

Roger

[Roger Kaufman]

Hi Wagyx,

On 5/9/2024 10:07 PM, Roger Kaufman wrote:

This page now has all the links go to new beta pages for the window and
full screen views of the models.

https://www.interocitors.com/polyhedra/x3d-off-viewer/off_test/x_ite-antiprism-off-viewer-MultipleInstancedShape.html

A link to the beta live window viewer

https://www.interocitors.com/polyhedra/offwin.beta.html?url=x3d-off-viewer/off_test/uc15.off&rotationSpeed=0.5&rotationDirection=0,1,0

For the full screeen....

I have the info icon working and I've encapsulated all the code plus the
icon for the info button under x3d-off-viewer/info. If you want to put
that in the project I can zip up the directory and send it to you.

You can click on the info icon to see if it works. Here's some of the
links...

https://www.interocitors.com/polyhedra/offview.beta.html?url=x3d-off-viewer/off_test/Ivanov_Q5_excavated_by_J92.off

https://www.interocitors.com/polyhedra/offview.beta.html?url=x3d-off-viewer/off_test/uc15.off&vertexColor=000000&edgeColor=000000&vertexRadius=0.002&edgeRadius=0.002

https://www.interocitors.com/polyhedra/offview.beta.html?url=x3d-off-viewer/off_test/uc15_transparent.off

Roger

[Wagyx Xygaw]

Very nice ! Thank you Roger.

Today I have worked on the 3JS viewer where you can multiple scenes on the same page, no iframe involved and it works !

It is on the Github repo for the simple-off-viewer. The names of the attributes have changed a bit since I have discovered the data-* naming system in the html doc.

I got many issues with CSS styling with the z-index, so look into that if things are not working.

Before going further, I want to try adding it to my webpages since I have voxels models that I would like to show in a new post.

Wagyx

[Roger Kaufman]

Hi Wagyx,

On 5/11/2024 2:45 PM, Wagyx Xygaw wrote:
> Today I have worked on the 3JS viewer where you can multiple scenes on
> the same page, no iframe involved and it works !
> It is on the Github repo for the simple-off-viewer. The names of the
> attributes have changed a bit since I have discovered the data-*
> naming system in the html doc.
> I got many issues with CSS styling with the z-index, so look into that
> if things are not working.
> Before going further, I want to try adding it to my webpages since I
> have voxels models that I would like to show in a new post.

What is you plan for deployment? Will it be in x3d-off-viewer or is that
just for testing?

I worked a bit more on the x3dom pages and I've gotten the simple one to
work but the antiprism version won't display any model but there are no
errors. I will probably remove these pages from my test.

I've noticed for the x_ite displays there is no camera views listed.
Without a camera view there is no way to reset the models. Are you
planning to add a default camera view? I wonder if it can be controlled
with a keypress. So far in the helps I still say '5' can do it but if
that isn't possible I will have to remove that from the help.

I was looking this up and found x_ite's default viewpoint here.

https://create3000.github.io/x_ite/tutorials/controlling-the-viewpoint/

Roger

[Wagyx Xygaw]

Hi Roger,

Here is an example of how to make it work, though since it is part of an article in my blog, the links to the necessary css and js are a bit out of place.
https://asliceofcuriosity.fr/blog/posts/geometry15.html

[Wagyx Xygaw]

Hi Roger,

Here is an update on the multi Three.js viewer.
- I have managed to add full screen capability to the viewer by double clicking on the models or by pressing F. It may be a bit unpractical because of some z-index, so links in your page may not be clickable unless you set their z-index to 1.

- I have changed the attributes name, they are the same as with the x_ite viewer but in snake case and prepended with data-

- I think I have fixed the transparency issue, the idea was the same as for the x_ite viewer, just create multiple instances: one for each existing transparency value and none if the transparency is zero.

I have updated my previous webpage so that people can try it.

[Roger Kaufman]

Hi Wagyx,

On 5/19/2024 5:50 AM, Wagyx Xygaw wrote:
> Hi Roger,
> Here is an update on the multi Three.js viewer.
> - I have managed to add full screen capability to the viewer by double
> clicking on the models or by pressing F. It may be a bit unpractical
> because of some z-index, so links in your page may not be clickable
> unless you set their z-index to 1.
> - I have changed the attributes name, they are the same as with the
> x_ite viewer but in snake case and prepended with data-
> - I think I have fixed the transparency issue, the idea was the same
> as for the x_ite viewer, just create multiple instances: one for each
> existing transparency value and none if the transparency is zero.
> I have updated my previous webpage so that people can try it.

Sorry, I'm away and unable to try this immediately.

Soon I will alter one of my beta test pages to try this viewer. I have
noticed that the '5' key does a reset. Since I was going to ask for
this, this is good!

Have you given any thought of being able to override the elements alpha
(transparency) value? If this were the case, one could cause elements to
be inactive by making the value 0, so that the boolean active variables

would no longer be needed.

What is the future of the previous methods? Will development on
x3d-off-viewer end? (It may be that it adds nothing that we already have)

Roger

[Wagyx Xygaw]

Hi Roger,

No worries, I was pretty busy with other things myself. Actually, you can already override the alpha in the element global color.
I have kept the boolean active variables because they directly set the material and the engine might optimize fully

transparent objects by not even rendering them which would be great for very large models though this is a guess of mine.

Regarding the other methods (x3dom and x_ite), no further development is planned.

Pretty much all the testing I wanted to do is over.

They are functioning "well" (with the known limitations) and may be a good and simple solution for other people out there.

I might change the names of the variables to be the same across the viewers though.

As you stated, the threejs multi viewer seems to be working fine.
It is up to you to see which one fits your needs the best.
Also, let me know if you have trouble with the z-index thing and the full screen.

[Roger Kaufman]

Hi Wagyx,

On 5/30/2024 5:16 PM, Wagyx Xygaw wrote:
> No worries, I was pretty busy with other things myself. Actually, you
> can already override the alpha in the element global color.

This is true, however one must specify a color to do it which overwrites
the existing color. e.g. data-face-color="#ffffffcc" will make the faces
transparent white, but if the faces had different colors they are
overwritten.
I researched this and there is no current way to specify only parts of
the hex string. For example "#xxxxxxcc" does not work because the x's
are considered 0 so the color is black (or maybe the color isn't even used).
That is ok, I can continue to document that alpha values are defined in
the off file.

> I have kept the boolean active variables because they directly set the
> material and the engine might optimize fully
> transparent objects by not even rendering them which would be great
> for very large models though this is a guess of mine.

You are right. Having them not render is more efficient.

> Regarding the other methods (x3dom and x_ite), no further development
> is planned.
> Pretty much all the testing I wanted to do is over.
> They are functioning "well" (with the known limitations) and may be a
> good and simple solution for other people out there.
> I might change the names of the variables to be the same across the
> viewers though.

I noticed you changed to data names in the x_ite project. I changed the
test pages to test them and they worked. I then archived the x_ite test
since I will no longer use it.

> As you stated, the threejs multi viewer seems to be working fine.
> It is up to you to see which one fits your needs the best.
> Also, let me know if you have trouble with the z-index thing and the
> full screen.

I made a new test will you update for multi-off-viewer.js it is here. It
is the only one I will link to when I put it into production. The
simple-off-viewer test page will remain for reference but I won't link
to it. The multi-off-viewer is considerably faster!

https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/multi-off-viewer.html

Here is a beta of the window view.
I have removed the Fullscreen button as it is no longer needed (and I
couldn't get it to work right!). The 'f' button does it as well as
Double Click. Capital 'F' does not go full screen and only 'f' works.
I have to add the string 'style="position:relative; z-index:1;"'  to
every href and button definition or otherwise the mouse doesn't react to
the links.

https://www.interocitors.com/polyhedra/offwin.beta.html?url=simple-off-viewer/off_test/uc15.off&data-vertex-color=#000000&data-edge-color=#000000&data-vertex-radius=0.002&data-edge-radius=0.002

Getting the model to go full screen without any border is problematical.
I haven't found a way to do it. Can you look at my page source and
suggest any settings?
The style currently has these. If I make the height 100% the model is
larger than the screen. (the x3d-canvas full screen simply had both
values at 100%).

  width: 100%;
  height: 900px;

https://www.interocitors.com/polyhedra/offview.beta.html?url=simple-off-viewer/off_test/uc15.off&data-vertex-color=#000000&data-edge-color=#000000&data-vertex-radius=0.002&data-edge-radius=0.002

Roger

[Roger Kaufman]

Hi Wagyx,

On 6/1/2024 1:42 PM, Roger Kaufman wrote:
> I made a new test will you update for multi-off-viewer.js it is here.
> It is the only one I will link to when I put it into production. The
> simple-off-viewer test page will remain for reference but I won't link
> to it. The multi-off-viewer is considerably faster!
>
> https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/multi-off-viewer.html

I just noticed the left mouse click drags the model. I have added this
to the list of actions that it can do.

Pressing 5 says it resets rotation and position but right now it only
resets rotation. If it has been dragged it is not recentered.

There is no way to reset on a touch screen as keyboard '5' is the only
way. I'm not sure what is left, perhaps triple touch to reset if there
is such a thing?

Roger

[Wagyx Xygaw]

Hi Roger,

I have implemented the triple click and it should not mess with the full screen double click.
I just need to find someone that could test it on a touchscreen, I don't have such device myself.
I do have an old 5S Iphone but the browser does not display the canvas and models properly, ... Or is it an Iphone feature ?

Also I have added support for triggering full screen with both a lower case and an upper case F key press.
Also you can reset both the position and rotation of the camera with 5 or R keys (upper and lower cases).
Should I remove 5 ?

Regarding the full screen border, you can add this css property
.threeJS-viewer::backdrop {
border:10px solid white;

[Wagyx Xygaw]

Hi again,

I also have change the z-index settings so you should not have to add the string 'style="position:relative; z-index:1;"'  to
every href and button definition. Please check it within your page.

[Roger Kaufman]

Hi Wagyx,

This iteration didn't go well and I think you should roll it back. I'll explain...

I could simply add this to the style and it will work for all cases.

a {
  position: relative;
  z-index: 1;
}

I rolled my beta pages back and you can see what happens now.  Double click on a model and it will have a lot of text in the picture.

Having...

        .threeJS-viewer-canvas {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

z-index: -1 then it would just display black squares. Maybe that is because I display my models in a table? Anyway, I think it was better before!

https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/multi-off-viewer.html

On 6/2/2024 10:37 AM, Wagyx Xygaw wrote:

I have implemented the triple click and it should not mess with the full screen double click.
I just need to find someone that could test it on a touchscreen, I don't have such device myself.
I do have an old 5S Iphone but the browser does not display the canvas and models properly, ... Or is it an Iphone feature ?

I have a notebook with touch screen. Triple touch didn't work right and the model would zoom every which way. I wonder if there is another gesture that can be used?

Also I have added support for triggering full screen with both a lower case and an upper case F key press.
Also you can reset both the position and rotation of the camera with 5 or R keys (upper and lower cases).
Should I remove 5 ?

I didn't know of r/R which is nice. I had 5 because Marcel used 5 for reset on his viewer so it would be nice to keep.

Regarding the full screen border, you can add this css property
.threeJS-viewer::backdrop {
border:10px solid white;
}

Can you make a sample html that is one model displayed full screen with no border? This would be very helpful.

Roger

[Roger Kaufman]

Hi Wagyx,

On 6/2/2024 3:22 PM, Roger Kaufman wrote:
> Can you make a sample html that is one model displayed full screen
> with no border? This would be very helpful.

When I say full screen I mean one where the html will have the model
take up the whole browser window. Not the entire monitor window.

offview.html fills it now with the simple off viewer.

https://www.interocitors.com/polyhedra/offview.html?url=simple-off-viewer%2Foff_test%2FIvanov_Q5_excavated_by_J92.off&transparency=0.5&edgesActive=true&facesActive=true&verticesActive=true&useBaseColor=true&vertexRadius=0.03&edgeRadius=0.02&backgroundColor=cccccc&rotationSpeed=0&rotationDirection=0,1,0

Roger

[Scott Vorthmann]

FWIW, full-viewport is somewhat harder to make robust as opposed to full-screen, which has a browser API and OS support.

Scott

> --
> Antiprism Site: http://www.antiprism.com
> --- You received this message because you are subscribed to a topic in the Google Groups "antiprism" group.
> To unsubscribe from this topic, visit https://groups.google.com/d/topic/antiprism/R7AKmxhzJwk/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to antiprism+...@googlegroups.com.
> To view this discussion on the web, visit https://groups.google.com/d/msgid/antiprism/80511d68-cdb2-4eb5-8e0f-093190057461%40interocitors.com.

[Roger Kaufman]

Hi Wagyx,

Here is the problem I have been struggling with. I am using these styles
which almost the same as in your example page.

.threeJS-viewer-canvas {
  position: absolute;
  z-index: -1;

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.threeJS-viewer {
  aspect-ratio: 1;
  width: 200px;
  height: 200px;
  border: none;
  display: inline-block;
}

.threeJS-viewer::backdrop {
  background-color: transparent;
}

The test is here:

https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/multi-off-viewer.save.html

The only problem this page has is that the models don't appear on the
table, but they are there. Double clicking on the black squares shows
them full screen. They can even be turned on the blank table view and
the full screen view show that they moved.

In Firefox they will appear for a little bit when double clicking one
full screen. Its like they are covered by something.

I have tried changing the z-index for table elements but doing this only
makes the problem worse. I'm not sure what to try.

Roger

[Roger Kaufman]

Hi Scott and Wagyx,

On 6/2/2024 10:50 PM, Scott Vorthmann wrote:

FWIW, full-viewport is somewhat harder to make robust as opposed to full-screen, which has a browser API and OS support.

Scott

I was looking around for how to start in full screen as I would settle for that, however it appears that isn't allowed without user intervention. I don't know how the x3d-canvas is doing it but width and height of 100% was working in chrome, firefox, and edge.

Wagyx,

I have come up with an unlikely fix for the z-index problem I was experiencing. This is using the latest pushed multi-off-viewer.js...

I made my table background-color transparent. Then the off model was able to be seen in the cell. I haven't found a way to have color in the rest of the table so transparent it is for now.

I am back to just one test page now...

https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/multi-off-viewer.html

Just for completeness here are the window and "disfunctonal" full screen betas.

https://www.interocitors.com/polyhedra/offwin.beta.html?url=simple-off-viewer/off_test/uc15.off&data-rotation-speed=0.5&data-rotation-direction=0,1,0
https://www.interocitors.com/polyhedra/offview.beta.html?url=simple-off-viewer/off_test/uc15.off&data-rotation-speed=0.5&data-rotation-direction=0,1,0

Roger

[Roger Kaufman]

Hello,

On 6/3/2024 9:04 PM, Roger Kaufman wrote:
> ... but width and height of 100% was working in chrome, firefox, and edge.

I have the 100% fill of the html/body working with the current build
(what I'm calling full screen is really full browser screen as opposed
to the fullscreen function). It was easier than I thought and probably
could have been implemented earlier. It is just the style...

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Here is an example. It works in Chrome, Firefox and Edge browsers.

https://www.interocitors.com/polyhedra/offview.beta.html?url=simple-off-viewer/off_test/uc15.off&data-rotation-speed=0.5&data-rotation-direction=0,1,0


The reset on touch screens is the only outstanding issue. A phone screen
will work for testing this too. If it cannot be done easily we are no
worse off than before.

I will now hold tight for any other updates before going further. Thanks
for all your work!

Roger

P.S. As for the table background color, I was able to set the body
background-color with no ill effects. It set the whole page that color,
its a trade off but it isn't that bad.

https://www.interocitors.com/polyhedra/simple-off-viewer/off_test/multi-off-viewer.html

[Wagyx Xygaw]

Hi Roger,

Thank you for your feedback and trials.

I think I have a promising solution under my hand. I have not uploaded it yet, will do tonight.

Have a good day !

[Roger Kaufman]

Hi Wagyx,

On 6/5/2024 3:17 AM, Wagyx Xygaw wrote:
> Hi Roger,
> Thank you for your feedback and trials.
> I think I have a promising solution under my hand. I have not uploaded
> it yet, will do tonight.
> Have a good day !

What would happen if transparent backgrounds were allowed? I tried
data-background-color="#00000000" but it comes out white, so I think the
alpha value is not being used.

I'm thinking that if it could work, a web page background would show
through to the model.

Roger

[Wagyx Xygaw]

Hi Roger,

I have uploaded the git with the corrections.
I am not using the full screen API anymore but directly tweaking the CSS to fill in the whole browser viewport.

Let me know if you think adding escape and F11 as a way to exit the full screen is a good idea, the F key still works.
You should not need to set a z-index on the <a> anymore.
Regarding the background color, you still need to set it to none on your table I think but you can have it on the body.
I had a similar issue on my web pages and fixed it with:
body{
    background:#3a3a3a;
}
.wrapper.style1 {
    background:none; /* background color for this class is set in another CSS file to #3a3a3a*/
}

I have not addressed the camera reset with a different gesture yet. Could you please try it again ? the CSS stuff might have forbidden the correct behavior.

I'll look into setting the background transparent, if threejs allows me to.

Hope I have not messed up everything for you, only tested on my webpages where it works fine ...

[Roger Kaufman]

Hi Wagyx,

On 6/5/2024 4:25 PM, Wagyx Xygaw wrote:
> I have uploaded the git with the corrections.
> I am not using the full screen API anymore but directly tweaking the
> CSS to fill in the whole browser viewport.
> Let me know if you think adding escape and F11 as a way to exit the
> full screen is a good idea, the F key still works.

I had been pressing Escape to return before and it seems intuitive. F11
wouldn't be intuitive since that is to maximize the browser window. F

still works.

> You should not need to set a z-index on the <a> anymore.

Right. One very minor side effect I will have to try to fix in the
future. I built buttons with box-shadows, but it required position:
relative as an attribute. With position: relative for the button, it
appears on the fullscreen view. I have commented out positions on the
button for now and will try to find an alternative solution.

Notice the different from the original

https://www.interocitors.com/polyhedra/offwin.html?url=simple-off-viewer/off_test/uc15.off&rotationSpeed=0.5&rotationDirection=0,1,0

Now there is no button border

https://www.interocitors.com/polyhedra/offwin.beta.html?url=simple-off-viewer/off_test/uc15.off&data-rotation-speed=0.5&data-rotation-direction=0,1,0

> Regarding the background color, you still need to set it to none on
> your table I think but you can have it on the body.
>

I am doing it that way, yes.

>
> I have not addressed the camera reset with a different gesture yet.
> Could you please try it again ? the CSS stuff might have forbidden the
> correct behavior.

Touch screen seems to work great, and doesn't have any problems, but...

But there is a problem with the mouse sometimes. Try on this page double
click the image to full screen. Try triple click. Then on full screen
try rotating the model. For some reason it may open a web page, or the
model may seem stuck to the mouse. It happens on all the browsers and on
my other computer.

https://www.interocitors.com/polyhedra/offwin.beta.html?url=simple-off-viewer/off_test/uc15.off&data-vertex-color=#000000&data-edge-color=#000000&data-vertex-radius=0.002&data-edge-radius=0.002

>
> Hope I have not messed up everything for you, only tested on my
> webpages where it works fine ...

No worries. I like these challenges, the the system is much faster than
previous.

Roger

[Wagyx Xygaw]

Hi Roger,

Thanks for reporting.

When the full screen is toggled, I change the z-index of the canvas from -1 to 0 on line 51 of multi-off-viewer.js
If you change it to 1, you may be able to have your button style back since the default z-index for them is 0 when position is set.

I have the issue with clicking too sometimes. For instance I could not trigger it on your page but I could on mine.
I noticed it since the beginning of developing the full screen feature.
I kind of learned not to move the model when double or triple clicking and be a bit patient between interactions or I use the F,R keys instead.
There is a timeout variable on line 17. It is set to 350ms, the issue might disappear if you reduce the time delay.

[Roger Kaufman]

Hi Wagyx,

On 6/6/2024 2:36 AM, Wagyx Xygaw wrote:
> When the full screen is toggled, I change the z-index of the canvas
> from -1 to 0 on line 51 of multi-off-viewer.js
> If you change it to 1, you may be able to have your button style back
> since the default z-index for them is 0 when position is set.

I tried this but then the model was not movable in full screen mode (as
is a z-index problem).  Don't worry about this. I can experiment with
other buttons or use images. Using z-index for button shadows is a bit
of a kludge if you ask me :D

> I have the issue with clicking too sometimes. For instance I could not
> trigger it on your page but I could on mine.
> I noticed it since the beginning of developing the full screen feature.
> I kind of learned not to move the model when double or triple clicking
> and be a bit patient between interactions or I use the F,R keys instead.
> There is a timeout variable on line 17. It is set to 350ms, the issue
> might disappear if you reduce the time delay.

I tried this too but the problem persisted. It occurs all the time with
a triple mouse click and sometimes with a double click on full screen.
After doing that, the next right mouse click goes into select text mode
with a little plus sign on the cursor.

I've found something here but I don't know if this is the same problem

https://discourse.threejs.org/t/problem-with-right-click-mouse-with-orbitcontrol-and-dragcontrols/28750


For now I've de-emphasized triple click and say in the help...

"Reset: Press R or 5 or triple tap touchscreen resets both the camera
position and the object rotation"

Roger

P.S. I miss having escape to leave full screen mode. But as long as it
only exits full screen.

[Roger Kaufman]

Hi Wagyx,

On 6/6/2024 5:36 AM, Roger Kaufman wrote:
> I tried this but then the model was not movable in full screen mode
> (as is a z-index problem).  Don't worry about this. I can experiment
> with other buttons or use images. Using z-index for button shadows is
> a bit of a kludge if you ask me :D

After quite a bit of research I came up with a way to do the button with
images. The images were taken from the old page. Now the button, the
hover and the active view all work without any reliance on z-index!

The CSS looks like

.button_download {
    background: url(./images/button_download.jpg) no-repeat;
    background-size: 88px 33px;
    font-size: 33px;
    border: none;
    color: transparent;
}

.button_download:hover {
    background: url(./images/button_download_hover.jpg) no-repeat;
    background-size: 88px 33px;
}

.button_download:active{
    background: url(./images/button_download_active.jpg) no-repeat;
    background-size: 88px 33px;
}


An example is here.

https://www.interocitors.com/polyhedra/offwin.beta.html?url=simple-off-viewer/off_test/uc15_transparent.off


There are a few notes.
The button name is on the image so multiple images are needed.
For some unknown reason the true image size of the jpg is twice what it
should be and I cropped it directly off the screen. It had to be
corrected with background-size which is one half the jpg size but is the
original size on the screen.
There has to be enough text in the javascript button statement or the
image gets cropped! ("Download" is sufficient) The text color is set to
transparent but you can see it if you select text around the button.
Without the font size equal to the height, the image is cropped. (This I
found completely by accident).

I have tried this on Chrome, Firefox, and Edge.

Don't worry I like challenges like this. Honestly I think this is a
better method than reliance on multiple settings in spite of the
technicalities.

Roger

[Wagyx Xygaw]

Hi Roger,

your new button works nicely :)

I have committed the adding of the escape key to exit the full screen.
What remains to be done now ?

[Roger Kaufman]

Hi Wagyx,

On 6/6/2024 5:00 PM, Wagyx Xygaw wrote:
> your new button works nicely :)
> I have committed the adding of the escape key to exit the full screen.
> What remains to be done now ?

Thanks.

I have updated the helps so they don't mention double or triple click.
They mention double or triple tap on a touch screen. Of course mouse
clicks work, but they are not emphasized. Rather the key presses are
emphasized.

I don't see the update in the repository yet, but I mention Escape to
return in the helps.

It seems to work nicely and I can't think of anything else at this point.

Roger

[Roger Kaufman]

Hi Wagyx,

On 6/6/2024 9:52 PM, Roger Kaufman wrote:
> I have updated the helps so they don't mention double or triple click.
> They mention double or triple tap on a touch screen. Of course mouse
> clicks work, but they are not emphasized. Rather the key presses are
> emphasized.
>
> I don't see the update in the repository yet, but I mention Escape to
> return in the helps.
>
> It seems to work nicely and I can't think of anything else at this point.
>
> Roger

In anticipation of putting this into production, I have separated the
multi-off-viewer files into their own directory so the past url's have
change. Start here for the top of the test page

https://www.interocitors.com/polyhedra/multi-off-viewer/off_test/multi-off-viewer.html


What is the file es-module-shims.js? I have it in the js directory but I
don't use it. Maybe I should be?


As a point of triviality, I have encapsulated the info(dialog box
system) js, css, and images into into its own directory. Probably only
we would ever use this.


When we do full screen we can actually still press F11 for full full
screen ;) I put it in the help dialog box as
Full Screen: (PC Browser true Full screen) Press F11. Press F11 to return.

Escape does not work here nor does it work in the old simple-off-viewer
however it says press and hold Esc on entry to full screen. This is a
browser message and cannot be changed. Try F11 here... F11 to return.

https://www.interocitors.com/polyhedra/offview.beta.html?url=multi-off-viewer/off_test/iso_delta_f_3.off


I plan on asking the list what they think of the new test page before I
move things. With simple-off-viewer they complained it was slow, now it
should be faster. After I migrate I am going to archive the
simple-off-viewer.


Are you going to change the variable names to your more advanced web
page? You do not have to do this and in the Webview beta (command line
off viewer) I still use your old names. Once I migrate I will put out a
new version of Webview. I'll elaborate more on that when I do.

Roger

[Wagyx Xygaw]

Hi Roger,

es-module-shims.js is used to support import maps in any browser.
I don't know how it works but every Three.js examples I have read seems to use it.
Maybe old browser versions won't support the import maps without it which could explain why you don't seem to need it.

Getting full full screen for free is a very nice surprise feature !

The link to the icon of the infobox is broken on the offview.beta.html page.

I try not to break urls to keep people's bookmarks of my website working,
I could add aliases though and rewrite the url parameters.

[Roger Kaufman]

Hi Wagyx,

On 6/7/2024 4:52 PM, Wagyx Xygaw wrote:
> es-module-shims.js is used to support import maps in any browser.
> I don't know how it works but every Three.js examples I have read
> seems to use it.
> Maybe old browser versions won't support the import maps without it
> which could explain why you don't seem to need it.

I put it in three pertinent pages. Firefox at least says something about
pre-compiling it or something. I doesn't hurt to have it then.

>
> Getting full full screen for free is a very nice surprise feature !

The three browsers are different with F11.
Chrome. F11 enters full screen and holding Escape will exit it but it
has to be held down 3 seconds or so. F11 exits immediately.
Firefox. There is no browser message and only F11 exits full screen.
Edge. The browser message is exit with F11.

It can get into a state where after pressing F, then F11, Escape will go
back to the page but will remain in F11 mode.  Pressing F11 puts the
browser back into normal model. I tried a few things to stop this but
all the browsers are different. Its not a big problem anyway.

>
> The link to the icon of the infobox is broken on the offview.beta.html
> page.

I forgot to change the path. Weird, it was working in Chrome which is
where I do my work, but maybe it was in cache. Now it is back for all
three browsers.

Roger

[Roger Kaufman]

Hi Wagyx,

On 6/5/2024 4:25 PM, Wagyx Xygaw wrote:

> Regarding the background color, you still need to set it to none on
> your table I think but you can have it on the body.
> I had a similar issue on my web pages and fixed it with:
> body{
>     background:#3a3a3a;
> }

I was doing it like this but I found a page on how to color individual
parts of a table.

https://www.corelangs.com/css/table/tablecolor/

I found a combination to get back some of what it had before. A few
cells needed individual coloring. If it was needed, each individual cell
could be colored appropriately, but fortunately I only had to do a few.

There are only a handful of pages on my site where I have inline off
file viewing. The majority of my site has links to the viewing pages. So
conversion won't be much work.

Roger

[Wagyx Xygaw]

Hi Roger,

This is good news that you don't have to change many pages though now you could display tens of models at the same time easily.

I have found a browser extension that adds a viewer to any link to a wrl file:
https://archematics.app/g4gF59/

[Roger Kaufman]

Hi Wagyx,

On 6/9/2024 3:59 PM, Wagyx Xygaw wrote:
> This is good news that you don't have to change many pages though now
> you could display tens of models at the same time easily.

I'd be more prone to have live models rotating as an indication they are
live but there is no way to pause the spinning so the view is stuck with it.

In antiview spin works differently, since 's' is used to allow
'throwing' the model into a continual spin. And another 's' cancels the
spin.

For multi-off-viewer, spin is started with a parameter which is a nice
feature. Would it be possible to have 's' pause the spin if is spinning?
Another 's' would resume it? If its not spinning in the beginning then
's' does nothing.
Is any of this possible?

Roger

[Wagyx Xygaw]

Hi Roger,

It is done. I even made a data-rotation-active parameter ("true" or "false", default is "true").

So with data-rotation-speed = 1 and data-rotation-active ="false" for instance, the model is still until the user click on it and press s.
We could add up/down arrows to controls the speed for instance, by 10% increments.

Wagyx

[Roger Kaufman]

Hi Wagyx,

On 6/10/2024 2:50 AM, Wagyx Xygaw wrote:
> It is done. I even made a data-rotation-active parameter ("true" or
> "false", default is "true").
> So with data-rotation-speed = 1 and data-rotation-active ="false" for
> instance, the model is still until the user click on it and press s.
> We could add up/down arrows to controls the speed for instance, by 10%
> increments.
> Wagyx

This is sweet! I think this is quite ready to use.

As for the arrow keys, let's keep those free for later in case we think
of something else.

When we spin the model, the model stops when we release the mouse
button. Is that a setting?
Is it possible for the model to keep spinning retaining momentum? There
seems to be two behaviors of rotation, as I mentioned in the note to
Adrian about how antiview does it.

Roger

[Wagyx Xygaw]

There is a damping factor on the camera controls that I can set to zero which works but then,

the model cannot be stopped anymore.
With the x_ite viewer, the motion would stop with a simple click from the mouse and no movement.
I just have to find the correct way to handle that in the event listener or have another key for stopping.

[Roger Kaufman]

Hi Wagyx,

On 6/11/2024 2:55 AM, Wagyx Xygaw wrote:
> There is a damping factor on the camera controls that I can set to
> zero which works but then,
> the model cannot be stopped anymore.
> With the x_ite viewer, the motion would stop with a simple click from
> the mouse and no movement.
> I just have to find the correct way to handle that in the event
> listener or have another key for stopping.

I have migrated my site to the multi-off-viewer and have archived the
simple-off-viewer test page and code.

The comments I have gotten from the list users is mostly about phone
compatibility! I didn't think phones would be such an issue but I guess
everyone uses primarily phones now.

Your Voxel page shows all yellow when turned portrait mode but the
models are still under there and can be made full screen. Landscape
works fine.

I have to study this now because my tables take 100 percent of the
screen, but when turning a phone or tablet, that can be a problem and it
should really use scrolling.


I have also updated the Webview project to version 3.0 and it now uses
the multi-off-viewer online. One url choice is your polyhedron page that
uses the old style parameters. The python script takes that into
account. "transparency" and "useBaseColor" still works for that page.
For the multi-off-viewer, "useBaseColor" is simulated for  offview -l by
changing data-edge-color and data-vertex-color to black. And for
transparency of off files sent to offview, that can be done by
preprocessing with off_color e.g "off_util geo_t3 | off_color -r A0.5 |
offview.py"

Roger

[Wagyx Xygaw]

Hi Roger,

Thanks for telling me about the issue on my webpage, it is fixed now.
On my phone I don't see the models though but I think it is because the version of my Safari browser is too old and does not support webgl.
How is the double and triple tapping interaction for full screen and reset working on phones and tablets ?

[Roger Kaufman]

Hi Wagyx,

On 6/14/2024 6:26 PM, Wagyx Xygaw wrote:
> Thanks for telling me about the issue on my webpage, it is fixed now.
> On my phone I don't see the models though but I think it is because
> the version of my Safari browser is too old and does not support webgl.

It worked on Firefox, Edge and Chrome but in Chrome I had to clear cache
first.

> How is the double and triple tapping interaction for full screen and
> reset working on phones and tablets ?

For me I've never had a problem with tapping on my phone or touchscreen
notebook. Its only the mouse that seems to be problematic. The only
report I got was someone didn't know they could double tap to get out of
fullscreen.


I've been trying to get a transparent background. I found some
information on threejs about doing it here but I can't get it to work.

https://stackoverflow.com/questions/76288667/how-to-make-transparent-background-in-three-js-canvas

I set alpha to true and the clear color to #000001

        this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas,
antialias: true, alpha: true });
        this.renderer.setClearColor(0x000001, 0);

So theoretically this canvas should be transparent and the background
should show through. I wonder if there is something else that needs to
be set?

https://www.interocitors.com/polyhedra/offwin.test.html?url=multi-off-viewer/off_test/uc15.off&data-faces-active=false&data-vertex-radius=0.01&data-edge-radius=0.01&data-background-color=#000001

This would be a nice feature if we could get this to work when choosing
a color not often used (why I chose #000001).

Roger

[Wagyx Xygaw]

I have managed to find a solution for the background transparency but we need to define the correct behavior before I commit.

Here is what I have found:

- Using renderer.setClearColor(color, alpha); is a global setting that is set on the renderer so all divs will have the specified color and alpha value. When a data-background-color is defined, I apply it as the scene background color that is always opaque and come on top of the renderer color. If no data-background-color is defined, the scene background color is left unset and is transparent by default.

- Before, when unset, the default data-background-color default value was #cccccc. I can set it to undefined instead which will leave the scene.background unset and transparent. I will also have the renderer alpha value be 0. This way I should comply with your needs. I have tested it and it works.

- When a transparent background is used and the full screen is activated, the rest of the webpage will show behind the model. Is that okay ?
- One can specify a texture as the scene background color.

Please let me know what kind of behavior suits you.

[Roger Kaufman]

Hi Wagyx,

On 6/15/2024 7:46 AM, Wagyx Xygaw wrote:

I have managed to find a solution for the background transparency but we need to define the correct behavior before I commit.

Here is what I have found:

- Using renderer.setClearColor(color, alpha); is a global setting that is set on the renderer so all divs will have the specified color and alpha value. When a data-background-color is defined, I apply it as the scene background color that is always opaque and come on top of the renderer color. If no data-background-color is defined, the scene background color is left unset and is transparent by default.

I have set the default data-background-color in my popup html's to #cccccc. Then where I don't specify data-background-color explicitly, nothing will change as far as those screens are concerned. Embedded views will have to have data-background-color explicitly set. For example, on the test page I don't set any background colors except for one example with a black background. Is it possible to set the default background color for a page in css?

I thought there was a way to set javascript variables in css. Maybe this would work but is being overridden by the hard coded default? Maybe this isn't how its suppose to work :|

.threeJS-viewer {
  aspect-ratio: 1;
  width: 200px;
  height: 200px;

  display: block;
  var(--data-background-color, #ffff00);
}

Anyway, if the default background were able to be set per page, having transparent as the default should be an issue. As long as it can still be set per instance on the page.

- Before, when unset, the default data-background-color default value was #cccccc. I can set it to undefined instead which will leave the scene.background unset and transparent. I will also have the renderer alpha value be 0. This way I should comply with your needs. I have tested it and it works.

- When a transparent background is used and the full screen is activated, the rest of the webpage will show behind the model. Is that okay ?

If there is a transparent background used, it is so that on the page it seems to float on the page. Normally a full screen view wouldn't be used in this case. But what if a variable data-fullscreen-background-color existed and, if set, could replace the inherited data-background-color? If not set, then fullscreen would be transparent.

- One can specify a texture as the scene background color.

Did it work when an image is used as the background?

Roger

--
Antiprism Site: http://www.antiprism.com
---
You received this message because you are subscribed to the Google Groups "antiprism" group.
To unsubscribe from this group and stop receiving emails from it, send an email to antiprism+...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/antiprism/ee051233-7cea-44ea-90ea-80e355f2dd28n%40googlegroups.com.

[Roger Kaufman]

On 6/15/2024 10:29 AM, Roger Kaufman wrote:
> Anyway, if the default background were able to be set per page, having
> transparent as the default should be an issue. As long as it can still
> be set per instance on the page.

That should have been

if the default data-background-color were able to be set per page,
having transparent as the default should *NOT* be an issue. As long as

it can still be set per instance on the page.

Roger

[Wagyx Xygaw]

Hi Roger,

Unfortunately you cannot put the background color on the div element because it lives above the canvas where the model is rendered.

What I can do is put back the default color to #cccccc when the data-background-color is missing on the div element.

And then add a behavior to recognize invalid input as fully transparent like anything not of the form "#xxxxxx" ("transparent" or "0" for instance).

What I can also do is copy the default color from somewhere. Thanks for bringing up the variables in CSS, I did not know they existed.
Following  the w3school doc https://www.w3schools.com/Css/css3_variables_overriding.asp,

you could have a :root element with a --default-background-color that I could look up with javascript and use as the default color when there is no data-background-color field instead of setting every div element with the same wanted value.

And if you don't set this variable I guess you would get #cccccc.

Having a data-fullscreen-background-color can definitely work.

Should I proceed with these ideas ?

I have not tried putting a texture as the background, the threejs doc says it should work, are you interested in having that ?

[Roger Kaufman]

Hi Wagyx,

On 6/15/2024 2:02 PM, Wagyx Xygaw wrote:

Unfortunately you cannot put the background color on the div element because it lives above the canvas where the model is rendered.

The entire div being colored is what happened when I set the background-color for the threejs canvas. But I have to be careful, when I set it for the viewer, it covered models that were in the table. I think it has to be set with the variable.

.threeJS-viewer {
  aspect-ratio: 1;
  width: 200px;
  height: 200px;
  display: block;

  background: #ffff00;

}

What I can do is put back the default color to #cccccc when the data-background-color is missing on the div element.

And then add a behavior to recognize invalid input as fully transparent like anything not of the form "#xxxxxx" ("transparent" or "0" for instance).

That would make it not change current behavior, while adding transparent ability, I think. If that's the case I wouldn't have to set the default in my popup html, I'd roll those back to yesterday.

What I can also do is copy the default color from somewhere. Thanks for bringing up the variables in CSS, I did not know they existed.

Following  the w3school doc https://www.w3schools.com/Css/css3_variables_overriding.asp,

you could have a :root element with a --default-background-color that I could look up with javascript and use as the default color when there is no data-background-color field instead of setting every div element with the same wanted value.

And if you don't set this variable I guess you would get #cccccc.

So if the root variable was set to 0 then the page would behave as if they were transparent backgrounds. Otherwise they'd get a default color. I like this! I have pages where I set the background to black but I had to do it every instance. It would make it so I could just have one place to set them. If it were possible I would do it this way. Example page

https://www.interocitors.com/polyhedra/Deltahedra/Cundy/Coptic/index.html

Having a data-fullscreen-background-color can definitely work.

Should I proceed with these ideas ?

Yes. As described I think it will work and give the whole system more power. We always welcome more power! :D

I have not tried putting a texture as the background, the threejs doc says it should work, are you interested in having that ?

I say if something works and doesn't interfere with something else then try it. I was thinking body textured background showing through, but if it could be variably set for the canvas as well that seems really cool.

I'm thinking an example page may be needed. And you could always reference my test page in the Readme if you'd like.

Roger

Le samedi 15 juin 2024 à 16:41:21 UTC+2, Roger Kaufman a écrit :

On 6/15/2024 10:29 AM, Roger Kaufman wrote:
> Anyway, if the default background were able to be set per page, having
> transparent as the default should be an issue. As long as it can still
> be set per instance on the page.

That should have been

if the default data-background-color were able to be set per page,
having transparent as the default should *NOT* be an issue. As long as
it can still be set per instance on the page.

Roger

--

Antiprism Site: http://www.antiprism.com
---
You received this message because you are subscribed to the Google Groups "antiprism" group.
To unsubscribe from this group and stop receiving emails from it, send an email to antiprism+...@googlegroups.com.

To view this discussion on the web, visit https://groups.google.com/d/msgid/antiprism/ced2d7d5-d329-4740-bfaf-e843cf0ce75bn%40googlegroups.com.

[Wagyx Xygaw]

Hi Roger,

I have commited my changes.
In the CSS, if you specify
:root {
--data-background-color: #33aa33;
 }
the default background color is set to green.
If you don't specify it, the default color is set to transparent.

Then on each div, you can set a data-background-color that will override
the :root color even if it is transparent.

This also mean that if you don't specify anything ever, the default color is transparent and not #cccccc anymore.

Finally, I have added a background color for full screen with
--data-fullscreen-background-color: #ffffff; in the :root
and data-fullscreen-background-color="#ffffff" on the threeJS-viewer.

It works in the same way as the data-background-color and replaces it when going full screen.

In the hope it works for you.

[Roger Kaufman]

Hi Wagyx,

It works nicely! I only had to make a few changes to my popup views. I'm still working on details.

Consider this page. I've not set any root variables so backgrounds are transparent. The models in the right most boxes pop out of their box on full screen (F). This is a very novel way to do this and I may just let it like this. (Note, on my site design, most often a single click on a static picture brings up a full screen popup page)

https://www.interocitors.com/polyhedra/n_icons/index.html

I haven't defined a default background color on my full screen popup and the background color is #dddddd. This is consistent on chrome, firefox and edge. I should probably set it, but I wonder where #dddddd is coming from?

I have more a few more test pages I will send links to later today or tomorrow.

Roger

To view this discussion on the web, visit https://groups.google.com/d/msgid/antiprism/9e978d6f-2343-41df-8e36-bf458fafa53an%40googlegroups.com.

[Wagyx Xygaw]

Yeah ! That's transparency for you !

Regarding the #dddddd color, you may still link to base.css which was linked in the simple-off-viewer.html example but is not needed anymore.

When going full screen as an (unneeded) optimization, I am disabling the rendering of the other models, that's why they disappear, they can be back though if you wish.
Also the container of the viewer gets reduced because it moves out of it and go full screen, you may probably solve that with the correct css on the container.

[Roger Kaufman]

Hi Wagyx,

On 6/16/2024 12:02 PM, Wagyx Xygaw wrote:
> Yeah ! That's transparency for you !

This is working super!

> Regarding the #dddddd color, you may still link to base.css which was
> linked in the simple-off-viewer.html example but is not needed anymore.

That was it and it is no longer needed. But I should be using a base.css
on all my webpages as it would help not to have to edit them all.

> When going full screen as an (unneeded) optimization, I am disabling
> the rendering of the other models, that's why they disappear, they can
> be back though if you wish.

From a performance perspective it might make sense not to render them
when its full screen. Certainly when a background is colored it would
make no sense since they can't be seen. Unless it is more costly to
re-render them but I don't know about such things.

> Also the container of the viewer gets reduced because it moves out of
> it and go full screen, you may probably solve that with the correct
> css on the container.

I tried for quite sometime to solve that with width and height
parameters in various places with no luck. I tried putting the div on
another canvas but that didn't work. I'm almost thinking it needs a
transparent image under the div or something. Here are a couple of test
pages showing transparency. It would be nice if the underlying page
didn't change in full screen.

https://www.interocitors.com/polyhedra/multi-off-viewer/off_test/transparent.test1.html?url=multi-off-viewer/off_test/esI.off&data-faces-active=true&data-vertex-radius=0.08&data-edge-radius=0.05&data-rotation-speed=0.25

https://www.interocitors.com/polyhedra/multi-off-viewer/off_test/transparent.test2.html?url=multi-off-viewer/off_test/esI.off&data-faces-active=true&data-vertex-radius=0.08&data-edge-radius=0.05&data-rotation-speed=0.25

Roger

[Roger Kaufman]

Hi Wagyx,

On 6/16/2024 2:26 PM, Roger Kaufman wrote:

Also the container of the viewer gets reduced because it moves out of it and go full screen, you may probably solve that with the correct css on the container.

I tried for quite sometime to solve that with width and height parameters in various places with no luck. I tried putting the div on another canvas but that didn't work. I'm almost thinking it needs a transparent image under the div or something. Here are a couple of test pages showing transparency. It would be nice if the underlying page didn't change in full screen.

https://www.interocitors.com/polyhedra/multi-off-viewer/off_test/transparent.test1.html?url=multi-off-viewer/off_test/esI.off&data-faces-active=true&data-vertex-radius=0.08&data-edge-radius=0.05&data-rotation-speed=0.25

https://www.interocitors.com/polyhedra/multi-off-viewer/off_test/transparent.test2.html?url=multi-off-viewer/off_test/esI.off&data-faces-active=true&data-vertex-radius=0.08&data-edge-radius=0.05&data-rotation-speed=0.25

I ultimately solved the problem by placing the <div> in a table with one <td>. While the viewer is sized 500x500, the table had to be sized 506x506. I had a hard time getting the inspector to show if it was a margin or something but I guess the table takes up some space.

The links are the same but now but the lower part of the page doesn't shift. Getting the same results in Chrome, Firefox, and Edge.

Roger