JBatUN

@kcoley I forgot to mention the most important part - your new file imported into Blender perfectly!!!

@kcoley Your findings definitely gave me some clues to look for. For the test view, there are basically 5 layers: a plane platform, map country borders (translated from geojson multiline string), map graticule, line based text labels, and a babylon primitive (e.g. box) generated from SPS. I'm not knowingly using submeshes unless SPS is considered as such. From your message I guessed the culprit would be the map, graticule or text labels (all line based) so I took a closer look at these. I generated four output GLBs ... without labels, without map, and without the grid. In each case the Blender import failed. This was a surprise. I then removed the SPS generated objects (box geometry) and it worked without errors. For my usual work around I loaded the file in the Three.js editor, changed the SPS material to MESHBASIC and set Vertex Colors to Vertex. The GLB file size changed from 1.09MB to 1.05MB but loads in Blender with no issue. I tested the outputs from the Three.js editor with all the different materials thinking it was a blender issue - but all GLBs imported ok. The reason I've been using Three for the re-export is I have the same problem when exporting from the sandbox. This could be a Blender Importer issue. And even more likely my code. Thankfully the work around is enabling us to keep progressing since this summer we'll be producing possibly hundreds of publication outputs (print, video, interactive). Without Babylon, none of it would be possible. So I hope all your efforts are not because I've made a mistake somewhere!!! Another BIG THANKS for your support and efforts, JB

@kcoley Thanks!!! Your efforts are very much appreciated. I've been testing a lot with Blender to see if I could find the specific issues. Just to be clear, here are the results: - Export GLB from my app ... -- Import to Blender -> fail -- Test with Babylon Sandbox -> works no problem, vertex colors are rendered. -- Export GLB from Babylon Sandbox and import to blender -> fail (same errors) -- Test with Three.js editor -> imports, but shader has to be changed to Basic and vertex color on. -- export GLB from three.js editor (with changes) and import to blender - success For now I've been using this quick work around to test blender rendering and everything has been perfect. A simple test image (Blender Cycles Renderer) below of Global Cholera cases. As @Deltakosh mentioned, with all the moving parts here between my app and Blender, it could be either of the two. I also recognize that this is probably not the usual workflow for most users. Again, thanks for all your efforts, JB

@kcoley I viewed the file in the Babylon sandbox and indeed it shows all the data and everything needed ... the lines and geometry with vertex colors. That's pretty much all I need for the export since the values are all data generated. The rest I can handle in Blender, etc... This could be an issue of the other viewers or plug-ins but I'll share with you just in case it does relate to the serialization process. The file you shared would not import into Blender or Three.js editor or ClayGL viewer. In all cases there was an error. When I export a new glb directly from my application, I import it to the Three.js editor, change the material for the boxes to basic, then the vertex colors show and I re-export to GLB (using the three.js serializer in the editor) - this GLB imports to Blender with no problem. 1.] Export GLB from Cambro 2.] View file: -- Babylon Sandbox - Good -- Blender: Error -- Three.js Editor: Good, with change to Basic Shader and Use Vertex Colors 3.] Import to Blender -- Export from Three.js editor to new GLB -- Import to Blender: Good In short, for some reason the GLB output from Babylon will not import to blender but the from three.js it will. Cheers, JB

@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

@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

@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

@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.

@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!

@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

@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

@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

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

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

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

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

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

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

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