• inspect various premade controls
• expand/make custom if necessary
• tried FlyCamera, but shaky because of delta

• set specific areas has having particles,
• define different environmental particle types

• mesh
• "lifecycle"
• growth from golgi

Interactivity

• enter scenes
• interact with components
• interact with proteins
• interact with molecules
• "experiments"
• Realism Settings/Slider #25

Exploration

The cell should be totally and freely explorable.

Beyond Exploration

Potential ideas to implement user interactive features beyond exploration:

• clicking on protein expands domains apart
• highlight/discover proteins involved in a "system"
• conformational changes
• shape complementarity
• charge complementarity
• H-bonds -> dissociation kinetics

Centrioles

• Find PDB
• Play with positioning in Blender
• Use in THREE
• Integrate into API #19
  

Level of Detail

• LOD for inner scenes
• LOD for proteins
• LOD for three mesh classes
• Do #14
• try it out with babylon

Three provides an LOD utility for specifying which mesh should be shown at what distance. However, there is no tool to simplify complex meshes down into lower-poly ones.

Related to #26.

Basically, "Pick and check for collisions at random positions to place proteins on membranes" can work well, but there needs to be a way to handle more specific structures. For example, ATP synthases on cristae. The dimer's need to pinch the membrane, and essentially be centering over the main pinching region. I attempted this using the collision based alg., plus also only allowing it to use vertices based on a z threshold, to "push" them close to the front. What is awesome is that this actually kinda works, and gets a "natural" dimer arrangement, but the threshold is too individually specific, and it won't work on all cristaes with the same value. You can see here one cristae is good (albeit a little offset from center), while another has too many ATP synthases:

• populate membranes with proteins that have defined TM-Section material
• move linearly through verts
• move randomly through verts
• move through faces
• filter by face normals threshold
• filter by face normals average
• avoid edges
• list of proteins
• different densities for each protein
• different proteins on inner and outer side

Given a membrane mesh and a list of proteins, populate the membrane mesh

• no intersections
• settings for filling all possible space, amount of space filled, different densities for different proteins

Given a (relatively) arbitrary geometry:

• sphere
• section of sphere
• curved plane (red)
• plane with "noise" around edges (blue)
• "arbitrary" (grey)

we would like to populate it with non-intersecting protein meshes. These can be simplified to their bounding box.

• Re-read paper
• take notes on algorithm
• Implement algorithm with redux-react
• Implement as standalone module for meshes
• Reimplement with C for asm.js if possible
• just use Blender's decimate modifier and export different models

• Make an ER in blender manually
• procedurally make ER in blender
• procedurally make ER in three.js
• dynamic shape with time
• define potential "children"

Scale

• check if normal buffer is "good enough"
• experiment with Z buffer on Intel 6100

A central problem with understanding the cell is the scale of its components. How big is the nucleus? How small is an ATP molecule? Or ATP Synthase?

Can that scale be visualized within a graphical application served through the browser on everyday devices with only integrated graphics? This is one of the central challenges - and goals - of BioRender.

The goal is to achieve 60fps on Intel Iris Graphics 6100 1536 MB - the integrated graphics that come with a modern i5 processor. If 60fps (16ms/frame) is simply too far reaching - 30fps should be the baseline.

Units

The standard units we will use throughout will be angstroms (Å) and nanometers (nm). Angstroms when discussing proteins, molecules, and complexes. Nanometers when discussing the distribution and size of cellular components. However, nanometers will be used most of the time, even when dealing with proteins. Angstroms will probably only be used for positioning proteins into complexes and protein mesh deformations.

We will start by using 1 in world coordinates as 1nm.

Objects

ATP Synthase

F1 Unit - 10nm

Mitochondrion

1500nm by 1000nm

Nucleus

5000nm

Cell

20 000nm

Implementation

Going from 1nm to 20 000nm is 4 jumps in magnitude. That is, 2 * 10^4 = 20 000.

Computer graphics represent depth using what is known as a "depth buffer" or (perhaps more commonly) "z buffer". It is important to note which objects should be placed in front of or behind one another. Normally, the z buffer is linear. Three.js has an example demonstrating a logarithmic depth buffer allowing you to "zoom through scene with objects ranging in size from 1µm to 100,000,000 light years". Unfortunately, this gets ~15fps on Iris. (Keep in mind my Radeon 6950 - a modest GPU - holds a solid 60fps without breaking a sweat). The normal z-buffer seems to break at 1m. This suggests that a linear buffer can handle 1µm to 1m is 9 jumps in magnitude. Perhaps performance will improve sufficiently with the logarithmic buffer when there is not a as big a gap (1µm to 100 000 000 light years is quite a gap).

