Home

Welcome to the (in-progress) mpos-precept wiki!

mpos

Add DOM elements to the scene based upon tag, tree, and settings. Update from live DOM. Apply view filter, arc.

.add

Methods to grade and transform sets of elements or properties.

• box (rect, opts) -- transfers element properties and type into THREE, and may lazily call loader

• css (rect, progress) -- toggle ancestors .mp-unset class (rotate, scale), transform quirks of box matrix, and update rect.ux frame transforms

• dom (selector, opts) -- parse HTML tags to depth (including comments) and update grade

  flat-grade	deep-grade	update
  NodeIterator::idx	struct::mat	atlas/transforms::box

  • if a #comment node begins //_THREE it will exec() unless opts.parse() is provided
  • if an unwrapped #text node has siblings it will be wrapped .mp-poster

• fit (dummy, group, opts) -- contain outputs

• loader (source, dummy) -- pass data to THREE.FileLoader, THREE.SVGLoader, OpenCV...

• old (selector) -- dispose of THREE.Group, reset data-idx, release listeners

• opencv (img, group, dummy) -- WASM Module to image process (kmeans > inrange > contours) and create THREE.ShapeGeometry

• pyr (width, height, thumb) -- returns dimensions scaled to thumb

• shader (canvas, texStep) -- texture atlas shader for Instanced Mesh

• src (el, url, attr) -- sets src

.init (opts)

Initialize scene and events in standalone mode, or provide an existing scene, camera, and renderer.

.precept

Criteria to filter DOM nodes.

• allow -- ['.mp-allow', …] DOM selectors for depth and hierarchy
• block -- ['.mp-block', …] DOM selectors to blacklist unsafe elements
• canvas -- atlas uses this globally
• cors -- ['iframe','object','.yt'] DOM selectors for foreign objects, which don't draw in html-to-image
• inPolar (node, control) -- returns node visibility, to compare with threshold .var.opt.inPolar

  false	true	1	2	3	4
  empty, control !CONTAINS	control CONTAINS	not empty	tag	visible	in viewport

• index -- count runs of mpos.dom
• manual -- ['.mp-loader','.mp-native','.mp-poster'] shortcodes to pass mat type
• native -- ['.mp-native', …] DOM selectors for interactive which is traditionally CSS3D (if cors), or otherwise denoted with ux and coerced to atlas (which is poster)
• native3d -- […] DOM selectors stub for other 3D scenes
• poster -- ['.mp-poster', …] DOM selectors to draw texture atlas
• unset -- ['.mp-offscreen'] shortcodes to pass css quirks
• update (grade, dataIdx) -- process queue (for atlas or other), which passes box a rect to add or update (based on mat and obj)

.ux

User-experience utilities.

• event (e) -- handle mouse events, with raycast metadata
• observer -- IntersectionObserver will update elements which exceed inPolar threshold
• raycast (e) -- instanced atlas layer maps to data-idx of element/rect, and updates carot
• reflow (e) -- lazily enqueue update, from event such as resize or scroll
• render -- tick a step
• timers -- { clear(key), frame: [], reflow: [] } value -1 clears timer, 0 draws frame, 1+ draws frames each time

.var

Variables commonly referenced.

• camera -- THREE.PerspectiveCamera
• caret -- location of raycast element on atlas and visibility in regard to inPolar
• controls -- THREE.MapControls
• cv -- true if OpenCV was injected by loader
• events -- { target, x, y, position, ux } current element meta from raycast, use by event MouseEvent
• fov -- { w, h, z, max } viewport, offset, and baseline relative unit
• geo -- THREE.BoxGeometry
• grade -- { atlas, group, rects, wait…} current accumulation of DOM selector's output
• mat -- THREE.MeshBasicMaterial for sides, cloned for front
• mat_line -- THREE.LineBasicMaterial for back
• mat_shader -- THREE.RawShaderMaterial for texture atlas
• mat_shape -- THREE.MeshBasicMaterial for OpenCV contours
• opt -- { address, arc, depth, dispose, inPolar, selector, update() } options for dat.GUI
• pointer -- mouse position
• proxy -- true if init supplied a scene, camera, and renderer
• raycaster -- THREE.Raycaster
• reflow -- setTimeout
• renderer -- THREE.Renderer for rect.mat if (poster, atlas...)
• rendererCSS -- THREE.Renderer for rect.mat if (native, other...)
• scene -- THREE.Scene
• unset -- { display, margin, transform, left, right } reset class for html-to-image

