3D visualization in browser - browser

I am looking for solutions for 3D visualizations in web browsers.
For now I just need to do research about this topic, i.e. I need to know how many solutions exist and which of these are good and why?
Thanks

Brief overview of 3D on the web:
VRML. An HTML-style markup language for 3D models that was supposed to be the amazing cyberspace future of the web, back when we still thought what the web needed to be popular was just to totally change everything about it. We were idiots. VRML is all but dead.
Java. JVMs from 1.3 can run the Java3D engine in applets. With the decline in prevalence of desktop Java I have yet to see this in the wild.
Flash. 3D-primitive support in Flash 10; libraries that hack it in earlier Flash versions, and provide higher-level engine features. (Papervision, Sandy et al.) This is how the majority of in-browser 3D is done today.
CSS. WebKit provides a perspective transform feature to CSS, which has been proposed for standardisation. Won't offer anything like full 3D engine features of course, but the capability to integrate with HTML content in the page is interesting.
O3D. Google's experimental 3D engine browser plugin.
WebGL. Proposed binding of standard OpenGL to JavaScript and HTML5 canvas. Of interest in that you can use it in plain JavaScript with no plugins, but it's pretty low-level. Currently only available in in-development browser snapshots.
Others. There are gaming 3D engines that have been packaged into a plugin, eg. Unity, and a few sundry proprietary-format model viewer plugins.

Open standard webgl,
if you are prepared to download a plugin - lots and lots
Nothing immediately leaps out for maps, a good place to start is opensourcegis,

Unity3D is a game engine that is (relatively) easy to use and builds to multiple platforms including the web (provided you install a plugin).
http://unity3d.com/

X3DOM is plug-in free, supports a lot of X3D (not prototypes) and is written in web browser javascript (where you can do all the prototype stuff you like). Cobweb is an ES6 JavaScript library which supports VRML2 (except collisions last I checked). Cobweb is plug-in free and runs in firefox. Both of these tools are written in WebGL. You may have to convert your event code to X3D. In x3dom, you may have to call x3dom.reload() if you load elements (X3D and Scene) programmatically.

Related

Are there any high level general purpose graphics libraries for julia?

Julia libraries like 'GLAbstraction' are too low level for me. I need something like the 'Canvas API' for JavaScript in browsers. Are there any?
This is not an exhaustive list. I put the first several links I was aware of. I would start with QML.jl if you can.
Related discussions:
https://discourse.julialang.org/t/julia-for-gui-app/416
https://discourse.julialang.org/c/domain/viz/17
Desktop Graphics Engines aka Desktop GUIs
If you search through the JuliaCon Videos from past years, you can find talks and walkthroughs for these packages.
I have a background in Qt and the Qt Libraries, and it is very general purpose. QML is very friendly if you have a javascript background. The KDE desktop in Linux is built around Qt. Many desktop apps in general include Qt dlls, and use it as its backbone.
https://github.com/barche/QML.jl
And here is a youtube link or two about it:
https://www.youtube.com/watch?v=AddbHe05yRg
https://github.com/barche/juliacon2020-qml - example code for the most recent talk on it
https://www.youtube.com/watch?v=4Bmp0I731Ak
Gtk has been around a long time and you can see it in use in GIMP and Gnome desktop in Linux.
https://github.com/JuliaGraphics/Gtk.jl
The examples for Redux are mentioned in the PackageCompiler.jl video done recently. These are more or less the React Native style apps, shipping a chromium browser and rendering a react environment as a desktop app.
https://github.com/Gnimuc/Redux.jl
Interactive Plotting Libraries
There is a list of them here in the Plots.jl interface. Plotting in Julia is a pretty big rabbit hole, and there are tons of options to look into. Jupyter notebooks and the like with interactivity layered on them blurs the line between what is a GUI and what is just a plot.
http://docs.juliaplots.org/latest/ecosystem/
https://juliaobserver.com/categories/Graphical%20Plotting
https://github.com/JuliaPlots/Makie.jl
https://github.com/JuliaGL/GLVisualize.jl
https://github.com/JuliaGizmos/Interact.jl
https://github.com/plotly/Dash.jl
Web Frameworks
https://genieframework.com/
https://github.com/JuliaGizmos/Interact.jl
https://github.com/plotly/Dash.jl

Gwt and html5 multithreading / WebGL support

I am currently researching GWT as a means to develop web apps for a future project, and the more I read, the more I like the features it provides. Yet I am not quite sure what features of HTML5 are fully supported. I am more interested in multithreading (the new worker threads that work straight from JavaScript), WebGL rendering through the canvas element and possibly audio.
If these features are not supported yet, does anyone know any good libraries that are somewhat fast / stable for such features, or if it's possible to create custom widgets / wrappers, or a combination of writing code in GWT and pure JavaScript.
I know there are simpler ways of implementing these through various plugins, but I want something which is fully complaint with open web standards, meaning it has to run straight from the browser, without any plugins. That is why GWT seems like the best candidate, it "compiles" straight into JavaScript and uses features only from the official specifications of html.
GWT is ultimately compiled to javascript, so it has all the features of Javascript.
GWT provides classes (Widget, etc..) that wrap javascript/DOM functionality, but this is limited to standard functionality.
You can access all new/non-standard functionality (WebGL, ..) via JSNI. JSNI allows you to call JS, be called by JS and access properties/objects.
So if what you need can be coded in JS it can be coded in GWT via JSNI.

How to build an shipable, "local", branded mini-browser

