Real Time Ray Tracing

keim_at_Si

2010-06-22 01:12:37

License: MIT License

Fork: 18

Fav: 51

View: 21444

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 204 lines
HTML 2 lines
CSS 17 lines

Real Time Ray Tracing
jQuery v1.4.2

// Flash version here. http://wonderfl.net/c/horg

var size = 192;
var ambient = 0.1;
var diffusion = 0.7;
var specular = 0.6;
var power = 12;

var mainGraphics, canvas, graphics, imageData, pixels;
var focusZ = size, floorY = 100;
var initialDir = new Array(size * size), spheres = new Array();
var ldirX, ldirY, ldirZ;
var smap = new Array(512), fcol = new Array(1024);
var refs = [0, 1, 2, 3, 3];
var reff = [0xffffff, 0x7f7f7f, 0x3f3f3f, 0x1f1f1f, 0x1f1f1f];
var time, prevTime, mx, my, camX, camY, camZ, tcamX, tcamY, tcamZ;

function Sphere(cx, cy, cz, cr, omg, pha, r, mat) {
  this.cx = cx;
  this.cy = cy;
  this.cz = cz;
  this.cr = cr;
  this.omg = omg;
  this.pha = pha;
  this.r2 = r * r;
  this.mat = mat;
  this.update = function() {
    var ang = time * this.omg + this.pha;
    this.x = Math.cos(ang)*this.cr+this.cx;
    this.y = this.cy;
    this.z = Math.sin(ang)*this.cr+this.cz;
  }
}

function setup() {
  canvas = $('#canvas').mousemove(onMouseMove).get(0);
  graphics = canvas.getContext('2d');
  imageData = graphics.createImageData(size, size);
  pixels = imageData.data;

var i, j, idx, l, s, hs = (size - 1) * 0.5;
  for (j=0,idx=0; j<size; j++) for (i=0; i<size; i++) {
    l = 1/Math.sqrt((i - hs)*(i - hs) + (j - hs)*(j - hs) + focusZ*focusZ);
    initialDir[idx] = (i-hs) * l; idx++;
    initialDir[idx] = (j-hs) * l; idx++;
    initialDir[idx] = focusZ * l; idx++;
  }
  for (i=0; i<512; i++) {
    s = (i<256) ? 64 : ((Math.pow((i-256) * 0.00390625, power) * (power + 2) * specular * 0.15915494309189534 * 192 + 64)>>>0);
    if (s > 255) s = 255;
    smap[i] = (0x10101 * s) >>> 0;
    s = (i<256) ? (255-i) : (i-256);
    fcol[i] = (0x10101 * (s - (s>>3) + 31)) >>> 0;
    fcol[i+512] = (0x10101 * ((s>>2) - (s>>5) + 31)) >>> 0;
  }
  spheres.push(new Sphere(100, 40, 600, 200, 0.3, 1.0, 60, new Material(0x8080ff,ambient,diffusion)));
  spheres.push(new Sphere(  0, 50, 300, 100, 0.8, 0.8, 50, new Material(0x80ff80,ambient,diffusion)));
  spheres.push(new Sphere( 50, 60, 200, 200, 0.6, 2.0, 40, new Material(0xff8080,ambient,diffusion)));
  spheres.push(new Sphere(-50, 70, 500, 300, 0.4, 1.4, 30, new Material(0xc0c080,ambient,diffusion)));
  spheres.push(new Sphere(-90, 30, 600, 400, 0.2, 1.5, 70, new Material(0xc080c0,ambient,diffusion)));
  spheres.push(new Sphere( 70, 80, 400, 100, 0.7, 1.2, 20, new Material(0x80c0c0,ambient,diffusion)));
  camX = camY = camZ = tcamX = tcamY = tcamZ = 0;
  
  mx = my = time = 0;
  prevTime = (new Date()).getTime();
  setInterval(draw, 33);
}

