Giter VIP home page Giter VIP logo

scenepic's Introduction

ScenePic

© Microsoft 2021

Primary Contact: [email protected]

Build Status

Getting Started

To look at some examples and browse the documentation, visit our website:

API Documentation + Demos

We currently support Python and C++:

Python

We provide up-to-date Python wheels via PyPi and also conda packages:

pip install scenepic
conda install -c conda-forge scenepic

If you want to build the library yourself (e.g. for development reasons) can clone the repository and follow most of the instructions to build the c++ client library, but then run

python setup.py develop

which will then build and install the library locally.

For a quick tutorial, take a look at getting_started.py.

For a more extensive tutorial, install Python and Jupyter, and open the python_examples/tutorial.ipynb notebook. This tutorial also demonstrates the use of ScenePic within the interactive Jupyter notebook environment.

A similar example is given in python_examples/getting_started.ipynb.

Note: you may need to set the NotebookApp.iopub_data_rate_limit setting in jupyter to prevent an IOPub error. To do this, call jupyter notebook --generate-config to generate a config file, and then edit the appropriate line to increase the value until it works.

We provide a website with full Python API documentation here

C++

ScenePic is fully compatible with CMake FetchContent, and we encourage users to include the library in their projects via that mechanism. Alternatively, you can follow the instructions below to build the client library directly.

To see examples of how to use the library from C++ look at the tutorial. You can find the API documentation here

Introduction

All platforms have good support for 2D images, with well-recognized formats such as PNG and JPEG that can be viewed out of the box (no installation) and shared trivially.

However, while many formats exist for 3D data, none are well-supported without installation of tools such as MeshLab, Blender, etc.

ScenePic was created for 3D computer vision researchers such as those working on HoloLens and Mesh at Microsoft. It was designed to be a lightweight, reuseable 3D visualization library, with the following desiderata in mind:

  • Make experimentation with 3D data near effortless
  • Incredibly easy to create and share 3D results
    • zero-install sharing of detailed 3D results using HTML
    • based on modern web standards so usable with any modern browser (tested in Edge, FireFox and Chrome)
    • embeddable in other HTML documents
  • Performant
    • based on WebGL
  • High quality visuals
  • Works both offline or interactively in client-server setup
  • Simple, clean API
    • friendly Python front-end
    • basic mesh json file format
    • other language front ends easy to add

An example render:

Example Render

Here is an animation of the Getting Started tutorial ( Python C++ ):

Getting Started

Architecture

The core ScenePic library is written in TypeScript and based on WebGL. This is compiled down to dist/scenepic.min.js which is a 'minified' JavaScript library that can be loaded in HTML pages to enable ScenePic to display data.

The core API for ScenePic is a JSON-based scripting file format. The simplified architecture diagram below illustrates how these scripts are used to define a Scene which is the top-level object in ScenePic. A Scene can contain multiple Canvases (3D drawing canvases), Images, and TextPanels. Each Canvas can contain multiple Frames. Frames comprise multiple Meshes, and Meshes can be reused across different Frames and Canvases. Meshes are basically triangle meshes, comprising flat vertex and triangle buffers. Each Mesh has an optional Image associated for texturing purposes. Images can also be displayed as flat 2D Displayed Images.

ScenePic Anatomy

However, most users will not need interact with ScenePic's core API and scripting language directly. Instead they will use one of the client-language front end libraries to easily generate ScenePic JSON scripts. Currently supported are C++ and Python.

Expected Usage

The main branch of the ScenePic git repository will be kept up-to-date with the latest version. We highly recommend, where possible, using the binary builds we provide. That said, the library is FetchContent compatible, and can be easily included into C++ projects where desired.

Using the HTML Client

ScenePic UI

A ScenePic HTML page will look something like the image above. This example shows four Canvas objects, each of which contains several Frame objects (referring under the hood to a set of Mesh objects).