Since I don't really have a good idea for word to search with myself I’d like to ask you:
Is there some project, technology, w/e that enables you to build a 'browser' with a very slim ui. Just some CI and a customised "starting page".
I'm thinking of something like the Webkit engine (and interface) Valve/Steam uses for it's clients store page.
In what direction should I search for something like that ? How would one start implement something like that ?
Answers to questions:
We need this to provide something like a "Kiosk" application (for touchscreens) and shippable to our Customers. Running a browser in "full screen" is a temporary solution.
As of Platforms: Windows is absolutely sufficient for now, but Mac/Linux wouldn't hurt.
Prism looks nice so far but lacks the "shippable" part, e.g. I see no way of packaging it.
Take a look at Mozilla Prism. It's a "UI-Less" version of the Mozilla/Gecko rendering engine aimed at deploying web apps on the Desktop. It's also multi-platform. It might be fairly close to what you need, with comparably little work.
WebKit has bindings for many languages, is cross-platform, and is full-featured as a HTML engine. A bit of work capturing signals and calling functions will make it into any kind of web browser you like.
You could use Adobe Air, follow this tutorial and include your website within an iframe. That would allow you to build an executable you can ship to your customer.
Various graphics toolkit libraries contain some components which can display a limited amount of HTML. I've seen this in qt (a C++ GUI library) and in Java Swing, and have indeed built a tiny "browser" in Java within a couple of hours. Java Swing lets you attach a link listener so links can be made clickable and thereby jump to different URLs. Thus, my application could be made to work as a very limited browser.
This approach lets you display text, images and links; in the case of Java, there's even fairly good support for CSS styling. However, there's no simple way to make buttons and form fields work, and of course no support for manipulating the DOM or anything else done in JavaScript.

Running C# app inside browser as a plugin

I have a small 2D game engine written in C#, using DirectX. Is it possible to somehow run it in a browser as a plugin? Like for example Flash and others, where you go to a site with a game and it will ask you to install a certain plugin and then you can play the game in the browser, with mouse and keyboard input.
I have searched around for hours and I still don't know what I'm looking for. I have so far primarily focused on Internet Explorer, but there are plugins, addons, extensions, etc I don't know what I need really.
Yes I think it is possible.
For example, I have an HTML page which includes an element like this:
<object id="simpleControl1"
classid="http:RenderTextProject5.dll#RenderTextProject.ScrollableControl"
height="300"
width="300">
</object>
The 'classid' attribute value has the following meaning/syntax:
RenderTextProject5.dll is the filename of a compiled .NET assembly
RenderTextProject.ScrollableControl is the qualified name (namespace plus classname) of a class which subclasses System.Windows.Forms.Control
I can then see the control being rendered in the browser.
I'm using IE (IE8, but it used to work with IE6 too), and I have the .NET framework installed on my machine (but I think I needn't have the RenderTextProject5 assembly installed on the client machine).
There may be some other caveats too (e.g. I needed to run in the Intranet security zone).
See Return of the Rich Client: Code Access Security and Distribution Features in .NET Enhance Client-Side Apps.
Look for Silverlight.. It is maybe not exactly what you need but it is a browser plugin capable of running C# code ;)
There is a relatively new plugin called Unity. It is a bit more complex, as it is a dev/3D authoring environment on its own, but uses C# as its language as far as I know. However I don't know if pure 2D programming is possible (well, may be worked around using ortho 3d?).
The basic version is free to download recently, maybe worth a check.
It is possible to run C# applications in a web browser without using plugins. For example, C# applications can be compiled into JavaScript applications using JSIL.

Is it sensible to dynamically generate SVG images on websites yet?

I'm just learning about SVG, and it seems great but I'm not sure about browser support - have people successfully got around this, or is it still too early?
Raphael is a cross-browser vector graphics library which might be worth a look.
You can use John Resig's processing.js library to get cross-browser compatibility.
There is also Walter Zorn's (lot of DIVs) technique, that doesn't use SVG.
There is a new way to bypass internet explorer's lack of svg-capabilities:
The google project svgweb: Scalable Vector Graphics for Web Browsers using Flash.
It's a JavaScript library which provides SVG support on many browsers, including Internet Explorer, Firefox, and Safari.
I thought it was worth updating this dialog because things are becoming more "do able" in SVG cross-browser. As someone who has implemented some (fairly significant) systems for organisation I have been "dabbling" into the world of "cross-browser" SVG.
I see the words "still too early" on a dialog started 11 months ago and I'm adding to it.
Please go to my site that shows some of the capabilities of Raphael. You can easily link to the main Raphael site there after your pitstop.
My website was implemented with Raphael 0.8.6 but the creater of "Rap" just brought version 1.0 from beta and that (additionally) fully supports SVG "paths"
If you want to visit the world of CROSS-BROWSER interactive/SVG in it's current status please visit these constamtly updated websites via:
http://www.irunmywebsite.com/raphael/raphaelsource.html
I'd say your best bet is to create the image in whatever format you're most comfortable with, then convert it to SVG with something like ImageMagick. You could write PostScript by hand or with a library, or directly create the image from simple text/shape primitives using the ImageMagick API. There's pretty good documentation, and you can call ImageMagick as a COM object (assuming your language has good COM support).
Adobe also makes an SVG viewer plugin that you can link to on your site for people to get full functionality of your site. Unfortunately, they are discontinuing support for the plugin, but by that time, it is expected that more browser support will be forthcoming (hopefully). Several years ago I worked for a company that wrote an entire web app using SVG, and we had great success with this plugin.

Resources