if (hit) {
          ox += dx * tmin;
          oy += dy * tmin;
          oz += dz * tmin;
          nx = ox - hit.x;
          ny = oy - hit.y;
          nz = oz - hit.z;
          n = 1 / Math.sqrt(nx*nx + ny*ny + nz*nz);
          nx *= n;
          ny *= n;
          nz *= n;
          n = -(nx*dx + ny*dy + nz*dz) * 2;
          dx += nx * n;
          dy += ny * n;
          dz += nz * n;
          ln = (((ldirX * nx + ldirY * ny + ldirZ * nz) * 256) + 256) >>> 0;
          a = hit.mat.lmap[ln];
          a >>= refs[l];
          a &= reff[l];
          pixel += a;
        } else {
          if (dy < 0) {
            ln = (((ldirX * dx + ldirY * dy + ldirZ * dz) * 256) + 256) >>> 0;
            a = smap[ln];
            ln = l - 1;
            a >>= refs[ln];
            a &= reff[ln];
            pixel += a;
            break;
          } else {
            tmin = (floorY-oy)/dy;
            ox += dx * tmin;
            oy += dy * tmin;
            oz += dz * tmin;
            dy = -dy;
            ln = (dy * 256 + ( ( ( (((ox>>>0)+(oz>>>0))>>7) + (((ox>>>0)-(oz>>>0))>>7) ) &1)<<9) +256) >>> 0;
            a = fcol[ln];
            a >>= refs[l];
            a &= reff[l];
            pixel += a;
          }
        }
      }
      
      pixels[pidx] = (pixel>>16)&255; pidx++;
      pixels[pidx] = (pixel>>8)&255; pidx++;
      pixels[pidx] = (pixel)&255; pidx++;
      pixels[pidx] = 255; pidx++;
    }
  }

graphics.putImageData(imageData, 0, 0);
}

function onMouseMove(e) {
  mx = (e.clientX - 232.5) * 0.00390625;
  my = (232.5 - e.clientY) * 0.00390625;
}

$(setup);

Real Time Ray Tracing