• settings for concentration
• predefined mesh generation params
• settings for speeds

High, medium, low "realism" settings, or slider if possible, can change

• shape of mesh (complicated vs simple)
• concentration of proteins/molecules (lots vs. little)
• speed of rotations (e.g. atp synthase barrel)

Microtubule

• simple experiment with spheres
• get PDB IDs of tubulins
• generate for any length
• define structure of cell

Protein Mesh Deformation

• do mesh simplification first
• play with this in Blender
• find/read paper on common technique
• implement in redux-algorithms
• implement in JS
• implement with asm.js

Use cases

• ATP-synthase rod is not bent in crystalline structure, need to deform mesh to obtain realistic shape
• conformational change animations

• integrate into API, make as much static as possible
• modes for scenes, needs separation for rotation of individual components

Mitochondrion

• Make basic mitochondrion in Blender
• Make nice mitochondrion in Blender
• Make mitochondrion with pinching technique in Blender
• gather a bunch of mitochondrion cartoon drawings / images
• procedurally generate mitochondrion mesh with blender
• generate mesh with JS
• define proteins/inner scenes/components
• integrate with API #19 as a "scene"?

@inconvergent has made some interesting algorithms "inspired by the way a number of biological things in nature grows". See differential-line and differential-mesh. Perhaps ideas can be brought over from these algorithms generatively create a 3D mitochondrion mesh.

Alternatively, an initial basic mitochondrion mesh can be made out of cylinders, hemispheres, and basic sinusoidal waves.

Relationships

Mitochondrion contains these scenes:

• Electron Transport Chain

Mitochondrion is involved with:

• Microtubule

Cell Membrane

• define different types
• types can have different proportions of different proteins
• texture/shader/baking

A "generic" cell membrane:

"Waviness" can be implemented using sine waves and Simplex noise.

LOD for phospholipids? Need not store information for every phospholipid, perhaps only those on the edge, and use one big mesh, or texture for others.

Electron Transport Chain

• get list of proteins involved
• get their PDB IDs
• finish generate mesh from PDB
• get ETC mesh
• define "actions"
• integrate with API #19 as proteins that belong to scene/component

ATP synthase + others < ETC < Mitochondrion

To get list of meshes to test collisions with, we use the bounding sphere radius to search the octree at the current position (link):

const searchResults = octree.search(new THREE.Vector3(vert.x, vert.y, vert.z), boundingRadius*2)

Perhaps in this special case, radius is not big enough? Somehow the collision is sneaking by.

See:

ATP Synthase

• from prebuilt model
• rotating barrel
• PDB to mesh
• LOD mesh
• align to cristae pinch properly

Composed of the following PDB records:

LOD

Crude LOD can be obtained using a basic mesh composed of a cylinder and sphere for far, and the detailed .obj model for close.

Phospholipids

• PDB small molecules DB
• define proteins/components they interact with
• phospholipids top texture
• phospholipids side texture

Phospholipid. Use PDB or just make our own basic meshes?

• make mesh in Blender
• procedurally make mesh in Blender
• procedurally make mesh in JS
• define potential "children"

• try out BioBlender. does it take a long time?
• find paper on PDB to surface structure mesh algorithm
• read paper
• implement algorithm in redux-algorithms

For Feb. 11

• procedural cubes
• procedural extrusion
• integrate randomness
• improve cristae arrangement

What are the broad goals?

• Scaffold out broad goals
• draft out potential surface structure API
• Integrate biologists' feedback

• types
• shape/size/textures
• API #19

Nucleus

• properly proportioned nucleus sphere
• PDB for nuclear pores
• properly distributed nuclear pores
• texture/shader/baking

• spinning atp synthase barrels
• proper face material indices when merging ATP synthase geometry
• face colors to keep different colours on one mesh with BufferGeometry (synthase colours)
• better cristae distribution - even on both sides, no big gap
• inner and outer membrane phospholipid textures
• better LOD, no empty object at lowest level. instead use simple block representation or billboards or otherwise. autogenerate billboard using 4 cameras and render to texture
• improved camera/controls
• improve UV stretching/compression
• find good amount of ETCs w/o having to hide them completely at zoom out

• get PDB
• good LOD settings
• cellular vs. mitochondrial