following question:
I'm currently working on a Travel App and I thought of the idea of implementing an 3D Globe that can be rotated by the user. I thought of the Globe as a basic White Sphere with the borders of the countries visible as a stroke. All countries that have been visited should be filled with a color.
I thought of implementing it with the unity widget, but I'd like to maintain a lightweight feeling.
Is there a way to emulate js or WebGL?
What do you think is the best way to approach this?
Thank you for your time
Linus
You can use webview_flutter, I played with it a little bit to display planet models in javascript library three.js. Thanks to it you can use it like standard js instance of it with only one drawback that I didn't try to solve: I was unable to run it in browser mode as Flutter needs to emulate js itself by platform speciffic way. There is option to load js/html code from local assets but then you will not be able to load models in js directly as you will face cors policy restrictions, then the only way is to pass models as json from flutter code. It works pretty well, supports two way communication between js and flutter so you can also add events to model etc.
Related
I've got an application built in flutter where we have a page transition that currently just sticks to pretty out of the box stack/slide.
We're trying to create a page curl effect similar to https://www.youtube.com/watch?v=e1znh05-iXY on the transition but not having much luck faking it with 2D animation/clip-path coupled with the gesture controlling the path similarly to the video being extremely difficult, almost impossible
Until we have some sort of 3D support within Flutter - the only way to do it that I can think of is using Unity3D via https://pub.dartlang.org/packages/flutter_unity_widget
But I don't know how this will work when we need it for every page?
OR
Going the other way and importing our Flutter app as a library in Unity to render every page within Unity.
Could I please gets some thoughts on whether either approach will work and any advice on a potential path forward?
Thanks in advance guys.
see this plugin, it's close to what you need you can take inspiration :)
https://pub.dartlang.org/packages/flip_card
I'm building up experience with web development and my next projects are some web maps. I've looked into Google Maps and Open Street Maps and would like to use OSM for a project as it contains more detailed information of building footprints.
I've tried styling Google Maps which seemed fairly straightforward, but I'm a little lost with OSM. I've got to the point of trying to create my own renders (with TileMill) but this is crashing my system due to the amount of data.
What I essentially need is this (but for the UK);
http://maps.stamen.com/#terrain/12/37.7706/-122.3782
Are there any resources which you can recommend or how easy/ difficult is this to create myself? I think I would need to create the map (with TileMill or similar and then find my own servers to host), or is there an easy way to convert the standard map to Grayscale?
I want to keep it as simple as possible so please any recommendations?
Turning the standard map to grayscale: I might be very late to this but for anyone else running into this question: I found a very easy solution if you're working with HTML and Javascript using OpenLayers and the standard OpenStreetMap-Tile-Layer in color. I took the solution from here: https://openlayers.org/en/latest/examples/semi-transparent-layer.html
I don't know much about web development but this solution worked for me. Upon creating the map, as done in main.js in the example from the link, a class name is defined ('bw')
className: 'bw',
that can be used in index.html to manipulate the style o f it in the part:
<style>
.bw {
filter: grayscale(100%);
}
</style>
My application was altering a pre-built web-map from the qgis2web extension for QGIS. I was able to turn the tile layers from the background map to grayscale so the results would stand out more.
You could use https://github.com/Zverik/leaflet-grayscale to display any tile layer in grayscale. It's a plugin built upon the leaflet map displaying library.
In my project, I want to embed Google Earth inside one of the User controls. I have seen many example in web where people say how to do it using winforms. I have seen few more sample who actually integrate it in WPF but using WindowsFormsHost/HwndHost I am eliminating this to avoid the airspace problem.
What exactly in my mind is something like to have a rendering Engine class and have an image in the control and use back buffering to draw data from rendering Engine class on the Image.
Has any one integrated Google Earth without using WindowsFormsHost/HwndHost? Any help would be greatly appreciated. Thanks in advance.
Try using D3DImage. WPF gives a callback to fill in the back buffer. Have a look at great sample by Dr WPF on Code Project. You can find the sample here.
http://www.codeproject.com/Articles/28526/Introduction-to-D3DImage
~Yogesh
I'm about to start a Web application that will use interactive generated 3D content. Aim is to let it run natively in the browser, i.e. no Flash is allowed, only JavaScript + HTML5.
Apart from using pure WebGL it's better to use a lib that will offer a more high level interface.
The approach of X3DOM looks great for me - and it looks like it's supposed to become native in the browser and the lib will pave the road.
But after my first impressions I'm not sure if it's lightweight enough. Apart from the 400kb JS-File it slows down Firefox.
The features I need are not many. The whole scene set up could be easily done by "hand". But I need user interaction including to figure out where the user clicks. And later I want to be able to load and insert 3D objects in a common file format.
PS: Browsers of choice are Firefox and Webkit based ones. Desktop and Mobile ones. I don't care about IE.
PPS: Yes, I know the question: WebGL Framework
X3DOM is great when you come from an X3D background (and developed by great people), but if you have no preference watsoever, Three.JS would be my pick.
I looked at most WebGL frameworks just last week, and it indeed seems almost every one of them is in the 300kB range. That's too heavy for me, too. Luckily I found lightgl.js which has everything you need to get started in 28kB, MIT license.
The main thing for me is just abstracting canvas, shader and texture initialization. But lightgl.js does also have some mouse handling and model loading etc.
i think the decision boils down to:
do you want to have a more design or programmer approach.
x3dom: its leveraging of x3d for describing the scene lends itself to a more designer approach, with just the adding of the x3dom css and js one can do this :
<X3D><Scene><Shape><Box/></Shape</Scene></X3d>
three.js: only allows for scene generation through javascript, and a lot of additional code is necessary just to set up the canvas. view the source of this simple box example: http://stemkoski.github.com/Three.js/Template.html
neither way is wrong, i prefer designing the scene and then using js when needed for any computations.
I have some data that is displayed in a bar chart, using Google's Visualization API. Was simple enough until designers redesigned it... Now it appears to be something that is beyond what Google can help me with.
Given the attached mockup (and note the finer details like reflection and gradients!)- how would you go about building it? Using some existing graphing libraries? Homebrew from the ground up?
Thanks for any advice.
If you need to adhere to the custom design requirements as depicted in the image above, I would build a charting application using a more generalized graphics library such as Rapheal.
While it doesn't provide a simple API for plugging data into a chart, it does provide the ability to build a chart with the following:
a variety of shapes (i.e. the bars)
gradients
embedded images (i.e. the background)
You can change the visual effect using CSS.
Ofcourse you can use chuckx recommendation of Rapheal which is a SVG based Javascript Library. It can accept JSON values so say if you have JSON from Google API you could feed in directly.
Option 2 : HTML Canvas. There are lot of HTML 5 canvas libraries like Kinect, fabric.js powerful javascript canvas libraries