The Leftover

Members
  • Content Count

    89
  • Joined

  • Last visited

  • Days Won

    2

Everything posted by The Leftover

  1. The Leftover

    Web Assembly

    I should not being doing this . . . but I have been experimenting with Web Assembly. With so many hexagons and so many crime incidents, Illuminated City has come computationally intensive tasks. My question is, have y'all tried to use it for some functions (e.g. ComputeNormals)? Did it perform well? Did it seem worthwhile?
  2. The Leftover

    What's next?

    Does anyone have a subjective / objective sense of whether people use MeshWriter? I see visits to Wingnut's demo pages (they load my hosted version) but that's all I got. Mostly curious, I guess.
  3. The Leftover

    Web Assembly

    Jerome, I see that. I will watch with anticipation. Good luck!!
  4. The Leftover

    Web Assembly

    @JCPalmer The '.buffer' approach you show in your example with WebGL looks the same as the one for WeAssembly, per my example further above. I think there is a good chance that we can have one buffer with minimal recopying. Says Pollyanna.
  5. The Leftover

    Web Assembly

    Jerome, if I am belaboring the obvious, sorry. I only have one copy of the data structures. It is shared between WebAssembly and Javascript. If you look at the code (from my August 3 post above) you will see that I create the array as WebAssembly memory. Then I create a view into that memory. Javascript or WebAssembly both may address the array at that point. As far as JavaScript is concerned, it is just a typed array. This array is sized/created early in the session and tends to persist for quite a while. In fact, sometimes I clear the array and start over; as opposed to allocating a new one. To drive the point home: Sometimes I write the same function in JavaScript and WebAssembly. More specifically, I have already written it in JavaScript and it is working. When I develop the WebAssembly, I set it up so that I can call either "flavor" of the same function. Given that I don't have a battery of test suites, this helps me spot unintended changes of behavior. Once I get things settled, smaller interactions with the array are usually done through JavaScript. Larger ones are done with WebAssembly. After all of this, I am happy with the effort. I did hit many dead ends but I also got several large tasks to run 3X faster. I hope this is useful.
  6. The Leftover

    Web Assembly

    brianzinn, not sure I understand why that would be. (I am not doubting it, though. And please don't explain it to me.) I ran into a problem where I had to choose between WebAssembly and Web Workers unless I was willing to do large array copying. They both have data sharing for large vectors but they wouldn't work together. I chose to use WebAssembly and skip Web Workers for now. Life on the bleeding edge . . .
  7. The Leftover

    Web Assembly

    Jerome, delighted to read your report. This FYI: I had done some profiling of Illuminated City and determined that speeding 'VertexData.ComputeNormals' would be a win for my application. It is a good candidate in other ways, being about 200 lines of vector arithmetic (with two calls to Math.sqrt). I had considered rewriting it in native WASM but quickly realized that I did not understand application well enough. Also, there were a bunch of boundary issues: it deals with multiple arrays that - I think - were not typed. Converting typed <--> untyped is gonna add a lot of overhead. Also, the only way I know how to process multiple arrays in a single WebAssembly module is to put them in one array and use indexed addressing. I do this for my own application but it is a hefty bunch of work. At the end, I did not. 'VertexData.ComputeNormals' is an example of a function that I would optimize the hell out of in JavaScript first. Good chance that is a win. Here is my only actual concrete suggestion, respectfully placed from someone who doesn't really understand your code: Migrate to typed arrays for the obvious suspects, like uvs and normals and so on.
  8. DeltaKosh, 1) Do you want to know how many websites use it? Or users? Or usages? 2) Have you used Google Analytics before and are you sure you want to put the answers in there?
  9. The Leftover

    Web Assembly

    The heartbreak of today was that the module I snipped this from runs faster in JavaScript. In other areas, I have reaped a 3x speedup with WebAssembly. I believe that issue is that there is substantial overhead in entering and exiting WebAssembly. You want the work it does while there to be large enough to make up the overhead and still give you a win. Gonna go soak my head . . .
  10. The Leftover

    Web Assembly

    Jerome, thanks. I usually do something like this. I create a module config object, and attach the memory there. This hands in whatever settings are needed and the memory. Now both JavaScript and WebAssembly can access the same typed array using 'hexlatticeMemoryView' and 'i32.load'/'i32.store'. I treat the WebAssembly module as a persistent "closure". Some of them have four or five function entry points. JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT hexlatticeImportObject = { settings : { weekbreaksLength : weekbreaks.length*4, weekbreaksStart : 16, monthBreaksLength : 0, monthBreaksStart : 16+weekbreaks.length }, imports : { log : console.log } }; hexlatticeMemory = new WebAssembly.Memory({initial:1}); hexlatticeMemoryView = new Uint32Array(hexlatticeMemory.buffer); hexlatticeImportObject.imports.mem = hexlatticeMemory; JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT JAVASCRIPT WEBASSEMBLY WEBASSEMBLY WEBASSEMBLY WEBASSEMBLY WEBASSEMBLY (module (import "imports" "log" (func $log (param i32))) (memory (import "imports" "mem") 1) (global $weekbreaksstart (import "settings" "weekbreaksStart") i32) (global $weekbreakslength (import "settings" "weekbreaksLength") i32) WEBASSEMBLY WEBASSEMBLY WEBASSEMBLY WEBASSEMBLY WEBASSEMBLY
  11. The Leftover

    ArcRotateCamera zoom to mouse position

    http://www.illuminated.city/mp4/DistrictZoom.mp4 I do this. It looks good. Code is below. At first glance it looks readable. No warranty. function animateCameraToTargetAndPosition(camera,newPosX,newPosY,newPosZ,zoom,newAlpha,newBeta){ var radiusAnimation = new BABYLON.Animation("camRadius", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT), alphaAnimation = new BABYLON.Animation("camAlpha", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT), betaAnimation = new BABYLON.Animation("camBeta", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT), targetAnimation = new BABYLON.Animation("camTarget", "target", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT), newTarget = new BABYLON.Vector3(newPosX,(Ø.tyN(newPosY)?newPosY:ψ(0)),newPosZ), thenStopCA = ()=>setTimeout(stopCA,150), newRadius = Ø.PN(zoomLevel[zoom])?zoomLevel[zoom]:zoomLevel[0],alpha,beta,radiusKeys,alphaKeys,betaKeys,targetKeys,twoPI=pi+pi; startCA(); newAlpha = Ø.tyN(newAlpha)?newAlpha:standardAlpha; newBeta = Ø.tyN(newBeta)?newBeta:standardBeta; alpha = (camera.alpha+twoPI) % twoPI; beta = (camera.beta+twoPI) % twoPI; targetKeys = [{ frame : 0, value : camera.target }, { frame : 100, value : newTarget }]; radiusKeys = [{ frame : 0, value : camera.radius }, { frame : 100, value : newRadius }]; alphaKeys = [{ frame : 0, value : alpha }, { frame : 100, value : newAlpha }]; betaKeys = [{ frame : 0, value : beta }, { frame : 100, value : newBeta }]; targetAnimation.setKeys(targetKeys); radiusAnimation.setKeys(radiusKeys); alphaAnimation.setKeys(alphaKeys); betaAnimation.setKeys(betaKeys); camera.animations.push(targetAnimation); camera.animations.push(radiusAnimation); camera.animations.push(alphaAnimation); camera.animations.push(betaAnimation); scene.beginAnimation(camera,0,100,false,5,thenStopCA); };
  12. The Leftover

    Web Assembly

    Gentlemen, thank you for the links. Let me some opinions base on three days of work. I started writing in straight WAT. Because I have a genetic defect that causes me to do things the hard way. However, it has caused me to learn a lot of things. WebAssembly is at the "MVP" stage as they call it. One can only create a module with functions below that - two levels. One can create a list of which functions may be exported. The MVP status shows: I couldn't figure out how to make a module-global variable that was mutable; so I did a work-around. One can share a typed array between JS and WA. In WA, it is called "memory" but there may only be one of them. I redesigned things a bit so all processing was applied against one array. This could put a crimp in my style. Is it possible the "C" converter bypasses these functionality bottlenecks? It seems a little unlikely; I think wat is the textual representation of wasm and they go hand-in-hand. They do appear to be beavering away at this much as we are here. The integration makes it *NOT* an all or nothing kind of thing. When the module is built, it can receive JS functions, notably console.log. So I can log things to the console. I could make other JS calls if I wanted. Exported functions are just a function. You can call it from JS. (If you print them it says "native code", which gave me a kick.) In light of this, I am pushing forward with creating limited functions for the three or four places where Illuminated City sits for more than a second. It requires some re-organization but I have the substantial advantage of being the only author. I can also write these functions in JS. That part is really neat; the array is one array and looks the same whether the manipulation was done by JS or WA. This will be helpful for testing.
  13. The Leftover

    Illuminated City

    This is wobbling to market. Crime analysis tools: prototypes built on open data. The "strive" was for great presentation fast, slicing a lot of data in many useful ways. I started with SVG - and still use it for conventional charts. A lot of the data is presented on a map. In January, I elected to dispense with Google Maps and put the whole thing on a Babylon Canvas. I already felt late so it has been an intense period. Images are below and you can use it at https://sanfrancisco.ca.illuminated.city, https://chicago.il.illuminated.city and https://boston.ma.illuminated.city. The 3d part is called "geo-location". (You may need to sit and the landing page for a few counts before trying to navigate.) Thank you all for making Babylon. It has changed my life. Also, a shout out to JohnK for suggesting SPS, which have served me well. Comments, suggestions, conversation all welcome. Notes: ~ I applied scene.pick to allow the user to enumerate details of crimes in a specific area. ~ Chicago is mammoth, with about 400K crime records and a bazillion hexagons, but it still works Image 1: Assault and Battery in San Francisco for the past three years. Image 2: Theft from motor vehicle. Color indicates increase/decrease; elevation indicates current level
  14. The Leftover

    Illuminated City

    A couple interesting things in this video: 1) This is Los Angeles with 250K cells (probably 75K visible hex prisms in this demo). When I optimize for SPS, the performance is really pretty amazing. 2) You see the navigation inspired by Wingnut's suggestion to change focus. http://www.brianbutton.com/babylon/GeoSearch-Intro1.mp4 I did clip out some waiting periods but the video is all 1X speed.
  15. The Leftover

    Bezier Surface

    Pretty splendid!
  16. The Leftover

    Text as polygon mesh

    In Q&A, I had looked for help building a utility to dynamically generate polygon meshes in the form of text. Got some advice. Thank you Gijs. Here is a rough cut after a few more hours on it. https://www.babylonjs-playground.com/#PTTMVI#67 It seems that this can be done as a general tool with colors, sizes and multiple fonts -- not to mention a full alphabet. I need this for my own purposes. Not sure whether there is other demand for this. Comments solicited.
  17. The Leftover

    Text as polygon mesh

    When you have a hammer, problems look like nails. I would like users to be able to move the Arc Rotate Camera focal point to different spots around the city. To help communicate that, I needed a "focal point marker" to show the current point on the map. I picked an anchor. (Anyone with a better idea is hereby given the mic.) Constructing a 3D anchor from an SVG rendering of an anchor turned out to be essentially the same exercise as creating a letter. So, in a repetition of history, I created a new font family called "WebGL Dings" https://www.babylonjs-playground.com/#PL752W#17
  18. The Leftover

    Real-time 3D flight display

    Last week, I discovered that real-time aircraft flight data is available through an open API. Two, in fact. Already having a city, I decided show overflights. I put in a five-minute delay to permit me to smooth the data but this is almost real-time. Video shows FedeX coming into SFO over San Francisco. This is not very zoomy but it feels signficant. I am not entirely sure what to do with it. http://www.brianbutton.com/babylon/MonoPlane.mp4 Airplane model was built out of cardboard, dowels, plywood and rubber bands. https://www.babylonjs-playground.com/#H3Z6J1#7
  19. The Leftover

    Text as polygon mesh

    Updates: More glyphs, including some non-English letters (e.g. ñ). https://www.babylonjs-playground.com/#PL752W#6 meshwriter.min.js size is below 100K. I will try to keep it there but we will see. In review, fonts are: ~ Helvetica: Default, efficient and most glyphs. Use this one ~ HirukoPro: 'cause I use it ~ Comic: just a couple letters right now ~ Jura: I like it for numbers
  20. The Leftover

    Text as polygon mesh

    Wow!
  21. The Leftover

    Marking questions as solved

    Can we pin that GIF to the top of this board or something? It is sortof a community thing. If most people start using it, others will too.
  22. The Leftover

    Text as polygon mesh

    I think you and I have pegged the needle on opposite sides of the creativity scale. I might steal. Illuminated Cities are a rectangle floating on sky-texture. Everything goes on the rectangle for now . . . except when I did this, (http://www.illuminated.city/mp4/BurglaryCategory.mp4) I rotated the date numbers for y'all to see them. For me, a radical departure. It then occurred the me that the "low wall" around the city rectangle could hold useful information. I don't think I will try a circle but I am keeping it in mind. In other news, Helvetica does not yet support single and double quote but I will add them.
  23. The Leftover

    Illuminated City

    The data is actually official city data -- many cities offer is as part of an open data trend. We work with San Francisco, Chicago, Los Angeles and Boston. This only looks at where and when. There are absolutely other correlations to be made. For example, February is always the lowest crime month in Chicago, by a consistent percentage. I don't look at stadium events, national holidays or anything else. I can see many other trends when I am fiddling around. For example, theft from auto is geographically concentrated but auto theft is not. Violent (assault) has strong place and time patterns. Burglary also has patterns but less pronounced.
  24. The Leftover

    Illuminated City

    After months of painful number-crunching, I have built a demo of something that shows the trend associated with crimes. There is a theory that some crime-types have micro-geographic behavior -- and staying on top of those trends can help target police patrols. This is a rendering of burglaries in part of San Francisco for about a year. Red is rising, green is falling, blue is neither. The elevation indicates the frequency of burglaries with some geographic weighting. http://www.illuminated.city/mp4/BurglaryCategory.mp4 The video clip is running at 3X so the visualization is rendering pretty fast. I cannot do a whole city at once.
  25. The Leftover

    Illuminated City

    I was struggling with how to provide camera views optimal to people interested in different parts of the city. A lot of times responsibility is parceled out with a bit of geography, e.g. a police district. Wingnut gave me a clue having to do with changing the target of the arc-rotate camera. I like the results. Check it out. http://www.illuminated.city/mp4/DistrictZoom.mp4