Coder Social home page Coder Social logo

lbartworks / openvgal Goto Github PK

View Code? Open in Web Editor NEW
14.0 3.0 5.0 86.74 MB

Virtual 3D gallery for art showcase. Based on Babylon.js

License: MIT License

HTML 13.65% JavaScript 6.87% Jupyter Notebook 79.49%
babylonjs gallery html javascript python virtual-gallery virtual-reality webgl blender

openvgal's Issues

Some code correction requirements

Greetings!

First of all thank you very much for this awesome software to be available as Open Source product.
I searched the Internet for something like this to show photos in a gallery-style way.

Now let me write my experience in an issue report:
For this product test I use Windows 10 + Firefox + Apache webserver for win64 - and followed the instruction ("4. Steps to create a gallery") as of 20. Jan. 2024.

#####################################

4.0 Main step: Preparation

  1. Organizing photos in various gallery* subdirectories, keeping in mind the <50 images / dir rules of thumb mentioned later in the instructions - Check.

#-----------------#

  1. create a csv file (building.csv) in the python subdirectory -- Check.

#-----------------#

  1. Install local webserver (apache) - Check.

#-----------------#

  1. Install jupyter notebooks --- and on windows painfully learn how to set it to use the same root dir as the Apache. - Check.

#-----------------#

  1. Download the VGAL repo. - Check,

#-----------------#

  1. (actually the 6. step is marked as 7. in the instructions) Galleries are already there. - Check.

#-----------------#

  1. Run the jupyter notebook and load the notebook VR_gallery.ipynb...
    Well: there are some concerns here.

The default values in the VR_gallery.ipynb for:
"building["Technical"]["ambientLight"]=10\n",
"building["Technical"]["pointLight"]=50\n",

Are too much. ambientLight could be 1 while pointlight should be 20.

Also if the image files inside the gallery directories have the extension with capital letters for example .JPG the script simply gets stuck and Jupyter Notebook does not say at which file.
It is good to have the "Handle.exe" tool for windows (something like the "fuser" on Linux ) to find the file where the script stands at, having the PID holding the file - as well as cygwin for bash-like shell commands and iterations for faster file operation thoughout the gallery directories.

Another point here is the aspect ratio of images (height / width): the script seems like tries to guess (?!) the ascect ratio however in some cases they have to be corrected manually in the building.json file - which is a pain in the A job when there are hundreds of images and dozens of galleries.

Of course in case of "dozens of galleries" with <50 images each - the room sizing must be set manually as a trial and error method until the right measure has been found. (the gallery viewer is a good way to test it later on).

Hint for users:
Also the source csv file (building.csv) should be plain, therefore it is not good to edit them - for example - in Excel so there should be no apostrophes present.
The building.json file will be in the root dir of the apache (by default: [Drive]:\Apache24\htdocs directory). It is advised to keep it there and to copy the styles.json there as well. Also copy the new building.json into the vgal subdirectory.

#-----------------#

4.1 Main step: Hall Builder.

  1. In "/vgal/hall_builder/room_processor.html" I guess the styles.json is missing from the constants.
    It calls the "./room_builder_aux.js" java script right at the beginning.

In Firefox the room_builder_aux.js script run on an error stating that "floor_material" is not defined.
It is defined, and the script seems good:
floor_material = materials[data.chosenStyles.chosenFloorStyle];

(Also to mention that the "vgal/blender/scrypt.py" overrides the material attributes.)

When I manually declare the variable to match the information contained in styles.json file as
floor_material = "Wooden";
The next error is that the rb function is not defined in room_processor.html.
As I am not too familiar with the concept (beginner level in python and in Java) so I leave this as it is.

Hall Builder failed for me (this is step 10.) on Windows 10 + Firefox (tried it in Edge and IE compatibility mode as well - No use).

#-----------------#

  1. There is no step 9.

#-----------------#

  1. Yep, Hall Builder failed.

#-----------------#

  1. No downladed room files due to error.

#-----------------#

  1. There is no step 12.

#-----------------#

  1. Probably cannot do without generated files.

#-----------------#

4.2 Main Step: Hall template --- I skipped this during my tests.

#-----------------#

4.3 Main step: On the fly creation (no glb file)
"http://localhost/vgal/gallery_viewer/virtual_gallery.html"

The first problem is with the double quites - they shall be single apostrophes:
const asset_location="/";
const config_file_name="/building.json";
const styles_file_name="/styles.json"
const materials_folder='/vgal/materials';
const hallspics_prefix= '/vgal';

About
const hallspics_prefix= '/vgal';
should this point to /vgal/python ?

Otherwise it works like charm if the styles.json is also in the root directory of the webserver.

The only issue is that the internal room doors are not working as a link back to the main hall (root) so if I want to get back into the corridor I have to refresh the page.

Plus another big issue after the GalleryViewer works: when I want to export the room(s) to GLB file(s) inside the "GalleryViewer" (babylon.js) the webpage informs me about the Export being in progress... and nothing happens.
There the Firefox web console gives the following information:

BJS - [timestamp]: GLTF2Export is not available. Make sure to load the serializers library

Uncaught TypeError: jl.GLTF2Export is undefined
exportGLTF toolsTabComponent.tsx:286
onClick toolsTabComponent.tsx:501
onClick buttonLineComponent.tsx:20
React 11
unstable_runWithPriority scheduler.production.min.js:18
React 3

The coding reference of Firefox shows the following:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default

#-----------------#

So overall the project is very exciting and satisfying as it works like charm in GalleryViewer and needs some manual preparation to make it totally custom.
The textures and sizes etc. are also manually customizable and is a good feature.

Definitely worth to continue developing it, keep up the good work!

Sincerely,
Flow-R-Ian

styles.json is missing

I followed the instruction but I couldn't find styles.json.
If possible, please add the styles.json file as a sample.
Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.