I am attempting to use iTowns2 (https://github.com/iTowns/itowns2) to visualize point cloud data in the browser. According to the README: "[iTowns'] first purpose was the visualisation of street view images and terrestrial lidar point cloud."
From this I glean that there should be instances of people using iTowns to visualize point cloud data somewhere online. I've been looking for days and I can't find an example of someone using iTowns2 to visualize point cloud data in the browser.
The example in the GH repo renders a globe in the browser but no point cloud. There is a iTowns/iTowns2-sample-data repo which has a bunch of point cloud data but no instructions on how to use the data or references to other resources.
Has anyone used this package to show point cloud data in the browser? Does anyone know an article or resource that demonstrates doing this with iTowns2? Does anyone know of a different library for rendering point cloud data with examples and/or better documentation?
Ideally I would be able to track down the source code for something like this: http://www.itowns-project.org/#demo
The documentation is quite ambiguous, and judgind by the Github issues it looks like the library is under heavy refactoring.
I took a quick look to this repo and realized that it is just using Potree for point cloud visualization:
http://potree.org/
So you can just use Potree directly. Wich is better documented.
In addition to this, it's quite trivial to set up your own point cloud visualizer using Three.js.
Just take a look at the Points object:
https://threejs.org/docs/#api/objects/Points
And this example:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_points.html
Three.js also includes some 3D format loaders, like ply:
https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_ply.html
If you are interested in using las files you might also want to look at:
https://github.com/verma/plasio
Let's provide a early 2018 update! (source: I'm a maintainer)
iTowns now supports visualizing pointclouds directly. You can test it here: http://www.itowns-project.org/itowns/examples/pointcloud.html
If you want to test your own data, please visit http://www.itowns-project.org/itowns/examples/pointcloud.html?selector=1
We currently support results from PotreeConverter, and lopocs. We plan to add 3dtiles pointcloud format soon.
We indeed used potree for pointclouds before, but that was not ideal, a bit because we diverge on some technology/design choices, but mainly because using potree prevented us to tightly integrate pointcloud visualization in iTowns. For instance, iTowns stops its rendering loop when it has nothing to do (saves a lot of cpu), and potree does not. It also allows us to implement our own culling/SSE/network priority... heuristics.
Potree has currently better graphic post-treatments of pointclouds, although we also plan to add EDL and other improvements (occlusions for instance) soon. And of course, the advantage of iTowns is that it's not limited to pointclouds, but can display a variety of data type, from rasters to vectors, see the examples page and especially this example of a pointcloud on a globe.
But the main difference between these 2 projects is that Potree aims at being a standalone viewer (AFAIK), whereas iTowns is more a framework to implement your own app! Potree remains a big source of inspiration for us concerning pointclouds, big kudos to their maintainer :-)
(Btw, the github has moved to https://github.com/iTowns/itowns)
Related
I'm currently working on a project using sigma.js where I need to show a large number of nodes and edges (~10000 to ~100000 of each one) stored in a JSON file. But the library is getting laggy when I load the JSON, on each refresh and also when it shows me the graph it doesn't space the nodes. I was wondering if someone knows how to represent this kind of dataset fine.
To be honest i am on the same issue if it can helps, i think the book example of Gephi.org tutorial is still the best.
For the moment i am on including sigmaJS from cloudflare but i don't have any proposition for this.
Something like you replace the library with a link to cloudflare like the one used for phaser.io explained in it git repository or even tweenJS use the same way (it's the way of web devs see #indiedev #indiegamedev on twitter, it helps)
<script src="sigma.min.js"></script>
<script src="sigma.parsers.json.min.js"></script>
http://jsfiddle.net/thefailtheory/L45ue3er/
The threejs random particle visualization performs really well with 20K points.
https://threejs.org/examples/#webgl_points_random
Will be a bit of work to repurpose for network display but the upside is you can leverage GPU for rendering.
I have several data "layers" over the same list of "samples". Some layers are continuous float data, some are multinomial/categorical data, and some are binomial/dichotomous/boolean data. In my Javascript web application, I want users to be able to select a set of samples and see which layers are significantly different between the selected set of samples and all other samples. The end result should be a p-value for each layer, from a two-tailed test (where applicable) of the null hypothesis that the distribution over selected samples is the same as the distribution over unselected samples.
I've done the mathematical reasoning and determined that I want to use a Mann-Whitney U test for the continuous data, a Pearson's Chi-Squared test for categorical data, and a Binomial test (exact, without the normal approximation) for dichotomous data. All of these tests are available in the excellent scipy.stats library for Python.
Is there a Javascript library available with implementations of these tests? Failing that, is there a Javascript library that provides PDFs and PMFs and CDFs of the distributions that would be required to implement these tests, like the Chi-squared distribution, or the (discrete) binomial distribution? Failing that, is there a resource available that explains how these tests work with an eye towards implementation? Failing that, is there a library of basic mathematical functions for probability, like erf or the gamma integral?
I am aware of jStat, which seems to provide only a few continuous distributions with no API documentation, and of OpenEpi, which is more of a monolithically integrated epidemiological statistics system than a usable library.
This is not a full answer, just evidence to the negative.
Apart from never encountering such a powerful library I have googled a little and found no results other than jStat. However I have found a page (http://home.ubalt.edu/ntsbarsh/stat-data/Javastat.htm) where some client-side statistical calculations can be performed. This is not a library, and I have had a look at some of their javascript and it seems like they have coded the calculations by hand (which I wouldn't expect if a library existed)
So at best I offer some evidence to the negative.
(Also note the rather inconclusive post Recommend a good javascript statistics library?)
I wouldn't want to do heavy numerical integration in javascript though, can't you do that on the server-side instead, especially if the user is merely selecting data, and not entering it?
I came across this proof of concept earlier today (on TechCrunch.com) and was blown away and intrigued as to how they had managed to accomplish the end result. They state that they don't use webGL or any plugins yet they are able to interact directly with the GPU and render 3D visuals at up to 60 fps using nothing but Javascript. Any ideas how this could be done, or how to access the GPU from Javascript in general without the use of plugins?
Site Address is: famo.us
ps: Try using your arrow keys to shift orientation its far out!!
They're using standard HTML5 Javascript APIs to achieve this.
I saw several references to requestAnimationFrame in their code. This method allows one that uses a compatible browser, to display more fluid and optimized animations, with far better frame rates than setInterval based animations will ever allow you to have. This is certainly achieved by using the GPU and the available hardware background.
GPU or every other hardware component cannot be accessed directly using any Javascript routines. Instead, the browser, based on the called JS directives and the execution context, will use the GPU if possible to optimize some specific treatments, calculus and renderings.
EDIT
For future references, I recently found out (7 years after the original answer) that a new initiative - the W3C GPU for the Web Community Group, has recently been created in 2020 to do just that. It describes itself as follow.
The mission of the GPU on the Web Community Group is to provide an interface between the Web Platform and modern 3D graphics
and computation capabilities present in native system platforms. The
goal is to design a new Web API that exposes these modern technologies
in a performant, powerful and safe manner. It should work with
existing platform APIs such as Direct3D 12 from Microsoft, Metal from
Apple, and Vulkan from the Khronos Group. This API will also expose
the generic computational facilities available in today's GPUs to the
Web, and investigate shader languages to produce a cross-platform
solution.
In the long-term, this initiative might allow developers to directly interact with the GPU from all web browsers. You can track the implementation status of the WebGPU API Spec on Github here.
Concerning famo.us: they did analysed the bottlenecks of the Webkit rendering pipe and then found a way to bypass them while building the pages. Basically: the DOM tree construction, the Render tree construction, the Layout of Render Tree are bypassed. Take a look on this article for a whole explanation.
They're using CSS 3D transforms. Web browsers are increasingly using hardware acceleration to do these kinds of CSS3 things.
i think the webGL glsl.js library might be good for this, though i havnt seen benchmarks...
https://github.com/gre/glsl.js/
also this approach seems viable;
basically to use the gpu in the way we like to, hardware optimised functions (have a little look into "blas") are used, you do not want to write these! strangely it seems that people still use the old fortran blas.... there is some stuff with compiling via llvm and then using emscripten to turn it into javascript.
Use Emscripten with Fortran: LAPACK binding
the emscripten way seems the most versatile, im just about to check it out, but it looks like a mountain, also this topic seems to be somewhat of a call to arms, emscripten only works with fortran if you hack it (see links from the second link). i think what we are looking for is blas support in javascript, this is not a closed issue by any means, and for a few of us out here it is very frustrating! hopefully someone has a link to these blas libraries we cant find...
please let me know if i dont quite have my head round this issue, js is new to me.
also, suggesting html5 is sufficiently "optimised" to use the hardware, how can we trust this!? we need gpu optimised blas (basic linear algebra subprograms) e.g. dot product.
i think maybe also that these old fortran blas arnt actually the right thing for a modern gpu? node-cuda seems very likely the best thing i have found...
I have to write an application in javascript using the d3 graphics library to display SysML diagrams. I feel like most of this project is within my grasp but I have no idea how to approach one aspect of it.
Since the application will assume nothing about the complexity, size, or nesting of the diagram, hard-coding rules for how to arrange the blocks would be futile. I imagine significant study has gone into this kind of thing before but I am unaware of what it would fall under or where to look.
Also, does anyone know where to find examples of SysML diagrams in XML format? Any help is appreciated!
Since SysML is a UML2 profile, you might find jsUML2 a useful starting point for your attempts. Basically you could use the jsUML2 to draw the SysML diagram and then use the export function to produce the XML. NB: XMI is the standard for interchange between different tools.
I am working on this new project, wich is a new technology for me...
I'm working with Appcelerator Titanium, building this 3d application...
My applications suppose to be something like 3d Canvas...
I mean a ability to add objects to canvas (drag&drop),rotate them (3d),
and most important to rotate the whole Canvas(3d).
From checking the subject came with a lot of Plug-Ins and libraries:
Three.js,WebGl,HTML5 Canvas,CSS3...
The question is-Is anybody have an idea what is the best to use for
this mission?
Thanks!
Three.js makes it super-easy to make primitives and load pre-generated objects (typically from JSON data).
https://github.com/mrdoob/three.js/
Check out the examples at the bottom of the page, and note how little code is necessary to do anything. The only disadvantage is the overhead of a huge library like Three.js, along with the fact that it is still in its infancy and changing slightly by the month. Beyond that, there's not much advice I can give you as I have no idea what kinds of objects you plan to put in this canvas or what the goal if the project is.