mirror of
https://github.com/bitluni/Supercluster2.git
synced 2026-03-30 07:53:34 +00:00
484 lines
10 KiB
HTML
484 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>CPU Fixed Point Raymarcher</title>
|
|
<style>canvas {display: block; }</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="canvas" width="320" height="180"></canvas>
|
|
<script>
|
|
|
|
const canvas = document.getElementById("canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
const imageData = ctx.createImageData(canvas.width, canvas.height);
|
|
const data = imageData.data;
|
|
|
|
const E = fix(0.01);
|
|
const E2 = fix(0.02);
|
|
const FAR = fix(100);
|
|
|
|
class Scene
|
|
{
|
|
constructor()
|
|
{
|
|
this.objects = [];
|
|
this.cameraPos = vec(0.3, 1.0, -6.0);
|
|
this.lightPos = vec(0, 5, -2);
|
|
this.skyMat = new Sky(vec(0.4, 0.4, 0.7), vec(0.8, 0.8, 1.0));
|
|
this.fog = fix(0.05);
|
|
this.objects.push(new Sphere(vec(0.5, 0.7, 1.0), fix(1.5), new Material(vec(1, 0.5, 0.7), fix(0.2), fix(0.8), fix(0.8), fix(0.2))));
|
|
this.objects.push(new Box(vec(2.5, 0, -1.5), vec(1.0, 1.0, 1.0), new Material(vec(0.4, 0.4, 1.0), fix(0.2), fix(0.8), fix(0.2), fix(0.2))));
|
|
this.objects.push(new Cylinder(vec(-3.0, 1.0, -1.0), vec(1.0, 2.0, 0), new Material(vec(0.3, 0.7, 0.3), fix(0.2), fix(0.8), fix(0.2), fix(0.2))));
|
|
this.objects.push(new PlaneY(vec(0, -1.0, 0), new Checker(vec(0.6, 0.1, 0.1), vec(1, 1, 1), fix(0.2), fix(0.8), fix(0.1), fix(0.2))));
|
|
}
|
|
}
|
|
|
|
function sdf(scene, p)
|
|
{
|
|
let minD = fix(FAR);
|
|
let minDobj = null;
|
|
for(let i = 0; i < scene.objects.length; i++)
|
|
{
|
|
let d = scene.objects[i].sdf(p);
|
|
if(d < minD)
|
|
{
|
|
minD = d;
|
|
minDobj = scene.objects[i];
|
|
}
|
|
}
|
|
if(minDobj)
|
|
return new Collision(minD, p, veci(0, 0, 0), minDobj);
|
|
return null;
|
|
}
|
|
|
|
function getNormal(coll) {
|
|
const dx = subi(coll.obj.sdf(coll.p.add(veci(E, 0, 0))), coll.obj.sdf(coll.p.sub(veci(E, 0, 0))));
|
|
const dy = subi(coll.obj.sdf(coll.p.add(veci(0, E, 0))), coll.obj.sdf(coll.p.sub(veci(0, E, 0))));
|
|
const dz = subi(coll.obj.sdf(coll.p.add(veci(0, 0, E))), coll.obj.sdf(coll.p.sub(veci(0, 0, E))));
|
|
return veci(dx, dy, dz).normalize();
|
|
}
|
|
|
|
function getLight(eyeDir, normal, position, lightPos, baseColor, mat) {
|
|
let lightDir = lightPos.sub(position).normalize();
|
|
let diff = Math.max(normal.dot(lightDir), 0);
|
|
let halfVec = lightDir.sub(eyeDir).normalize();
|
|
let spec = powi16(Math.max(halfVec.dot(normal), 0));
|
|
let lightColor = vec(1, 1, 1);
|
|
return baseColor.scale(mat.ambient).
|
|
add(baseColor.scale(muli(diff, mat.diffuse))).
|
|
add(lightColor.scale(muli(spec, mat.specular)));
|
|
}
|
|
|
|
function isInShadow(scene, p, lightPos) {
|
|
let rl = p.sub(lightPos);
|
|
let dir = rl.normalize();
|
|
let dist = rl.length();
|
|
let t = 0;
|
|
for (let i = 0; i < 50; i++) {
|
|
let np = lightPos.add(dir.scale(t));
|
|
let c = sdf(scene, np);
|
|
if(!c) return false;
|
|
if (c.d < E)
|
|
{
|
|
return (t < subi(dist, E2+E2+E));
|
|
}
|
|
t = addi(t, c.d);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function getReflection(scene, origin, dir, depth) {
|
|
let t = 0;
|
|
for (let i = 0; i < 64; i++) {
|
|
let p = origin.add(dir.scale(t));
|
|
let coll = sdf(scene, p);
|
|
if(!coll) return veci(0, 0, 0);//vec(0.8, 0.8, 1);
|
|
//console.log(coll.d / 65536);
|
|
if (coll.d < E2) {
|
|
//return coll.obj.mat.color;
|
|
coll.n = getNormal(coll);
|
|
let color = coll.obj.mat.shade(coll.p, coll.n);
|
|
let inShadow = isInShadow(scene, p, scene.lightPos);
|
|
//let shaded = color;
|
|
let shaded = getLight(dir, coll.n, coll.p, scene.lightPos, color, coll.obj.mat);
|
|
if (inShadow) shaded = color.scale(coll.obj.mat.ambient);
|
|
if (depth > 0 && coll.obj.mat.reflection > fix(0.0))
|
|
{
|
|
let refl = getReflection(scene, p.add(coll.n.scale(fix(0.1))), dir.reflect(coll.n), depth - 1);
|
|
shaded = shaded.mix(coll.obj.mat.reflection, refl);
|
|
}
|
|
return shaded.mix(muli(t, scene.fog), scene.skyMat.color);
|
|
}
|
|
t += coll.d;
|
|
if (t > FAR) break;
|
|
}
|
|
return scene.skyMat.shade(origin, dir);
|
|
}
|
|
|
|
function render(scene) {
|
|
const w = canvas.width;
|
|
const h = canvas.height;
|
|
for (let y = 0; y < h; y++) {
|
|
for (let x = 0; x < w; x++) {
|
|
let u = -(x - w / 2) / w * 1.6 * (w / h);
|
|
let v = -(y - h / 2) / h * 1.6;
|
|
let ro = scene.cameraPos; // rotated position
|
|
let rd = vec(-u, v, 1).normalize();
|
|
let color = getReflection(scene, ro, rd, 2);
|
|
color = color.scale(fix(255))
|
|
color = color.clamp(0, fix(255));
|
|
let i = (y * w + x) * 4;
|
|
data[i + 0] = color.v[0] >> 16;
|
|
data[i + 1] = color.v[1] >> 16;
|
|
data[i + 2] = color.v[2] >> 16;
|
|
data[i + 3] = 255;
|
|
}
|
|
}
|
|
ctx.putImageData(imageData, 0, 0);
|
|
}
|
|
|
|
function __lzcnt2(a)
|
|
{
|
|
if(a < 0) return 0;
|
|
let i = 0;
|
|
while(a)
|
|
{
|
|
a >>= 1;
|
|
i++;
|
|
}
|
|
return 32 - i;
|
|
}
|
|
|
|
function __lzcnt(a)
|
|
{
|
|
let r = 32;
|
|
if (a >= 0x00010000) { a >>= 16; r -= 16; }
|
|
if (a >= 0x00000100) { a >>= 8; r -= 8; }
|
|
if (a >= 0x00000010) { a >>= 4; r -= 4; }
|
|
if (a >= 0x00000004) { a >>= 2; r -= 2; }
|
|
r -= a - (a & (a >> 1));
|
|
return r;
|
|
}
|
|
|
|
function fix2binFloat(a)
|
|
{
|
|
let i = __lzcnt(a & 0x7fffffff);
|
|
let sign = a & 0x80000000;
|
|
let exp = (15 - i) + 127;
|
|
let mantissa = ((a << i) >> 8) & 0x7fffff;
|
|
return sign | (exp << 23) | mantissa;
|
|
}
|
|
|
|
function binFloat2fix(a)
|
|
{
|
|
if(!a) return 0;
|
|
let sign = a & 0x80000000;
|
|
let exp = ((a >> 23) & 0xff) - 127;
|
|
let mantissa = 0x800000 | (a & 0x7fffff);
|
|
return sign | ((mantissa << 7) >> (14 - exp));
|
|
}
|
|
|
|
function b_rsqrt(number)
|
|
{
|
|
let i;
|
|
let x2;
|
|
let y;
|
|
const threehalfs = fix(1.5);
|
|
|
|
x2 = number >> 1;
|
|
y = fix2binFloat(number);
|
|
i = y; // evil floating point bit level hacking
|
|
i = 0x5f3759df - (i >> 1); // what the fuck?
|
|
y = binFloat2fix(i);
|
|
|
|
y = muli(y, threehalfs - (muli(x2, muli(y, y)))); // 1st iteration
|
|
y = muli(y, threehalfs - (muli(x2, muli(y, y)))); // 2nd iteration, this can be removed
|
|
|
|
return y;
|
|
}
|
|
|
|
function rsqrti(a)
|
|
{
|
|
return b_rsqrt(a);
|
|
}
|
|
|
|
function sqrti(a)
|
|
{
|
|
return muli(a, rsqrti(a));
|
|
}
|
|
|
|
function addi(a, b)
|
|
{
|
|
return (a + b) & 0xffffffff;
|
|
}
|
|
|
|
function subi(a, b)
|
|
{
|
|
return addi(a, -b);
|
|
}
|
|
|
|
class Vec3
|
|
{
|
|
constructor(x, y, z)
|
|
{
|
|
this.v = new Int32Array([x, y, z]);
|
|
}
|
|
|
|
length(){
|
|
let d2 = this.dot(this);
|
|
if(d2 > 0x7fffffff) return 0x7fffffff;
|
|
return sqrti(d2);
|
|
}
|
|
|
|
normalize(){
|
|
let l2 = this.dot(this);
|
|
return this.scale(rsqrti(l2));
|
|
}
|
|
sub(v2){
|
|
return new Vec3(this.v[0] - v2.v[0], this.v[1] - v2.v[1], this.v[2] - v2.v[2]);
|
|
}
|
|
add(v2){
|
|
return new Vec3(this.v[0] + v2.v[0], this.v[1] + v2.v[1], this.v[2] + v2.v[2]);
|
|
}
|
|
scale(s){
|
|
return new Vec3(muli(this.v[0], s), muli(this.v[1], s), muli(this.v[2], s));
|
|
}
|
|
dot(v2){
|
|
return muli(this.v[0], v2.v[0]) + muli(this.v[1], v2.v[1]) + muli(this.v[2], v2.v[2]);
|
|
}
|
|
reflect(n){
|
|
return this.sub(n.scale(2 * this.dot(n)));
|
|
}
|
|
clamp(a, b){
|
|
return new Vec3(Math.max(a, Math.min(b, this.v[0])), Math.max(a, Math.min(b, this.v[1])), Math.max(a, Math.min(b, this.v[2])));
|
|
}
|
|
abs(){
|
|
return new Vec3(Math.abs(this.v[0]), Math.abs(this.v[1]), Math.abs(this.v[2]));
|
|
}
|
|
mix(s, v){
|
|
if(s > 0x10000) s = 0x10000;
|
|
return v.scale(s).add(this.scale(65536 - s));
|
|
}
|
|
real()
|
|
{
|
|
return [this.v[0] / 65536, this.v[1] / 65536, this.v[2] / 65536];
|
|
}
|
|
toString()
|
|
{
|
|
let r = this.real();
|
|
return r[0].toFixed(4) + " " + r[1].toFixed(4) + " " + r[2].toFixed(4);
|
|
}
|
|
};
|
|
|
|
function veci(x, y, z)
|
|
{
|
|
return new Vec3(x, y, z);
|
|
}
|
|
|
|
function vec(x, y, z)
|
|
{
|
|
return new Vec3(fix(x), fix(y), fix(z));
|
|
}
|
|
|
|
function fix(f)
|
|
{
|
|
return Math.round(f * 65536);
|
|
}
|
|
|
|
function unfix(i)
|
|
{
|
|
return i / 65536;
|
|
}
|
|
|
|
function muli(a, b)
|
|
{
|
|
// return (a >> 8) * (b >> 8);
|
|
let r = Math.floor((a / 256) * (b / 256));
|
|
if(r > 0x7fffffff) return 0x7fffffff;
|
|
if(r < -0x80000000) return 0x80000000;
|
|
return r;
|
|
}
|
|
|
|
function divi(a, b)
|
|
{
|
|
return (a << 16) / b;
|
|
}
|
|
|
|
function floori(a)
|
|
{
|
|
return a & 0xffff0000
|
|
}
|
|
|
|
function powi16(a)
|
|
{
|
|
let a2 = muli(a, a);
|
|
let a4 = muli(a2, a2);
|
|
return muli(a4, a4);
|
|
}
|
|
|
|
class RenderObject
|
|
{
|
|
constructor(pos, mat)
|
|
{
|
|
this.pos = pos;
|
|
this.mat = mat;
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
return fix(32767);
|
|
}
|
|
}
|
|
|
|
class Collision
|
|
{
|
|
constructor(d, p, n, obj)
|
|
{
|
|
this.d = d;
|
|
this.p = p;
|
|
this.n = n;
|
|
this.obj = obj;
|
|
}
|
|
}
|
|
|
|
class Sphere extends RenderObject
|
|
{
|
|
constructor(pos, r, mat)
|
|
{
|
|
super(pos, mat);
|
|
this.r = r;
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
return p.sub(this.pos).length() - this.r;
|
|
}
|
|
}
|
|
|
|
class Box extends RenderObject
|
|
{
|
|
constructor(pos, dim, mat)
|
|
{
|
|
super(pos, mat);
|
|
this.dim = dim;
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
let d = p.sub(this.pos).abs().sub(this.dim);
|
|
let dist = Math.max(...d.v);
|
|
return dist;
|
|
}
|
|
}
|
|
|
|
class Cylinder extends RenderObject
|
|
{
|
|
constructor(pos, dim, mat)
|
|
{
|
|
super(pos, mat);
|
|
this.dim = dim;
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
let rel = p.sub(this.pos);
|
|
let rel2 = veci(rel.v[0], 0, rel.v[2]);
|
|
let dxz = rel2.length() - this.dim.v[0];
|
|
let dy = Math.max(rel.v[1] - this.dim.v[1], -rel.v[1] - this.dim.v[1]);
|
|
return Math.max(dxz, dy);
|
|
}
|
|
}
|
|
|
|
class PlaneX extends RenderObject
|
|
{
|
|
constructor(pos, mat)
|
|
{
|
|
super(pos, mat);
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
return p.v[0] - this.pos.v[0];
|
|
}
|
|
}
|
|
|
|
class PlaneY extends RenderObject
|
|
{
|
|
constructor(pos, mat)
|
|
{
|
|
super(pos, mat);
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
return p.v[1] - this.pos.v[1];
|
|
}
|
|
}
|
|
|
|
class PlaneZ extends RenderObject
|
|
{
|
|
constructor(pos, mat)
|
|
{
|
|
super(pos, mat);
|
|
}
|
|
|
|
sdf(p)
|
|
{
|
|
return p.v[2] - this.pos.v[2];
|
|
}
|
|
}
|
|
|
|
class Material
|
|
{
|
|
constructor(color, ambient, diffuse, specular, reflection)
|
|
{
|
|
this.color = color;
|
|
this.ambient = ambient;
|
|
this.diffuse = diffuse;
|
|
this.specular = specular;
|
|
this.reflection = reflection;
|
|
}
|
|
|
|
shade(p, n)
|
|
{
|
|
return this.color;
|
|
}
|
|
}
|
|
|
|
class Checker extends Material
|
|
{
|
|
constructor(color1, color2, ambient, diffuse, specular, reflection)
|
|
{
|
|
super(color1, ambient, diffuse, specular, reflection);
|
|
this.color2 = color2;
|
|
}
|
|
|
|
shade(p, n)
|
|
{
|
|
let check = ((p.v[0] >> 16) + (p.v[2] >> 16)) & 1;
|
|
let color = check ? this.color : this.color2; // white/red
|
|
return color;
|
|
}
|
|
}
|
|
|
|
class Sky extends Material
|
|
{
|
|
constructor(color1, color2)
|
|
{
|
|
super(color1);
|
|
this.color2 = color2;
|
|
}
|
|
|
|
shade(p, n)
|
|
{
|
|
return this.color.add(this.color2.sub(this.color).scale(n.v[1]));
|
|
}
|
|
}
|
|
|
|
render(new Scene());
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|