Software News – netfordownload.com

Ray Tracer in JavaScript

Just when you thought you had seen everything that could impress in JavaScript, along comes another crazy application.. Now we have a ray tracer that creates very realistic 3D scenes right in your browser.
Ray tracing is one of the most fundamental of 3D rendering techniques, in the sense that it attempts to simulate the way a real scene is created by the light rays that enter your eye. The only difference is that a ray tracer generally works in the reverse direction to real light rays – that is from the camera out to the scene. The program has to trace a the path of a light ray from the camera out into the 3D model and see what it hits. From the color of what it hits, you can work out what color the pixel it intersects in the camera should be. It is simple in theory but it can be tough to implement and it is a real test for the hardware that runs it.

Christopher Chedeau and Gauthier Lemoine have implemented an, admittedly simple, ray tracer in JavaScript. Using WebGL and a few useful tools such as glMatrix, Code Mirror and CoffeeScript. It only renders four object types – plane, sphere, cylinder and code but the principles it uses are general . It handles point source lighting and textured objects. One nice touch is that it uses progressive rendering which makes watching it build up a scene far less boring.

(more…)

WinRT JavaScript – Templates & Data Binding

The Template object is useful in its own right but add it to data binding and you have a easy to use way to present data to the user. It also happens to be the easiest way to find out about data binding in general.
Articles on WinRT JavaScript
Getting Started
WinControls
Templates & Data Binding (this article)

In the previous part of this series of articles on WinRT JavaScript we looked at how to use WinJS custom controls. In this third part we look at one of the more interesting custom control – the Template and introduce the databinding mechanism.
The Template is useful whenever you need to create multiple copies of the same HTML and content. You could, for example, use it to generate the lines in a table structure. This is useful but not super useful. However, if you add data binding to the Template object it all becomes so much more useful. With data binding you can not only “stamp out” lines in a table, you can also automatically fill them in. The databound Template is a natural way to create any table or list of data automatically and with minimal fuss.
So let’s get started.
It is assumed that you know how to work with a WinRT JavaScript project and know the basics of HTML/CSS as described in Part One. It is also assumed that you know how custom controls work as described in Part Two.
The Template

The basic Template control is a very simple thing. All it does is to contain any HTML you care to fill it with. When the Template control is initialized its only action is to hide its contents. This may sound like a strange thing to do but you don’t want the Template itself showing on your page until you are ready to make a copy of it and place it where you want it.
Start a new blank project and edit the default.html page to load the following scripts. The only new one from part two is binding.js which is needed for the Template object:





Next we need to create a Template element using the standard approach introduced in Part Two, i.e. using the data- attribute. As the template represented by the Template object is composed of whatever HTML you care to put between its tags, let’s just use a Div with some dash characters to represent a horizontal line – not particularly useful but easy to understand.
Our Template in HTML is just:

If you run the program at this point you will see a single line of dashes at the location of the Template div – after all why would you see anything else?!

To make the Template do its magic we have to invoke the JavaScript code that scans the DOM and implements the Template Object in JavaScript. All we have to do is call the usual processAll function to convert elements with data-win-control attributes into controls (see part 2). You can add this call to either the onmainwindowactivated or the DOMContentLoaded event handler:
document.addEventListener(“DOMContentLoaded”,
function (e) {
WinJS.UI.processAll();
…
If you now run the program you will discover that the contents of the Template element have gone missing i.e.you now can’t see the dashed line.

This is general behaviour Templates hide their contents when converted into custom controls.
The next step is to do something useful with our Template.The key idea here is that the Template object has a render method which instantiates the contents of the Template as a DOM sub-tree.
So for example to create an instance of the content of our Template, i.e. a single