The UI supports standard 3D mouse controls (drag to rotate, shift-drag to translate in xy, mousewheel to translate in z) to move the viewport camera. On touch screens: single finger to rotate, two fingers to translate in xyz. You can slow any of the mouse controls by holding down the Alt key. If you accidentally transform the camera too wildly, you can reset by pressing 'r'.

In the top right of each canvas a Layer control will appear. This allows the user to toggle certain layers of meshes on and off interactively.

Each Frame for a 3D canvas has an associated Focus Point - a 3D location about which the camera rotates. You can view the Focus Point by holding down the '``' (backtick) key, and while holding this down it can be translated using the mouse. If you press 'l' then the camera is 'locked' to the focus point in xy, though you can still rotate and translate in z. Locking to the focus point is particularly useful to center useful content in animations where the focus point can be different in each frame. You can also toggle the camera automatically orbiting the focus point by pressing '\'.

For Scene objects that contain many frames, you can control animation by pressing the spacebar to play/pause or by using the playback control widget. You can also use the scrollbar to select different frames.

You can programmatically link all input events across multiple Canvases by using scenepic.py/Scene/link_canvas_events().

Building ScenePic core library from source

The core library portion of ScenePic is written in TypeScript which needs compiling to JavaScript.

Pre-requisites (install in order)

  • Node.js (JavaScript outside the browser)

    https://nodejs.org/

  • Install node_module dependencies locally

    From repository root folder:

    npm install

Build

Run commands from root folder. Builds output to the dist folder.

  • Build: compiles the typescript, packages all dependencies, and minifies.

    npm run build

C++ Client Build How-To

In order to build the C++ client from source you will need to first install a few dependencies:

Doxygen (optional)

If you want to build the documentation, you will need to download and install Doxygen. You can download and install the latest version of doxygen here

If you are on Ubuntu and want to build the documentation, you should run:

sudo apt-get install doxygen

(or equivalent, e.g. brew install doxygen on Mac) to install the Doxygen documentation creation tool.

CMake

The C++ build makes use of the CMake cross-platform build system. You can find instructions on how to set up CMake for your platform here. CMake is a meta-build system, which will create a platform-appropriate build setup based upon the files which we have provided in the project (e.g. makefiles for *nix, Visual Studio project files for Windows). We require a minimum version of 3.15. We also require a C++ 14 compliant toolchain. One CMake is installed you should navigate to the cloned repository and run the following commands:

mkdir build
cd build
cmake ..
cmake --build . --config Debug --target cpp

CMake will attempt to find the dependencies on your system, and will tell you if it is unable to find something, in which case you can manually point it at the correct location. You may find it easier to use a visual CMake configuration editor (CMake GUI ships with the Windows distributable, and there is CMake Curses for *nix) to customize the build, for example by disabling the documentation or Python build subsystems.

To run tests, set the cmake option SCENEPIC_BUILD_TESTS=ON when building and run the test command once you have successfully built the library, in the following fashion from the build directory:

ctest -C Debug

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.

scenepic's People

Contributors

jnyfah avatar matajoh avatar pashminacameron avatar tjcashman avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

scenepic's Issues

Output not rendered in the right place

  • Run the sample here https://github.com/microsoft/scenepic/blob/main/python_examples/tutorial.ipynb
  • Either in Jupter Lab or Jupyter Notebook
  • Save the notebook, close Jupyter
  • Restart Jupyter lab or notebook
  • Re-open the notebook
  • You'll see that the outputs are not in the right place,
    The postions of the outputs are pretty random, sometimes all of the outpts appear under a single cell, some times we have two outputs under a single cell and rest under another.

I can repro this same problem in Jupyter Lab, Notebook (& VS Code with a few fixes, not yet released).

Is it able to update vertex color for key frame?

Hi,
I am using scenepic for visualizing and debugging my project, it is super cool!
Currently, I would like to visualize some error maps onto a mesh sequence via heat maps.
However I found either update_mesh_without_normals() or update_mesh() has no interface for changing per-vertex color.
Are there other ways to update per-vertex color for keyframes? Thanks a lot!

Touch controls

