Objects visualization - javascript

For some time now I have been meaning to improve the visualization on the web of some surfaces. So far, I record an animation (say on Matlab or Julia) which I upload online. Rather, I would love to use javascript (with WebGL or other if you have a suggestion?) to call it in my index.html file.
To be more precise, suppose I have three 2D arrays X,Y,Z which represent a surface. The goal would be to have a javascript code (unless there is a better solution) to visualize the surface and say allow for 3D rotations.
Unfortunately I have no experience with the language and more generally not much knowledge in visualization. In particular, I was unable to adapt the "rotating cube" example of WebGL for my needs...
Does anyone have a suggestion on how to accomplish this? If there is a slicker way of achieving this I am all ears :)

Related

Is there any way to draw a artificial neural network connections in a nice way? [Javascript]

So I've been working with neural networks and artificial intelligence for a while and what I'm trying to do right now is, from a genotype I have (a sum of sensors, neurons and actuators) draw how the neural network is (with recurrent/recursive connections being showed nicely, etc.)
What I have done now in javascript is this: I know, its ugly
I have achieved this using SigmaJs a Javascript node drawing library, but I think it's still ugly, and what I'm looking for is a node drawing library that can achieve recursive connections in a nice way (right now I'm drawing them with a red color as you can see on the image).
I have examined a lot of GitHub repositories and websites that can be helpful but aren't worth since they aren't that nice.
Has anyone got an idea of what can I use, in javascript? If not, in any other language, how can I achieve what I want?
Regards, Miguel

Displaying CAD images with javascript

After a couple of days searching i decide to come here to ask if someone knows how to display 3D images (CAD images) in a website using only javascript.
My goal is to display .stp or .igs formats and allow user to interact with.
So far I've found a couple of frameworks:
https://github.com/tbuser/thingiview.js
http://threejs.org/
https://github.com/humu2009/jsc3d
But they are outdated or they don't allow me to display the formats mentioned.
Does anyone had a similar problem to this that can share how to work with?
Another possibility I've thought is to extract jpg images from the above formats and display it with a 360 image view plugin such as:
http://reel360.org/reel
http://spritespin.ginie.eu/
(to mention a few)
Pros:
loads faster
easier to implement
Cons:
Need to convert to jpg
More difficult to implement
Outdated frameworks (except Three.js)
note: I don't need to have any interaction with the image such as go inside the image, make it transparent, explode... I just have to be able to display it like a 360 picture.
Do you have a nice way to achieve this?
Any comments would be helpful.
Thank in advance,
André
Step and IGES are cad formats and most 3d development in webgl is game development. This is on the other side of the art/games tech divide, the CAD format does not describe polygonal models*. So any program that could show these formats would need to have a geometric solver back end called a CAD kernel. No basic 3D framework will do for you. This is on the other side of simple 3D.
STEP is also a hideously complex format doing a importer is hard even with a CAD kernel. I would look for something like opencascade for the job of converting the cad data to polygons for display. Generally speaking there aren't many free B-Rep backends.
You could also use your existing cad app to do this. I doubt you will find a pure javascript version of a CAD kernel.
* think of it like this a normal 3d model is mostly polygonal. But a B-Rep model does not describe polygons but rather the interconnection of mathematical shapes. So before you can display a step of iges file you need to solve it. Start by reading this

Max flow visualization with JavaScript api - use d3.js, or something similar?

I'm looking to implement (or use a library if one already exists) the Max Flow algorithm on a graph with directed and undirected edges, and visualize it. I am leaning toward JavaScript. I am aware that d3.js and arbor.js allow interactive graph visualization, but is there a recommended way to visualize the actual flow from node to node? This is to demonstrate some concepts in theoretical computer science.
The ideal graph would be able to show edge capacities, edge costs (different from capacities), and node names, and edges can be one-way (directed) or two-way (bidirectional, arrows pointing to both nodes, or just no arrows at all. This is not two separate directed edges).
Any advice regarding a graph visualization tool - one where you can see the flow going from edge to edge - would be appreciated.
Note: I am not opposed to using Python or some other language if someone is aware of a nice framework/library that allows this kind of visualization.
Thanks.
d3 may be the solution to what you're trying to do, but it's good to keep in mind what it is and what it is not.
What it is: a very effective tool at creating data-based graphics. What it is not: a graphing library. That being said, you CAN use it for graphs. Most of the graphs that I do in javascript are built on d3, but when doing so, expect to do write a lot of to code for setting up your plots. You can create a flow graph that will show you what you want, but d3 doesn't contain a canned flow graph that you can drop your data into.
You may want to take a look at Sankey diagram in d3.js and go through the intro in d3.js to see how to deal with that.

Using Google Earth API to find the structure of a landscape

I am looking to use the Google Earth API to help one of my robots navigate around big obstacles (such as buildings).
Is there any way to get information on the structure of buildings/features (such as trees) that Google Earth renders through the Javascript API?
I think you can achive this via hit-testing - the GEHitTestModeEnum GEPlugin.HIT_TEST_BUILDINGS may be suitable for your needs - although the actual accuracy in the real world may not be high enough for you. Calculating a 'buffer zone' around you robot would be the best bet.
Here is the GEView hit-test documentation
https://developers.google.com/earth/documentation/reference/interface_g_e_view#a8e8274c1236b6bbeff60a7a74e15995c
Here is a working hit-test example.
http://earth-api-samples.googlecode.com/svn/trunk/examples/hittest.html

Create a web based GPS Skyplot

I am looking to create a web based GPS skyplot.
Currently just in the planning stages. Was wondering if anyone knew any javascript libraries or such in which this would be best to start with or have a look at, of if you have done something similar before. I know Flot is decent for plotting but unsure if it would be easy in this scenario.
TLDR: Looking for javascript libraries or other alternatives to create a web based GPS Skyplot.
Further info.
I would like to be able to maintain it all generally in javascript / HTML but am open to other alternatives. I will have a server passing me the GPS details.
Skyplot Examples: For those who don't know.
http://www.gpsoftnav.com/skyplot.html
http://www.novariant.com/resources/technologies/skyplot.cfm#
I came accross:Geographic Information Systems (Stack Exchange) yesterday, would make a good site for these kind of questions.
So if anyone is interested in this please also go make a commit :). Otherwise I am still looking for any feedback on the question.
Is it the graphical issues you are concerned with, or are you intending to also calculate which satellites are visible, and their azimuths and elevations at the given location and time?
If it's just the graphical part you are concerned with, I would use jQuery and Keith Wood's SVG plugin - see http://keith-wood.name/svg.html . This gives you a Javascript handle to Scalable Vector Graphics, for drawing circles, lines and dots on a canvas in the web page. It's simple to use, and the page I've linked to has examples that should help.

Categories

Resources