JBatUN

Members
  • Content count

    15
  • Joined

  • Last visited

  • Days Won

    1

JBatUN last won the day on May 9

JBatUN had the most liked content!

About JBatUN

  • Rank
    Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. JBatUN

    Data Visualization Authoring Tool

    @kcoley I'm attaching a babylon file in case it helps. Unfortunately I had to produce it from Babylon editor but unedited - so hopefully it is close to what I would produce natively from the application. For some reason the usual serializer is not working for me (var serializedScene = BABYLON.SceneSerializer.Serialize( scene ) ...). Thanks, JB sceneFile.babylon.zip
  2. JBatUN

    Data Visualization Authoring Tool

    @kcoley If you have any questions please don't hesitate - happy to share any info I can that would be helpful. I can produce a .babylon file of the scene if needed. As for the ground, it's a plane with StandardMaterial texture. What's odd is even the diffuse, specular, and emissive colors seem to be lost. In editor I see a normal map is referenced, but it reads as undefined. One problem may be because I do (as an option) apply a displacement map. Otherwise the params are standard configuration of the material. var path = getTexture( platOpts.texture ); platform.applyDisplacementMap(path+"Displacement.png", 0, 1.5); Standing by if I can be of any assistance. P.S. Although the GLB can be rendered in Babylon, Three, and ClayGL viewers, it will not import in Blender (could simply be an issue with the Blender export add-on). I had to convert the GLB to OBJ to import. It's a bit of a shame that khronos lists so many exporters but very few importers. Thanks again and have a great weekend, JB
  3. JBatUN

    Data Visualization Authoring Tool

    @kcoley Sorry if I'm being a pain! I'll try to explain as best I can as I understand how difficult it can be to try to troubleshoot something without all the information. As mentioned before, the vertex color is data driven from the sps creation process. The material is part of the authoring process where I've incorporated virtually all materials and properties. You can see in the attached an example where parameters are set for PBR Metallic Roughness. Unless a base texture is set, the colors are retained and the textures are used for effect. This is applied to the geometry before the sps init function. From what I can tell from the export, the color shader data is included - if I work in Babylon editor and I manually set the material to colorShader the colors do show up. The data points otherwise render as black. The platform (ground) material properties are not carried over either. None of the parameters set for the material are included in the export. I've attached a screen shot for what is seen in editor to see the difference. Hope this helps. JB
  4. JBatUN

    Data Visualization Authoring Tool

    @jerome Thanks for the tip. I made the change to: var rgb = new BABYLON.Color3.FromHexString(c); sps.particles[p].color = new BABYLON.Color4(rgb.r, rgb.g, rgb.b, 1); c is a data generated value in hex so I'm stuck with the conversion, but the change is working well. Still getting the error message on export: babylon.js:4 BJS - [10:55:50]: Unsupported material type: colorShader In addition to the color shader a material is added with textures ... but this is also not coming through in the export. I'm sure lot's of user error here so I'll keep experimenting.
  5. JBatUN

    Data Visualization Authoring Tool

    @kcoley I've done a some more experimenting and wanted to confirm that your update to include lines is working perfectly. The map vectors and labels are rendering exactly as expected. Awesome job!!! The issue I'm facing appears to relate to the coloring of the sps geometry: sps.particles[p].color = new BABYLON.Color3.FromHexString(c); Where c is just a scale of hex values. For all the editors I've tried these values are not included in the export. @The Leftover I'm following your work closely especially your recent work with text rendering. Very impressive. We're focused on humanitarian and development data for an international organization and hoping that this platform will enable us to create data driven stories about complex subjects. Making quick progress on our authoring tool and will share on github as soon as possible. Hoping others will find it useful and possibly contribute. And good luck to you too!
  6. JBatUN

    Data Visualization Authoring Tool

    @kcoley Wow - thanks!!! I just tried the update with an example that is probably a good stress test (world map line system, label lines, etc.). It's hard for me to assess the update fully with the variances among the different GLB importers. I've tried an exported file in the Babylon editor, ClayGL viewer, and Godot ... all have a different result. There's a chance some of the issues I'm facing are my own error, but here's the error message I receive when running the following code: var glb = BABYLON.GLTF2Export.GLBAsync(scene, "sceneFile").then((glb) => { glb.downloadFiles(); }); I'm also including the GLB file in case you want to give it a try yourself. Thanks again for your great work!!! JB sceneFile.glb
  7. JBatUN

    Data Visualization Authoring Tool

    @Spankied I'm not using a UI Library per se if you mean frameworks like Bootstrap. Not sure if this answers your question, but here are a few additional details... - Most of the UI components are based on Polymer and custom CSS. I never used Polymer before but found it so easy, it served the purpose to have reusable UI elements for each view. All the elements are pretty much straight html as I'm trying to avoid dependencies. I'm not event using Polymer components...just the framework for creating elements. - These components are linked to a Vue.js model [component -> Vue model -> Babylon] - Also, I tend to use D3.js (for all it's features) as a JQuery like event handler. E.g, var saveImage = d3.select("#saveImageFile"); saveImage.on("click", function() { BABYLON.Tools.CreateScreenshotUsingRenderTarget(engine, camera, 2048); }); Lastly, for now I'm borrowing the Blender icons (as svg) or creating my own. Let me know if you have any questions. Cheers, JB
  8. JBatUN

    Data Visualization Authoring Tool

    @kcoley not sure if this is helpful for your glTF serializer work, but aside from the export of lines, I'm also getting the following error message: BJS - [02:58:48]: Material type ShaderMaterial for material colorShader is not yet implemented in glTF serializer. Also, if you need some extensive testing for your updates, would be happy to help. Cheers, JB
  9. JBatUN

    Data Visualization Authoring Tool

    Hi all, Following up on my last with some progress on creating a vector text capability based on the xeogl work. Attached is a simple test with about 200 labels. For our purpose, we're happy with the results. The text has a CAD like appearance and is rendered with a line system. It does also work with Tube for a 3D appearance but the performance was significantly effected as expected. If anyone is interested and needs a simple vector text approach we'd be happy to share the code. Kcoley - I think this should work well with the glTF serializer once you have the time to include line geometry. Cheers, JB
  10. JBatUN

    Data Visualization Authoring Tool

    Leftover - I was very interested in the text work you posted. I could be wrong but it seems like these libs are similar to what you were doing and could be a potential approach to having 2d vector text. Based on your experience, curious what you think about these ... worth looking into further? https://github.com/mikolalysenko/vectorize-text https://github.com/xeolabs/xeogl/blob/81b1469b38c698d22b17a73895d2de18d6423c5d/examples/js/geometry/vectorTextGeometry.js Eager to hear your thoughts. JB
  11. JBatUN

    Data Visualization Authoring Tool

    Wow - this community is awesome! To draw the topojson vector maps I use: var vmap = BABYLON.MeshBuilder.CreateLineSystem("lineSystem", {lines: maplines}, scene); vmap.color = color; In other cases, like the flows among countries I use curves such as: var links = getQuadraticBezierCurve(segments[0], segments[1], segments[2], 16); (BABYLON.Curve3.CreateQuadraticBezier). Basically, I'm using just about every form of geometry that Babylon has to offer. As for the serializer, the lines and curves are the key right now. For visuals that don't have lines the output has been excellent. Great work! It seems the bigger challenge is that tools have exporters (e.g. Maya) but don't have the same capabilities for import. So far each tool I use to view the GLB has a slightly different result. The ClayGL viewer has been among the best, but unfortunately not useful for my purpose. https://pissang.github.io/clay-viewer/editor/ My ultimate goal is to use Blender, Maya or Cinema 4D to produce narrative stories with the visualization. I am experimenting with a timeline / keyframe editor from within the application using https://github.com/zz85/timeliner. Thanks for your support! JB
  12. JBatUN

    Data Visualization Authoring Tool

    JohnK, Thanks for the test and playground examples! It was very useful ... although I'm using SPS for all the geometry, I was not using it for the labels. Will take a close look at your examples as every little bit may help in performance. Also, thanks for the 3D text link - was not aware. I think you're right though that the 3d geometry could add even more overhead. Ideally, 2d vector text would be the best option. Something similar to SVG text rendering. Basically line and curve paths. Everything else is working so perfectly so I'm hoping a solution will prevail... Will keep sharing progress and thanks again for the interest, JB
  13. JBatUN

    Data Visualization Authoring Tool

    I've only run a few quick tests and am not sure yet how the serializer will work with all the visualization types, but in my initial tests I found two issues: 1.) It didn't seem to work on anything that had lines (the vector maps, or axis in a chart) 2.) There were unpredictable behaviors when loading the file and rendering dynamic texture labels. From what I can tell (if I use the glTF), these are treated as raster texture images. Sometimes they show fine, other times the backing plane is black, etc. At this point I recognize that there are very good chances any issues I experience are because of my own coding and limited experience with Babylon. I'm also testing the import with Blender, Godot, Babylon Editor, and ClayJS ... each often renders differently. Once I spend more time on the export capability I'll understand more and will share the results. Thanks, JB
  14. JBatUN

    Data Visualization Authoring Tool

    Sebavan, Thanks for the words of encouragement!!! Unfortunately, I don't have an online deployed version yet and now the app is significantly coded for working in the Electron environment. This was necessary to enable a user to select the csv files used for the visualization, and eventually save files. I'm moving at a pretty fast pace and should have the code in Github within a week or two. In the meantime, a few more details for those that might be interested. The approach provides for virtually any type of data visualization. Currently the following models are available: planar point map, link map, time map, time path map (e.g. to see flights over time); sphere based map (globe) for all the same; force directed and sankey graphs, several tree layouts (e.g. cartesian, radial, treemap, circle packing, etc.), and finally cartesian and polar based charts (using any geometry). The integration with D3.js and Babylon.js makes all the above fairly easy. D3 loads the csv, parses it, and generates the layout, scales (e.g. Linear, Log, Pow, Sqrt, or geospatial). function loadData(url) { d3.csv(url, function (error, data) { data.forEach(function (d) { d.lfield = d.lfield; d.lat = +d.lat; d.long = +d.long; d.coords = [+d.long, +d.lat]; d.zfield = +d.zfield; d.sfield = +d.zfield; d.cfield = d.zfield; }); renderData(data); }); } Example of a sizing scale: var zExtent = d3.extent(data, function (d) { return d.zfield }); var zScale = d3.scaleLinear() .domain(zExtent) .range([0, 50]); Once D3 is done, all the coordinates and properties are available for Babylon to consume and render based on the view model. Depending on the view model, a coordinate transform function generates the sphere, polar, radial, etc. coordinates. The Babylon particle system then does all the magic: sps.initParticles = function () { var p = 0; for (var i = 0; i < data.length; i++) { // data variables var obj = data; var n = obj.lfield; var v = obj.zfield; var z = zScale(obj.zfield); var r = rScale(obj.rfield); var s = sScale(obj.sfield); var c = cScale(obj.cfield); var coords = (obj.coords); // scale by z sps.particles[p].scale.y = z; // reset to account for center origin of geometry var offset = sps.particles[p].scale.y; // set position by coords var position = gcoordsph(coords, offset); // geospatial coordinate transform based on projection sps.particles[p].position.x = position.x; sps.particles[p].position.y = position.y; sps.particles[p].position.z = position.z; // set color by variable sps.particles[p].color = new BABYLON.Color3.FromHexString(c); // Used for tooltips sps.particles[p].metadata = [n,v]; // adds name of each object p++; } } // end init function So far the performance for 1000+ data points has been excellent. The only exception is for cases where labels are used like in the example attached (World Country Tree with Population). It takes several seconds to render. I'm sure a lot of it has to do with my own errors in coding. However, for a few reasons, the dynamic texture approach is not ideal for this purpose - hoping there is a possibility to implement a vector, svg like approach for text rendering. One key note is that I named it Cambro (Camera in Esperanto) to strictly limiting the scope to visualization and not data manipulation. Each view expects a specific data model as a csv file. If the file fits the model, you can map the visual properties for all of the fields. I'm working towards exposing virtually all the properties available to create a fully customized scene. Will definitely be posting some questions soon to get the needed expert advice. Thanks again! Cheers, JB
  15. Greetings all, I'm new to Babylon and this forum (first post) but wanted to share a project I've been working on in case anyone is interested. I'm attaching a few screen shots of a data visualization authoring tool that provides views for planar and spherical maps, graphs, trees, and most conventional charts (cartesian and polar). The platform is based on Electron.js (to enable file system support), Vue.js (for property management), Polymer (to componentize the interface), and D3.js which is used for the data manipulation, e.g. parsing, scales, layouts, geo projections, etc. Of course Babylon is used for all the rendering. Once I clean up all the code I'll share the work on github with hopes others will be interested and possibly contribute. My goal is to have a blender-like authoring tool for data visualization. As you can see from the screen shots, I'm trying to expose all the properties needed to configure a custom view with all the benefits of Babylon. As part of my learning process I've tried to implement just about every feature available from materials, textures, post processing, geometry, etc. Eventually I have a few questions on some challenges I've faced. One of the key features we need is to be able to export a scene for use in an authoring tool such as Blender or Maya. This is to develop camera fly-throughs and other data oriented storyboards. I've been trying to use the GLB serializer but it appears there are some issues with lines, etc. I also struggle a lot with text rendering. Looking forward to posting some questions and benefitting from all the expertise of the community. Although this is my first post, I've consulted the forum for support at least a thousand times! Anyway, hope some find this interesting and eager to hear your feedback. Cheers, JB