There are some functionality gaps on mobile/tablets:

  • Multi-touch rotate
  • A way to reset the camera (double tap?)

Basically, need to ensure that you can do (almost) anything with multi-touch without access to a keyboard.

Support wasdqe keyboard shortcuts for translating the camera

Have a toggle keypress (e.g."g") to enter "game mode" where:

  • w/s/a/d/q/e = translate camera forward/backward/left/right/down/up
  • mouse movement (with no clicking required) is captured and turned into camera rotation about current camera position

You can then toggle out again into standard camera mode.

File size

Very large scenepics cannot be loaded by most browsers. There needs to be a way to separate data and viewing to allow streaming of large quantities of screenpic data.

numpy 1.23 breaks scenepick

Update to numpy==1.23.0 breaks scenepic 1.0.8 (on Windows and Ubuntu).

Reproduced by using a reduced jelly example:

import scenepic as sp
import numpy as np

scene = sp.Scene()
canvas = scene.create_canvas_3d(width=700, height=700)

jelly_mesh = sp.load_obj(r"C:\Users\tabaltru\Downloads\jelly.obj")
texture = scene.create_image("texture")
texture.load(r"C:\Users\tabaltru\Downloads\jelly.png")

base_mesh = scene.create_mesh("jelly_base")
base_mesh.texture_id = texture.image_id
base_mesh.use_texture_alpha = True
base_mesh.add_mesh(jelly_mesh)

positions = jelly_mesh.positions.copy()
mesh_update = scene.update_mesh_without_normals("jelly_base", positions)

Leads to the following error:

Exception has occurred: TypeError
update_mesh_without_normals(): incompatible function arguments. The following argument types are supported:
    1. (self: scenepic._scenepic.Scene, base_mesh_id: str, positions: numpy.ndarray[numpy.float32[m, 3], flags.c_contiguous], mesh_id: str = '') -> scenepic._scenepic.MeshUpdate

Invoked with: <scenepic._scenepic.Scene object at 0x000001FB7FD8ECB0>, 'jelly_base', array([], shape=(0, 3), dtype=float32)
  File "C:\code\mrai.moai\moai\sampling\scenepic_test.py", line 17, in <module>
    mesh_update = scene.update_mesh_without_normals("jelly_base", positions)

Tried in a clean conda environment both with numpy==1.22.0 and numpy==1.23.0 with only the latter breaking.

Pylance Typing in VSCode reports errors on many ScenePic methods

VSCode reports many errors due to missing Optional tags on ScenePic methods.

e.g. running
scene = sp.Scene() shows the error Argument missing for parameter "scene_id". The documentation for the method states that scene_id is optional, but the type hint is str instead of Optional[str].

VSCode version: 1.75.1
Python version: 3.10.6
Python extension version: 2023.2.0

See below for VSCode screenshots of running getting_started.py.
image

image

Vertical lines and label placement on Graph

It would be nice to have a bit more functionality on Graph, in particular:

  1. Vertical lines to separate out regions of the sparkline
  2. Ability to position the labels below the graph

Add support for Apple Silicon chip

Thanks for the package, however I'm unable to use this on Mac M1 as there are no wheels for for the Apple Silicon chip.
Please consider adding support for apple silicon chips.

Issue on linux in scenepic 1.0.9

scenepic 1.0.9 seems to fix all issues on windows, but on linux I get the following error:

  File ".../something.py", line 6, in <module>
    import scenepic
  File ".../site-packages/scenepic/__init__.py", line 36, in <module>
    from . import _scenepic
ImportError: .../site-packages/scenepic/_scenepic.cpython-37m-x86_64-linux-gnu.so: undefined symbol: _ZN8scenepic13LayerSettings15NO_RENDER_ORDERE

Missing intellisense in some IDEs

The C++ backend causes some issues with intellisense (though help still works). Potential fix could be the use of stub files, definitely worth investigating.

ScenePic doesn't show output in Colab