// Flash version here. http://wonderfl.net/c/horg var size = 192; var ambient = 0.1; var diffusion = 0.7; var specular = 0.6; var power = 12; var mainGraphics, canvas, graphics, imageData, pixels; var focusZ = size, floorY = 100; var initialDir = new Array(size * size), spheres = new Array(); var ldirX, ldirY, ldirZ; var smap = new Array(512), fcol = new Array(1024); var refs = [0, 1, 2, 3, 3]; var reff = [0xffffff, 0x7f7f7f, 0x3f3f3f, 0x1f1f1f, 0x1f1f1f]; var time, prevTime, mx, my, camX, camY, camZ, tcamX, tcamY, tcamZ; function Material(col, amb, dif) { this.lmap = new Array(512); var r = (col>>16)&255, g = (col>>8)&255, b = col&255, a; for (i=0; i<512; i++) { a = ((i<256) ? amb : ((((i-256) * (dif - amb)) * 0.00390625) + amb)) * 2; if (a<1) this.lmap[i] = ((r*a)<<16)|((g*a)<<8)|((b*a)<<0); else { a = 2-a; this.lmap[i] = ((255-(255-r)*a)<<16)|((255-(255-g)*a)<<8)|((255-(255-b)*a)<<0); } } } function Sphere(cx, cy, cz, cr, omg, pha, r, mat) { this.cx = cx; this.cy = cy; this.cz = cz; this.cr = cr; this.omg = omg; this.pha = pha; this.r2 = r * r; this.mat = mat; this.update = function() { var ang = time * this.omg + this.pha; this.x = Math.cos(ang)*this.cr+this.cx; this.y = this.cy; this.z = Math.sin(ang)*this.cr+this.cz; } } function setup() { canvas = $('#canvas').mousemove(onMouseMove).get(0); graphics = canvas.getContext('2d'); imageData = graphics.createImageData(size, size); pixels = imageData.data; var i, j, idx, l, s, hs = (size - 1) * 0.5; for (j=0,idx=0; j<size; j++) for (i=0; i<size; i++) { l = 1/Math.sqrt((i - hs)*(i - hs) + (j - hs)*(j - hs) + focusZ*focusZ); initialDir[idx] = (i-hs) * l; idx++; initialDir[idx] = (j-hs) * l; idx++; initialDir[idx] = focusZ * l; idx++; } for (i=0; i<512; i++) { s = (i<256) ? 64 : ((Math.pow((i-256) * 0.00390625, power) * (power + 2) * specular * 0.15915494309189534 * 192 + 64)>>>0); if (s > 255) s = 255; smap[i] = (0x10101 * s) >>> 0; s = (i<256) ? (255-i) : (i-256); fcol[i] = (0x10101 * (s - (s>>3) + 31)) >>> 0; fcol[i+512] = (0x10101 * ((s>>2) - (s>>5) + 31)) >>> 0; } spheres.push(new Sphere(100, 40, 600, 200, 0.3, 1.0, 60, new Material(0x8080ff,ambient,diffusion))); spheres.push(new Sphere( 0, 50, 300, 100, 0.8, 0.8, 50, new Material(0x80ff80,ambient,diffusion))); spheres.push(new Sphere( 50, 60, 200, 200, 0.6, 2.0, 40, new Material(0xff8080,ambient,diffusion))); spheres.push(new Sphere(-50, 70, 500, 300, 0.4, 1.4, 30, new Material(0xc0c080,ambient,diffusion))); spheres.push(new Sphere(-90, 30, 600, 400, 0.2, 1.5, 70, new Material(0xc080c0,ambient,diffusion))); spheres.push(new Sphere( 70, 80, 400, 100, 0.7, 1.2, 20, new Material(0x80c0c0,ambient,diffusion))); camX = camY = camZ = tcamX = tcamY = tcamZ = 0; mx = my = time = 0; prevTime = (new Date()).getTime(); setInterval(draw, 33); } function draw() { var i, j, k, l, idx, t, tmin, n, s, hit, ln, pixel, a, kmax, pidx, ox, oy, oz, dx, dy, dz, nx, ny, nz, dsx, dsy, dsz, B, C, D; t = (new Date()).getTime(); time += (t - prevTime) * 0.001; prevTime = t; ldirX = -Math.cos(time*0.6)*100; ldirY = -Math.sin(time*1.1)*25-100; ldirZ = -Math.sin(time*0.9)*100+100; l = 1/Math.sqrt(ldirX*ldirX + ldirY*ldirY + ldirZ*ldirZ); ldirX *= l; ldirY *= l; ldirZ *= l; tcamX = mx * 400; tcamY = my * 150 - 50; tcamZ = my * 400 - 200; camX += (tcamX - camX) * 0.02; camY += (tcamY - camY) * 0.02; camZ += (tcamZ - camZ) * 0.02; kmax = spheres.length; for (k=0; k<kmax; k++) spheres[k].update(); for (j=0,idx=0,pidx=0; j<size; j++) { for (i=0; i<size; i++) { ox = camX; oy = camY; oz = camZ; dx = initialDir[idx]; idx++; dy = initialDir[idx]; idx++; dz = initialDir[idx]; idx++; pixel = 0; for (l=1; l<5; l++) { tmin = 99999; hit = null; for (k=0; k<kmax; k++) { s = spheres[k]; dsx = ox - s.x; dsy = oy - s.y; dsz = oz - s.z; B = dsx * dx + dsy * dy + dsz * dz; C = dsx * dsx + dsy * dsy + dsz * dsz - s.r2; D = B * B - C; if (D > 0) { t = - B - Math.sqrt(D); if ((t > 0) && (t < tmin)) { tmin = t; hit = s; } } } if (hit) { ox += dx * tmin; oy += dy * tmin; oz += dz * tmin; nx = ox - hit.x; ny = oy - hit.y; nz = oz - hit.z; n = 1 / Math.sqrt(nx*nx + ny*ny + nz*nz); nx *= n; ny *= n; nz *= n; n = -(nx*dx + ny*dy + nz*dz) * 2; dx += nx * n; dy += ny * n; dz += nz * n; ln = (((ldirX * nx + ldirY * ny + ldirZ * nz) * 256) + 256) >>> 0; a = hit.mat.lmap[ln]; a >>= refs[l]; a &= reff[l]; pixel += a; } else { if (dy < 0) { ln = (((ldirX * dx + ldirY * dy + ldirZ * dz) * 256) + 256) >>> 0; a = smap[ln]; ln = l - 1; a >>= refs[ln]; a &= reff[ln]; pixel += a; break; } else { tmin = (floorY-oy)/dy; ox += dx * tmin; oy += dy * tmin; oz += dz * tmin; dy = -dy; ln = (dy * 256 + ( ( ( (((ox>>>0)+(oz>>>0))>>7) + (((ox>>>0)-(oz>>>0))>>7) ) &1)<<9) +256) >>> 0; a = fcol[ln]; a >>= refs[l]; a &= reff[l]; pixel += a; } } } pixels[pidx] = (pixel>>16)&255; pidx++; pixels[pidx] = (pixel>>8)&255; pidx++; pixels[pidx] = (pixel)&255; pidx++; pixels[pidx] = 255; pidx++; } } graphics.putImageData(imageData, 0, 0); } function onMouseMove(e) { mx = (e.clientX - 232.5) * 0.00390625; my = (232.5 - e.clientY) * 0.00390625; } $(setup); <canvas id='canvas' width="192" height="192"/> * {margin:0;padding:0;} body {background:#fff;overflow:hidden;} #canvas { /* How do I select interpolation mode in Safari/Chrome ? http://code.google.com/p/chromium/issues/detail?id=1502 */ image-rendering:-moz-crisp-edges; -ms-interpolation-mode:nearest-neighbor; background:#000; width:384px; height:384px; padding:40px; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

