Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added a checkbox for bilinear filtering of color and altitude #17

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added a checkbox for bilinear filtering of color and altitude #17

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 73 additions & 4 deletions VoxelSpace.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,9 @@
<label for="distancerange">Distance</label>
<input id="distancerange" type="range" min="100" max="2000" step="1" onchange="camera.distance = this.value">

<label for="bilinear">Bilinear</label>
<input id="bilinear" type="checkbox" onchange="Draw()">

<a href="https://github.com/s-macke/VoxelSpace">Github project page</a>

</div>
Expand Down Expand Up @@ -371,7 +374,37 @@
}

// ---------------------------------------------
// The main render routine
// Interpolate between two RGB colors.

function ColorInterp(a, b, t)
{
var a0 = (a >> 16) & 0xFF;
var a1 = (a >> 8) & 0xFF;
var a2 = a & 0xFF;

var b0 = (b >> 16) & 0xFF;
var b1 = (b >> 8) & 0xFF;
var b2 = b & 0xFF;

var invt = 1.0 - t;
return 0xFF000000 |
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Performance could probably could be improved on by using fixed point math here, depending on what the JIT compiler does.

Math.floor(a0*invt + b0*t) << 16 |
Math.floor(a1*invt + b1*t) << 8 |
Math.floor(a2*invt + b2*t);
}

// ---------------------------------------------
// Interpolate between two numbers.
// The output is a float.

function NumberInterp(a, b, t)
{
var invt = 1.0 - t;
return (a * invt) + (b * t);
}

// ---------------------------------------------
// The mbin render routine

function Render()
{
Expand All @@ -388,6 +421,8 @@

var deltaz = 1.;

var bilinear = document.getElementById('bilinear').checked;

// Draw from front to back
for(var z=1; z<camera.distance; z+=deltaz)
{
Expand All @@ -404,9 +439,43 @@
var invz = 1. / z * 240.;
for(var i=0; i<screenwidth|0; i=i+1|0)
{
var mapoffset = ((Math.floor(ply) & mapwidthperiod) << map.shift) + (Math.floor(plx) & mapheightperiod)|0;
var heightonscreen = (camera.height - map.altitude[mapoffset]) * invz + camera.horizon|0;
DrawVerticalLine(i, heightonscreen|0, hiddeny[i], map.color[mapoffset]);
var final_color;
var altitude;
if(bilinear)
{
var plxt = plx - Math.floor(plx);
var plyt = ply - Math.floor(ply);

var plx_left = (Math.floor(plx) & mapwidthperiod);
var plx_right = (Math.floor(plx+1) & mapwidthperiod);
var ply_lower = (Math.floor(ply) & mapwidthperiod) << map.shift;
var ply_upper = (Math.floor(ply+1) & mapwidthperiod) << map.shift;

var llindex = ply_lower + plx_left;
var ulindex = ply_upper + plx_left;
var urindex = ply_upper + plx_right;
var lrindex = ply_lower + plx_right;

// Interpolate the top and bottom edges to a point on each, then interpolate
// between those to get the final color.
var upper_color = ColorInterp(map.color[ulindex], map.color[urindex], plxt);
var lower_color = ColorInterp(map.color[llindex], map.color[lrindex], plxt);
final_color = ColorInterp(lower_color, upper_color, plyt);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perf improvement opportunity (probably minor): decompose the 4 corners from uint32's into RGB values ahead of time (better yet, make map.color already store separate R, G, and B values), do the bilinear filtering, and then recompose only at the end. This would save recomposing upper_color and lower_color into uint32's, then immediately decomposing them again.


// Do the same for altitude.
var upper_alt = NumberInterp(map.altitude[ulindex], map.altitude[urindex], plxt);
var lower_alt = NumberInterp(map.altitude[llindex], map.altitude[lrindex], plxt);
altitude = NumberInterp(lower_alt, upper_alt, plyt);
}
else
{
var mapoffset = ((Math.floor(ply) & mapwidthperiod) << map.shift) + (Math.floor(plx) & mapheightperiod)|0;
altitude = map.altitude[mapoffset];
final_color = map.color[mapoffset];
}

var heightonscreen = (camera.height - altitude) * invz + camera.horizon|0;
DrawVerticalLine(i, heightonscreen|0, hiddeny[i], final_color);
if (heightonscreen < hiddeny[i]) hiddeny[i] = heightonscreen;
plx += dx;
ply += dy;
Expand Down