As I continue to practice javascript and 3D rendering, this is the next format, Wavefront – OBJ format. For this first pass, I am only interpreting the vertex and face information to render a wireframe. It is my hope to expand this decoder to load and render texture information as well as lines, curves, etc. Again, thanks to Devon Govett for the bmp.js example which I am using as the foundation of this demonstration. The new samples of shuttle and lamp post are found in opensource project, MeshLab.
This obj decoder is written/tested on firefox and chrome. Source code and history is available in googleSVN.
There are a number of methods to rendering triangle gradient in a html5 canvas. Juho Vepsalainen has a nice article and demonstration. I am using 3×3 matrix, technique common in color management volume transformation. I wrote a blog performing this and other experiment in Flex using pixelbender filters sometime ago. This is another shading exercise.
With the permission and support from Jostens, Mike Heeter, Richard Wells, I have been working on a STL decoder. The (future) ultimate goal is to offer an open-source optimized STL format where file size is 1/3 or less of a regular STL binary file while achieving an identical load time. The concept was originally proposed in May 2011 and partially implemented in Adobe Flex.
To begin, I found an existing javascript-windows-bitmap decoder, bmp.js authored by Devon Govett. My implementation is for a STL binary (not ascii) file as defined in STL specification. In addition, I also had to implement a byteArray to float conversion (see previous blog entry).
This experiment is somewhat of a foundation exercise. It demonstrates rudimentary decoding of relative small binary STL files with less than 2000 triangles. Models with more polygons seem to render best in Chrome while firefox may be slow and complaint with warnings.
Model is rendered in wireframe mode without shading or culling (using the normal component). I shall dedicate future blog(s) for various shading and culling.
Lastly, the STL model is a sample from the Android STLViewer application download.
Here is the project in googleSVN and GitHub.
It is to my great surprise that byte array to float does not already exist in javascript. Maybe I am missing something, it seems pretty rudimentary.
Anyhow, it is holiday season and a great time to romanticize those days of intro to programming from college. Digging around on the web led me to a great applet for binary<->float demonstration as well as a tutorial for IEEE754.
Three things I have re-learned today in float, sign bit (0), exponent bits (1-9) and mantissa bits (10-32). Here is my bytesToFloat exercise.
There are many 3D engines in HTML5 already; webGL for example is very popular in chrome experiment. In this exercise, I am exercising the most basic 3D rotation and pixel indexing in HTML5 canvas with jQuery. This is probably pretty boring to look at but a necessary exercise. It is best to use chrome browser to view. I am using their slider for pixel spacing.
Thank you for a great session, Intro to HTML5 canvas by Kevin Moot at Twin Cities code camp. With the inspiration, I am exercising HTML5 canvas and contributing a cubic spline demo in javascript. The algorithm is a port from Numerical Recipes in C, 2nd Edition by Press, Teukolsky, Vetterling and Flannery. I used this algorithm in my Flex tone-reproduction (photoshop’s level) experiment among others.
Source code may also be found on googleSVN.
A common problem in Scanning Electronic Microscopy, photo micrography and macrography is shallow depth of field. To compensate, a number of solutions, such as scanning-light and focus stacking have been developed.
Here is my experiment with focus stacking in actionscript. It is written to take N number of input images and assemble a destination image by selecting the sharpest pixels from the collection. A larger convolution kernel yield better result at the cost of performance. Optimization maybe achieved with pixelbender filters.
Thanks to a number of inputs from the Image processing group on LinkedIn, I am exploring a number of skeletonization techniques. For my first implementation of the thinning algorithm, I have implemented a multi-iteration method defined in Digital Image processing by Gonzales and Woods-1st Edition pg 492-493.
With actionscript alone, this is a pretty slow process, taking up 3200 ms on my Lenovo T61.
Having reported the poor performance, I believe it is possible for me to rewrite this with a collection of pixelbender filters. To my surprise, it is 3x slower with pixelbender (try out “thin pixelbender”).
To exercise this demo, simply select combo box selection, “thining”. Draw any closed shape pattern of your liking and select “Apply”.
Dilation and erosion are somewhat easier in vector graphics. For most instances, the solution is accomplished by moving the anchor point along the tangent. But how would you accomplish the same task with raster? One solution described by Gonzalez in Digital Image process is skeleton-erosion by distance map technique.
Optimization by a quad-tree might be helpful in my distance calculation. If you are playing with this, be sure to create a close loop object. Next, to consider thinning and Voronoi diagram.
Here is my first jquery exercise, a slide Tray. click on images to add or remove from the tray. I want to thank Zachary Johnson for his seven hours of coaching in jquery for a client’s project.
