JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

var TWO_PI = 2 * Math.PI;

var canvas;

var canvasWidth;

var canvasHeight;

var context;

var globalTime;

var imageData;

function init() {

canvas = document.getElementById('put-stuff-here');

canvasWidth = canvas.width;

canvasHeight = canvas.height;

context = canvas.getContext('2d');

if (!context) {

throw 'Donnie, you are out of your element!';

}

window.addEventListener('resize', resize);

resize();

startAnimation();

}

function startAnimation() {

imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);

var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {

data[i + 3] = 255;

}

globalTime = window.performance.now();

reset();

animate();

}

function reset() {

resize();

}

function animate() {

update();

draw();

requestAnimationFrame(animate);

}

function update() {

globalTime = window.performance.now();

}

function draw() {

var pixel;

var x = 0;

var y = 0;

var uv = [];

var col = [];

var p = [];

var lightDirection = [0.5773, 0.5773, 0.5773];

var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {

uv[0] = x;

uv[1] = y;

p[0] = -1 + 2.0 * (uv[0] / canvasWidth);

p[1] = -1 + 2.0 * (uv[1] / canvasHeight);

var rayOrigin = [0.0, 0.0, 2.0];

var rayDirection = normalize([p[0], p[1], -1.0]);

col[0] = 0.22;

col[1] = 0.22;

col[2] = 0.22;

var h = 1.0;

var t = 0.0;

var tmax = 20.0;

for (var j = 0; j < 32; j++) {

if (h < 0.0001 || t > tmax) {

break;

}

h = map([

rayOrigin[0] + t * rayDirection[0],

rayOrigin[1] + t * rayDirection[1],

rayOrigin[2] + t * rayDirection[2]

]);

t += h;

}

if (t < tmax) {

var pos = [

rayOrigin[0] + t * rayDirection[0],

rayOrigin[1] + t * rayDirection[1] * -1,

rayOrigin[2] + t * rayDirection[2]

];

var norm = calculateNormal(pos);

lightDirection[0] = lightDirection[1] = 0.5773 + (0.6 * Math.sin(0.001 * globalTime)); // animate light direction

lightDirection[2] = 0.5773 + (0.5 * Math.cos(0.001 * globalTime));

var lighting = clamp(dot(norm, lightDirection), 0.0, 1.0);

var downLight = clamp(norm[1], 0.0, 1.0);

col[0] = 1.0 * (1.0 * lighting) + (0.2 * downLight) + 0.1;

col[1] = 1.0 * (0.8 * lighting) + (0.3 * downLight) + 0.1;

col[2] = 1.0 * (0.5 * lighting) + (0.4 * downLight) + 0.1;

}

data[i] = parseInt(255 * col[0]);

data[i + 1] = parseInt(255 * col[1]);

data[i + 2] = parseInt(255 * col[2]);

x += 1;

if (x >= canvasWidth) {

x = 0;

y += 1;

}

}

context.putImageData(imageData, 0, 0);

}

function map(v) {

var d0 = length(v) - 1.0;

return d0;

}

function calculateNormal(v) {

var e = [0.0001, 0.0];

return normalize([

map([

v[0] + e[0],

v[1] + e[1],

v[2] + e[1]

]) - map([

v[0] - e[0],

v[1] - e[1],

v[2] - e[1]

]),

map([

v[0] + e[1],

v[1] + e[0],

v[2] + e[1]

]) - map([

v[0] - e[1],

v[1] - e[0],

v[2] - e[1]

]),

map([

v[0] + e[1],

v[1] + e[1],

v[2] + e[0]

]) - map([

v[0] - e[1],

v[1] - e[1],

v[2] - e[0]

])

]);

}

function normalize(v) {

var len = length(v);

return [v[0] / len, v[1] / len, v[2] / len];

}

function mod(f, m) {

return f % m;

}

function length(v) {

return Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]);

}

function clamp(val, min, max) {

return Math.min(Math.max(min, val), max);

}

function mix(f0, f1, per) {

return f0 * (1.0 - per) + f1 * per;

}

function dot(v1, v2) {

return v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2];

}

function resize() {

// var scale = window.innerHeight / canvasHeight;

var scale = 1;

//canvas.style.width = canvasWidth * scale + "px";

//canvas.style.height = window.innerHeight + "px";

canvas.style.left = window.innerWidth * 0.5 - (canvasWidth * scale * 0.5) + "px";

}

init();