reference

grade

Accumulate process data.

• atlas -- count of mat type poster, and coerced ux which is traditionally native
• canvas -- global canvas
• cells -- sqrt of half maxEls
• el -- selector
• group -- THREE.Group for current selector
• inPolar -- count of elements at or above view threshold
• index -- count invocations of program
• instanced -- THREE.InstancedMesh
• key -- { x, y } atlas coordinate for empty rect (self, child)
• maxEls -- count of all selector children
• maxRes -- cells * minRes or 16_384
• minEls -- count of elements added, affected by inPolar and user events
• minRes -- pow ( fov / fov.max ) * 128
• osc -- OffscreenCanvas
• r_ -- { queue, atlas, other } subset of rect elements
• ray -- update maps a rect data-idx to the instanceId for user events
• rects -- reference element meta by data-idx
• scroll -- { x, y }
• txt -- array of #text nodes that were wrapped
• wait -- true when update is busy

loader

Matches uri and mime against json|svg|gif|jpg|jpeg|png|webp|webm|mp4|ogv.

• File -- manual class .mp-loader outputs paths via OpenCV for mimes matching generic+image. Otherwise, THREE.FileLoader is specified but has no output.
• WEBM|MP4|OGV -- THREE.VideoTexture
• .JSON -- THREE.ObjectLoader, expects a valid object mesh
• .SVG -- THREE.SVGLoader
• .GIF -- SuperGif, cloned node becomes a CanvasTexture

mat

Media treatment is determined by tag, manual class, and settings.

• self -- generic
• child -- generic
• native -- CSS3D, for elements of foreign origin (CORS) which html-to-image does not draw
• poster -- html-to-image, which native is coerced to (for VR?)
• loader -- File, SVGLoader, OpenCV WASM

precept

Depth of selector tree is determined by a hierarchy of semantics, children, and settings.

• allow whitelist -- .mp-allow,div,main,section,article,nav,header,footer,aside,tbody,tr,th,td,li,ul,ol,menu,figure,address
• block blacklist -- .mp-block,canvas[data-engine~='three.js'],head,style,script,link,meta,applet,param,map,br,wbr,template,iframe:not([src])
• native CSS3DRenderer -- .mp-native,a,canvas,iframe,frame,object,embed,svg,table,details,form,label,button,input,select,textarea,output,dialog,video,audio[controls]
• poster html-to-image -- .mp-poster,canvas,picture,img,h1,h2,h3,h4,h5,h6,p,ul,ol,li,th,td,summary,caption,dt,dd,code,span,root
• native3d environment -- model-viewer,a-scene,babylon,three-d-viewer,#stl_cont,#root,.sketchfab-embed-wrapper,StandardReality
• cors foreign -- iframe,object,.yt
• unset quirks -- .mp-offscreen
• manual user -- .mp-loader,.mp-native,.mp-poster

rect

Properties of DOM element.

• atlas -- FIFO index for InstancedMesh shader
• bound -- DomRect with client:{w,h} updated from css to compare for ux change
• css -- { degree, radian, scale, style: CSSStyleDeclaration, transform }
• el -- DOM element
• frame -- last update from timer, prevents duplicate transforms
• inPolar -- view threshold of element
• mat -- fine label, derived from precept lists and manual classes
• r_ -- coarse label, may be atlas or other, largely derived from mat
• ux -- { i, o, u } priority hint from (in) element type, (out+in) css state including pseudo, (update css/box/both) frame differs
• x -- atlas x%/100
• y -- atlas y%/100
• z -- z-Index if set