ScenePic works great with Jupyter notebook for visualizing the results of a cell just by writing scene. However, this does not seem to work with Google Colab, see this example.

The scenes do get created, but nothing is shown in the cell output for scene.

import scenepic as sp

scene = sp.Scene()
scene.create_canvas_3d()

# This doesn't work: nothing shows in cell output.
scene

Strangely a workaround of saving the scene to HTML and then displaying that does work. But it would be great to fix the regular behaviour.

import IPython

# This works, but I find it fails for large scenes.
scene.save_as_html("scenepic.html")
IPython.display.HTML(filename="scenepic.html")

Camera Space Labels are hard to use

Labels in camera space are difficult to use (bouncing up and down, hard to figure out what 3D position translates to a 2D position in the camera plane, etc.). We need a different method of placing 3D labels in camera space that makes them easier to use and thus more useful.

Jupyter examples with Visual Studio Code

Hi,
Thanks for releasing this great library!

I am using Jupyter Notebooks in Visual Studio Code.
When I run the "getting_started.ipynb" in python_examples, the final line of code

# display the scene in Jupyter
scene

does not show anything in the output cell in Visual Studio Code Notebook.
What is the expected behavior and/or best practices of using scenepic with Jupyter in VS Code?
Thanks a lot!

Flickering when two htmls rendered at the same time in wandb.ai

First of all, this tool is extremely useful, thanks!

I thought scenepic would be a nice combination with wandb.ai for logging 3D data, since wandb supports logging HTML files.
However, when I tried to log HTMLs saved by scenepic to wandb, some flickering of the rendering happens (shown in this video). It only happens if 2+ HTML windows are both on screen and doesn't happen when only one HTML window is shown.

Any clue why this happens?

2D Pan/Zoom

It would be really helpful to have the ability to pan/zoom in on 2D canvases

Improvements to moving focus point

The caps lock functionality for moving the focus point is not working reliably (only tested recently on mac chrome and safari), and was never particularly intuitive.

Fixing the existing functionality and then working on improvements would be fantastic. E.g. hit testing a mouse click to put the focus point to either the click or the centre of the mesh being clicked.

Issues with add_coordinate_axes

Minimal repro:

auto mesh = scene.create_mesh("", "", false, false, false, svt::Color::Color(0.2, 0.3, 0.5));`
mesh->add_coordinate_axes(1.f, 1.f);

When a new mesh is created with a shared_color that's not None, it invokes mesh->shared_color method with the condition
this->m_shared_color.is_none() && !shared_color.is_none() which causes the mesh to be created with a vertex buffer with 6 columns. If a shared colour is not provided, then the mesh is created with a vertex buffer that's 9 columns wide (with no rows corresponding to no vertices). When we then call add_coordinate_axes(), we end up in append_vertex()->append_row() workflow with a situation where we want to append a row vector that's 9-wide to a matrix that is 6-cols wide.
This does not however happen if instead of add_coordinate_axes(), we call something like add_sphere() or add_icosphere() because these workflows create fresh vertex buffers after checking the presence of texture and colour for the vertex buffers.

Support for rendering large point clouds

Hi,

This seems like a great visualization tool for 3D problems! It would be nice to have some support for rendering large colored and lit point clouds. I tried adding spheres to a scene (one per point) but this slowed down very quickly for even a moderately large number of spheres (~10-50k). It would be nice to have support for rendering very large point clouds!

Toggle layer visibility with a keyboard shortcut

Having the ability to turn on/off the visibility of a given layer within a canvas is extremely useful. However, one has to click the checkbox with a mouse pointer, which gets a bit tedious especially when one wants to repeatedly toggle the visibility of a layer (e.g. to visually compare it to the layer below). It would be very convenient to have keyboard shortcuts support for this action, e.g. CMD/CTRL + <layer_id>.

Rendering Order

There are multiple places in which the rendering order of menus/dropdowns/canvases result in occlusion. Requires that z-order is being set carefully for all objects to avoid overlapping. It is important that the solution not use layers, as then this clutters the dropdown boxes further.

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.