This is Your Brain on CSS
First things first: the CSS 3D renderer used to power this site is now available on GitHub.com. However, it's still limited to only solid lines and planes. It's also limited to WebKit browsers, as Firefox's CSS 3D support just isn't quite there yet.
But CSS 3D is not a one trick pony, and as with many things, what you get out of it depends entirely on what you put in. So here's a disembodied head made out of CSS 3D. It consists of nothing more than a bunch of images stacked up against each other, and integrates perfectly with the existing 3D parallax on this site. Click and drag to rotate, or use the slider to look inside.
Making the basic effect was actually quite easy. I took an MRI from the Stanford Volume Data Archive and wrote a small script to turn it into a sheet of CSS sprites. There's one file for color, one for opacity, totalling about 2.1 MB. Both files are composited into Canvases and placed in slices into the DOM, offset forward or backwards in 3D. Then there's just some minor logic to rotate the slices in 90 degree increments to follow the camera.
But the slices are rendered as is, and the MRI consists of boring grayscale data. Luckily, I can precompute any amount of shaders and effects I want and just bake them into the slices. I geeked out by applying fake specular lighting, for that 'fresh meat' look, and volumetric obscurance to enhance the sense of depth on the inside. I changed the palette to gory colors based on local density, giving the impression of flesh and bone knitting itself together. Creepy, but cool.
I wrapped it in a custom widget, using straight up CSS rather than Three.js this time. I've wanted to play with Tangle.js, so I used that to hook up the camera controls and slider. That's pretty much it. In an ideal world, the jarring transition when rotating would be covered up by a nice transition, but the browsers don't like it.
REXML could not parse this XML/HTML:
<script>
setTimeout(function () {
if ($('div.css3d-support:visible').length == 0) return;
var model = {
initialize: function () {
// State
this.theta = 0.0;
this.phi = 0.5;
this.slice = 0;
},
update: function () {
this.transform = 'rotateX('+ -this.theta +'rad) rotateY('+ this.phi +'rad)';
},
};
Tangle.classes.CSS3DCamera = {
initialize: function (element, options, tangle, variables) {
this.element = element;
this.$element = $(element);
var that = this;
$(element).mousedown(function (event) {
that.drag = true;
that.dragLast = that.dragOrigin = { x: event.pageX, y: event.pageY };
event.preventDefault();
});
$(document).mouseup(function (event) {
that.drag = false;
});
$(document).mousemove(function (event) {
if (!that.drag) return;
var total = { x: event.pageX - that.dragOrigin.x, y: event.pageY - that.dragOrigin.y },
delta = { x: event.pageX - that.dragLast.x, y: event.pageY - that.dragLast.y };
that.dragLast = { x: event.pageX, y: event.pageY };
mousemove(that.dragOrigin, total, delta);
});
function mousemove(origin, total, delta) {
var phi = tangle.getValue('phi') + delta.x * .01,
theta = Math.min(1, Math.max(-.2, tangle.getValue('theta') + delta.y * .01));
tangle.setValue('phi', phi);
tangle.setValue('theta', theta);
}
},
update: function (element, value) {
this.$element.css({
WebkitTransform: value,
MozTransform: value,
transform: value,
})
},
},
Tangle.classes.Slider = {
initialize: function (element, options, tangle, variables) {
var that = this;
this.tangle = tangle;
this.element = element;
this.$element = $(this.element);
this.$bar = $('<div class="bar">').appendTo(this.element);
this.$handle = $('<div class="handle">').appendTo(this.element);
var that = this;
$(this.element).mousedown(function (event) {
that.origin = that.$element.offset().left;
that.width = that.$bar.width();
that.drag = true;
return false;
});
$(document).mousemove(function (event) {
if (!that.drag) return;
tangle.setValue('slice', Math.max(0, Math.min(1, (event.pageX - that.origin) / that.width)));
});
$(document).mouseup(function () {
that.drag = false;
});
},
update: function (element, value) {
this.$handle.css('left', (100*value) + '%');
},
},
Tangle.classes.VolumetricView = {
initialize: function (element, options, tangle, variables) {
var that = this;
this.tangle = tangle;
this.element = element;
this.$element = $(element);
this.width = 364;
this.height = 384;
this.depth = 256;
this.resX = 182;
this.resY = 192;
this.slices = 108;
this.stride = 8;
this.rows = Math.ceil(this.slices / this.stride);
this.createSlices();
var load = 0;
this.image = new Image();
this.image.onload = function () {
if (++load == 2) that.drawSlices();
};
this.mask = new Image();
this.mask.onload = function () {
if (++load == 2) that.drawSlices();
};
// this.image.src = 'data/MRbrain.png';
this.image.src = '/files/mri/MRbrain-color.jpg';
this.mask.src = '/files/mri/MRbrain-alpha8.png';
},
update: function (element, value) {
var l = Math.abs(Math.cos(value)) > Math.abs(Math.sin(value));
if (this.l != l || this.slice != slice) {
var slice = this.tangle.getValue('slice'), index,
n = (l ? Math.cos(value) : Math.sin(value)) > 0,
sn = n ? slice : 1 - slice;
index = +(this.$slicesX.length * sn);
this.$slicesX.css('display', l ? 'block' : 'none');
this.$slicesX
.slice().css('opacity', n ? .95 : .001).end()
.slice(0, index).css('opacity', !n ? .95 : .001).end();
index = +(this.$slicesZ.length * sn);
// this.$slicesZ[!l ? 'show' : 'hide']();
this.$slicesZ.css('display', !l ? 'block' : 'none');
this.$slicesZ
.slice(index).css('opacity', n ? .95 : .001).end()
.slice(0, index).css('opacity', !n ? .95 : .001).end();
this.slice = slice;
this.l = l;
}
},
createSlices: function () {
this.$element.empty();
this.ctxX = [];
this.ctxZ = [];
// X slices
for (var i = 0; i < this.slices; ++i) {
var z = -((i / this.slices) - .5) * this.depth,
t = 'translateZ(' + z + 'px) translateX(70px)';
var $canvas = $('<canvas>')
.addClass('x')
.attr('width', this.resX)
.attr('height', this.resY)
.css({
width: this.width,
height: this.height,
WebkitTransform: t,
MozTransform: t,
transform: t,
opacity: 1,
});
this.$element.append($canvas);
this.ctxX.push($canvas[0].getContext('2d'));
}
// Z slices
for (var i = 0; i < this.resX; ++i) {
var z = -(this.depth - this.width) / 2,
x = ((i / this.resX) - .5) * this.width,
t = 'translateX(' + x + 'px) translateX(70px) rotateY(90deg) translateZ(' + z + 'px)';
var $canvas = $('<canvas>')
.addClass('z')
.attr('width', this.slices)
.attr('height', this.resY)
.css({
width: this.depth,
height: this.height,
WebkitTransform: t,
MozTransform: t,
transform: t,
opacity: 0,
});
this.$element.append($canvas);
this.ctxZ.push($canvas[0].getContext('2d'));
}
this.$slicesX = this.$element.find('canvas.x');
this.$slicesZ = this.$element.find('canvas.z');
},
drawSlices: function () {
var s = this.stride,
sl = this.slices,
r = this.rows,
w = this.resX,
h = this.resY,
img = this.image,
mask = this.mask,
ctxX = this.ctxX,
ctxZ = this.ctxZ;
var alpha, color;
// X slices
this.$slicesX.each(function (i) {
var c = ctxX[i],
ox = (i % s) * w, oy = Math.floor(i / s) * h;
// Draw alpha channel and get pixels
c.drawImage(mask, ox, oy, w, h, 0, 0, w, h);
alpha = c.getImageData(0, 0, w, h);
// Draw color channel and get pixels
c.drawImage(img, ox, oy, w, h, 0, 0, w, h);
color = c.getImageData(0, 0, w, h);
// Copy red to alpha.
var src = alpha.data, dst = color.data;
for (var y = 0; y < h; ++y) {
for (var x = 0; x < w; ++x) {
var o = (x + y * w) * 4;
dst[o + 3] = src[o];
}
}
// Draw RGBA.
c.putImageData(color, 0, 0);
});
// Z slices
this.$slicesZ.each(function (i) {
var c = ctxZ[i];
// Render transposed slices as vertical strips.
for (var j = 0; j < sl; ++j) {
var ox = (j % s) * w, oy = Math.floor(j / s) * h;
// Draw alpha channel
c.drawImage(mask, ox + i, oy, 1, h, j, 0, 1, h);
}
// Get pixels
alpha = c.getImageData(0, 0, w, h);
// Render transposed slices as vertical strips.
for (var j = 0; j < sl; ++j) {
var ox = (j % s) * w, oy = Math.floor(j / s) * h;
// Draw color channel
c.drawImage(img, ox + i, oy, 1, h, j, 0, 1, h);
}
// Get pixels
color = c.getImageData(0, 0, w, h);
// Copy red to alpha.
var src = alpha.data, dst = color.data;
for (var y = 0; y < h; ++y) {
for (var x = 0; x < w; ++x) {
var o = (x + y * w) * 4;
dst[o + 3] = src[o];
}
}
// Draw RGBA.
c.putImageData(color, 0, 0);
});
},
};
var tangle = new Tangle($('#head-3d')[0], model);
}, 200);
</script>REXML could not parse this XML/HTML:
<script>
//
// Tangle.js
// Tangle 0.1.0
//
// Created by Bret Victor on 5/2/10.
// (c) 2011 Bret Victor. MIT open-source license.
//
// ------ model ------
//
// var tangle = new Tangle(rootElement, model);
// tangle.setModel(model);
//
// ------ variables ------
//
// var value = tangle.getValue(variableName);
// tangle.setValue(variableName, value);
// tangle.setValues({ variableName:value, variableName:value });
//
// ------ UI components ------
//
// Tangle.classes.myClass = {
// initialize: function (element, options, tangle, variable) { ... },
// update: function (element, value) { ... }
// };
// Tangle.formats.myFormat = function (value) { return "..."; };
//
var Tangle = this.Tangle = function (rootElement, modelClass) {
var tangle = this;
tangle.element = rootElement;
tangle.setModel = setModel;
tangle.getValue = getValue;
tangle.setValue = setValue;
tangle.setValues = setValues;
var _model;
var _nextSetterID = 0;
var _setterInfosByVariableName = {}; // { varName: { setterID:7, setter:function (v) { } }, ... }
var _varargConstructorsByArgCount = [];
//----------------------------------------------------------
//
// construct
initializeElements();
setModel(modelClass);
return tangle;
//----------------------------------------------------------
//
// elements
function initializeElements() {
var elements = rootElement.getElementsByTagName("*");
var interestingElements = [];
// build a list of elements with class or data-var attributes
for (var i = 0, length = elements.length; i < length; i++) {
var element = elements[i];
if (element.getAttribute("class") || element.getAttribute("data-var")) {
interestingElements.push(element);
}
}
// initialize interesting elements in this list. (Can't traverse "elements"
// directly, because elements is "live", and views that change the node tree
// will change elements mid-traversal.)
for (var i = 0, length = interestingElements.length; i < length; i++) {
var element = interestingElements[i];
var varNames = null;
var varAttribute = element.getAttribute("data-var");
if (varAttribute) { varNames = varAttribute.split(" "); }
var views = null;
var classAttribute = element.getAttribute("class");
if (classAttribute) {
var classNames = classAttribute.split(" ");
views = getViewsForElement(element, classNames, varNames);
}
if (!varNames) { continue; }
var didAddSetter = false;
if (views) {
for (var j = 0; j < views.length; j++) {
if (!views[j].update) { continue; }
addViewSettersForElement(element, varNames, views[j]);
didAddSetter = true;
}
}
if (!didAddSetter) {
var formatAttribute = element.getAttribute("data-format");
var formatter = getFormatterForFormat(formatAttribute, varNames);
addFormatSettersForElement(element, varNames, formatter);
}
}
}
function getViewsForElement(element, classNames, varNames) { // initialize classes
var views = null;
for (var i = 0, length = classNames.length; i < length; i++) {
var clas = Tangle.classes[classNames[i]];
if (!clas) { continue; }
var options = getOptionsForElement(element);
var args = [ element, options, tangle ];
if (varNames) { args = args.concat(varNames); }
var view = constructClass(clas, args);
if (!views) { views = []; }
views.push(view);
}
return views;
}
function getOptionsForElement(element) { // might use dataset someday
var options = {};
var attributes = element.attributes;
var regexp = /^data-[\w\-]+$/;
for (var i = 0, length = attributes.length; i < length; i++) {
var attr = attributes[i];
var attrName = attr.name;
if (!attrName || !regexp.test(attrName)) { continue; }
options[attrName.substr(5)] = attr.value;
}
return options;
}
function constructClass(clas, args) {
if (typeof clas !== "function") { // class is prototype object
var View = function () { };
View.prototype = clas;
var view = new View();
if (view.initialize) { view.initialize.apply(view,args); }
return view;
}
else { // class is constructor function, which we need to "new" with varargs (but no built-in way to do so)
var ctor = _varargConstructorsByArgCount[args.length];
if (!ctor) {
var ctorArgs = [];
for (var i = 0; i < args.length; i++) { ctorArgs.push("args[" + i + "]"); }
var ctorString = "(function (clas,args) { return new clas(" + ctorArgs.join(",") + "); })";
ctor = eval(ctorString); // nasty
_varargConstructorsByArgCount[args.length] = ctor; // but cached
}
return ctor(clas,args);
}
}
//----------------------------------------------------------
//
// formatters
function getFormatterForFormat(formatAttribute, varNames) {
if (!formatAttribute) { formatAttribute = "default"; }
var formatter = getFormatterForCustomFormat(formatAttribute, varNames);
if (!formatter) { formatter = getFormatterForSprintfFormat(formatAttribute, varNames); }
if (!formatter) { log("Tangle: unknown format: " + formatAttribute); formatter = getFormatterForFormat(null,varNames); }
return formatter;
}
function getFormatterForCustomFormat(formatAttribute, varNames) {
var components = formatAttribute.split(" ");
var formatName = components[0];
if (!formatName) { return null; }
var format = Tangle.formats[formatName];
if (!format) { return null; }
var formatter;
var params = components.slice(1);
if (varNames.length <= 1 && params.length === 0) { // one variable, no params
formatter = format;
}
else if (varNames.length <= 1) { // one variable with params
formatter = function (value) {
var args = [ value ].concat(params);
return format.apply(null, args);
};
}
else { // multiple variables
formatter = function () {
var values = getValuesForVariables(varNames);
var args = values.concat(params);
return format.apply(null, args);
};
}
return formatter;
}
function getFormatterForSprintfFormat(formatAttribute, varNames) {
if (!sprintf || !formatAttribute.test(/\%/)) { return null; }
var formatter;
if (varNames.length <= 1) { // one variable
formatter = function (value) {
return sprintf(formatAttribute, value);
};
}
else {
formatter = function (value) { // multiple variables
var values = getValuesForVariables(varNames);
var args = [ formatAttribute ].concat(values);
return sprintf.apply(null, args);
};
}
return formatter;
}
//----------------------------------------------------------
//
// setters
function addViewSettersForElement(element, varNames, view) { // element has a class with an update method
var setter;
if (varNames.length <= 1) {
setter = function (value) { view.update(element, value); };
}
else {
setter = function () {
var values = getValuesForVariables(varNames);
var args = [ element ].concat(values);
view.update.apply(view,args);
};
}
addSetterForVariables(setter, varNames);
}
function addFormatSettersForElement(element, varNames, formatter) { // tangle is injecting a formatted value itself
var span = null;
var setter = function (value) {
if (!span) {
span = document.createElement("span");
element.insertBefore(span, element.firstChild);
}
span.innerHTML = formatter(value);
};
addSetterForVariables(setter, varNames);
}
function addSetterForVariables(setter, varNames) {
var setterInfo = { setterID:_nextSetterID, setter:setter };
_nextSetterID++;
for (var i = 0; i < varNames.length; i++) {
var varName = varNames[i];
if (!_setterInfosByVariableName[varName]) { _setterInfosByVariableName[varName] = []; }
_setterInfosByVariableName[varName].push(setterInfo);
}
}
function applySettersForVariables(varNames) {
var appliedSetterIDs = {}; // remember setterIDs that we've applied, so we don't call setters twice
for (var i = 0, ilength = varNames.length; i < ilength; i++) {
var varName = varNames[i];
var setterInfos = _setterInfosByVariableName[varName];
if (!setterInfos) { continue; }
var value = _model[varName];
for (var j = 0, jlength = setterInfos.length; j < jlength; j++) {
var setterInfo = setterInfos[j];
if (setterInfo.setterID in appliedSetterIDs) { continue; } // if we've already applied this setter, move on
appliedSetterIDs[setterInfo.setterID] = true;
setterInfo.setter(value);
}
}
}
//----------------------------------------------------------
//
// variables
function getValue(varName) {
var value = _model[varName];
if (value === undefined) { log("Tangle: unknown variable: " + varName); return 0; }
return value;
}
function setValue(varName, value) {
var obj = {};
obj[varName] = value;
setValues(obj);
}
function setValues(obj) {
var changedVarNames = [];
for (var varName in obj) {
var value = obj[varName];
var oldValue = _model[varName];
if (oldValue === undefined) { log("Tangle: setting unknown variable: " + varName); continue; }
if (oldValue === value) { continue; } // don't update if new value is the same
_model[varName] = value;
changedVarNames.push(varName);
}
if (changedVarNames.length) {
applySettersForVariables(changedVarNames);
updateModel();
}
}
function getValuesForVariables(varNames) {
var values = [];
for (var i = 0, length = varNames.length; i < length; i++) {
values.push(getValue(varNames[i]));
}
return values;
}
//----------------------------------------------------------
//
// model
function setModel(modelClass) {
var ModelClass = function () { };
ModelClass.prototype = modelClass;
_model = new ModelClass;
updateModel(true); // initialize and update
}
function updateModel(shouldInitialize) {
var ShadowModel = function () {}; // make a shadow object, so we can see exactly which properties changed
ShadowModel.prototype = _model;
var shadowModel = new ShadowModel;
if (shouldInitialize) { shadowModel.initialize(); }
shadowModel.update();
var changedVarNames = [];
for (var varName in shadowModel) {
if (!shadowModel.hasOwnProperty(varName)) { continue; }
if (_model[varName] === shadowModel[varName]) { continue; }
_model[varName] = shadowModel[varName];
changedVarNames.push(varName);
}
applySettersForVariables(changedVarNames);
}
//----------------------------------------------------------
//
// debug
function log (msg) {
if (window.console) { window.console.log(msg); }
}
}; // end of Tangle
//----------------------------------------------------------
//
// components
Tangle.classes = {};
Tangle.formats = {};
Tangle.formats["default"] = function (value) { return "" + value; };
</script>]]>