keim_at_Si

URL
http://wonderfl.net/user/keim_at_Si/codes

web page(old); http://soundimpulse.sakura.ne.jp/ qiita; http://qiita.com/users/keim_at_si JActionScriptors; http://blog.jactionscripters.com/author/keim/ Blog in Japanese; http://d.hatena.ne.jp/keim_at_Si/ Blog in English (low activity...); http://keim-at-si.blogspot.com/

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/AnHS/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

nminato

hikipuro

ProjectNya

h_doxas

kjunichi

linktale

Iwao.Nakatan

kobashi.kaz

ykmt

norahiko

xanxys

ctkjapan

zeroeth

h6k

Thy

edo_m18

takishiki

phoenix24

seeker

y3i12

mokehehe

zhaiduo

canvastag

hermit

arahaya

yasigani-ni

demouth

motikawa

yd_niku

coppieee

bkzen

mrdoob

matsu4512

turusuke

narutohyper

9re

siouxcitizen

termat

k0rin

tkinjo

gyuque

harrynorthov:

benchmarking 3D canvas

3D canvasшары 3д

gum:

ray tracingVery cute ray tracer

indication:

benchmarking raytracing render

cepharos:

realtime raytracingRealTime RayTracing

zendenmushi:

後でwonderfl版のソースと比較して勉強

paq:

え！！すごっ

clockmaker:

JavaScriptでレイトレーシング

Forked

sort by

forked: Real Time Ray Tracing

Saxwuka

205/2/17

forked: Real Time Ray Tracing

zeroeth

205/2/17

forked: Real Time Ray Tracing

zeroeth

205/2/17

forked: Real Time Ray Tracing

kjunichi

222/5/0

Real Time Ray Tracing

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Tweet

Twitter

Discussion

Tags

Favorite by

Forked