Home

mpos

For more abstract information, view the Welcome or Process Flow.

.fnVar

Utility for tool to map scope, and act as an access gateway.

.init

Initialize scene, containers, and EventListeners. Accepts a { scene, camera, renderer } to assist imports as a proxy.

.mod

Imposter DOM rects in THREE

• add — Traverse HTML nodes and then update grade. Remove old objects and create atlas.
• precept — Criteria to filter DOM node, by matching selector. Traversal further imposes limits upon depth, children, and size.
  • allow — Proceed as structural hierarchy
  • block — Blacklist unsafe element
  • cors — Use CSS3DRenderer as foreign object won't coerce to canvas
  • manual — Minor subset of classes, for user to specify type
  • native — Interactive media type with frequent usage
  • native3d — Stub to relay other 3D scene
  • parse — Execute comment which begins //__THREE__
  • poster — Draw texture atlas
  • tween — CSS styles to differ, pre/post the frame phase of bubble/capture
  • unset — Quirk or convenience
• rect — State of element grade, including: index/uv, major/minor, style/bound, transform.
• treeDeep — Traverse element children and grade by precept match.
• treeFlat — Index elements, wrap non-block, and parse scripts.
• treeGrade — State of DOM rects, including: Sets/Groups, events/queue, time/frame.
• treeSort — Tail pass to revise grade using accumulate values.

.set

Methods to grade and transform sets of elements or properties.

• box — Create geometry from element type, and update matrix. May lazily call loader.
• cache — store of objects from loader
• css — Accumulate styles and transforms from synthetic bubble/capture phase. Reduce the difference from precepts.
• fit — Contain AABB output of Loader groups, and provide a callback for other detached chores.
• inPolar — Return node visibility, to compare with options threshold. Opacity < 0.25 is not visible.

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

• key — Map rect.idx to rect.major, primarily for atlas uv iterator and instanced.count
• loader — Pass data to THREE.FileLoader, THREE.SVGLoader, OpenCV...
• opencv — WASM module to image process (kmeans > inrange > contours) and create THREE.ShapeGeometry
• shader — Texture atlas shader for Instanced Mesh
• use — Utility to pass through manual matrix updates

.step

• atlas — Draw cells of qualified rect.ux options using html-to-image.
• rate — Frame phase to propagate or reduce rect.ux state from css, inPolar, and differs.
• sync — Queue of rects is updated within time-gated quality.
• transform — Compose box and update uv/color. Update raycast targets and render.

.ux

User-experience utilities.

• event — Handle mouse events, with raycast metadata
• events — { target[], synthetic{}, raycaster, pointer } Current element meta from raycast, use by event MouseEvent
• observer — IntersectionObserver will update elements which exceed inPolar threshold
• raycast — Instanced atlas layer maps to data-idx of element/rect, and updates carot
• reflow — Lazily enqueue update, from event such as resize or scroll
• render — update matrixWorld, update time sync
• timers — { reflow[], delay[], clear(key) } Value -1 clears timer, 0 draws frame, 1+ draws frames each time

.var

Variables commonly referenced.

• batch — unique increment of grade
• cache — store loader responses for reuse, and store onBeforeRender methods from inline code
• camera — THREE.PerspectiveCamera
• caret — Location of raycast element on atlas and visibility in regard to inPolar
• controls — THREE.MapControls
• fov — { basis, dpr, width, height, z } Viewport, offset, and baseline relative unit
• geo — THREE.BoxGeometry
• grade — class { atlas, group, rects, wait…} Current accumulation of DOM selector's output
• mat —THREE.MeshBasicMaterial for sides, cloned for front
• mat_line — THREE.MeshBasicMaterial for back
• mat_shader — THREE.RawShaderMaterial for texture atlas
• mat_shape — THREE.MeshBasicMaterial for OpenCV contours
• opt — { arc, custom, delay, depth, inPolar, selector, update() } options for dat.GUI
• renderer — THREE.WebGLRenderer for rect.mat if (poster, atlas...)
• rendererCSS — THREE.CSS3DRenderer for rect.mat if (native, other...)
• reset — { margin, transform, imageRendering } reset class for html-to-image
• scene — THREE.Scene
• time — FPS boundary
  • sFence — THREE.Clock
  • sFenceDelta — elapsed time
  • sFenceFPS — target framerate (1/60)
  • sFenceFPS_slice — { boundary, gate, ramp, quota } meta from time/frame
  • slice — utility to report time loss/fuzz
• tool — common utilities, some available as fnVar
  • avg — accumulate average
  • chain — helper of nested elements
  • diffs — { rect, matrix, tween, flow, pseudo } test element attributes for variation
  • dpr — distance to group/origin
  • find — get rect by idx
  • march — get element depth
  • old — dispose of THREE.Group, reset data-idx, release listeners
  • pyr — ( width, height, thumb ) returns dimensions scaled to thumb
  • resort — convert Map to Array
  • source — ( el, url, attr ) sets source of object to fetch offscreen
• worker — Worker Stub to offload jobs.

Reference

precept

Match element rect.major via a hierarchy of semantics as atlas/other.

• allow — .mp-allow, div, main, section, article, nav, header, footer, aside, tbody, tr, th, td, li, ul, ol, menu, figure, address
• block — .mp-block, canvas[data-engine~='three.js'], head, style, script, link, meta, applet, param, map, br, wbr, template, track, source, iframe:not([src])
• native — .mp-native, a, canvas, iframe, frame, object, embed, svg, table, details, form, label, button, input, select, textarea, output, dialog, video, audio[controls]
• poster — .mp-poster, canvas, img, picture, figcaption, h1, h2, h3, h4, h5, h6, p, ul, ol, li, th, td, summary, caption, dt, dd, code, span, root
• native3d — model-viewer, a-scene, babylon, three-d-viewer, #stl_cont, #root, .sketchfab-embed-wrapper, StandardReality
• cors — iframe, object, .yt
• unset — .mp-offscreen
• manual — .mp-loader, .mp-poster, .mp-native
• tween — width, height, border, margin, padding, top, right, bottom, left, position, flex, display, visibility, opacity, mask, filter, mix-blend-mode, background-blend-mode, color, background, font, align-content, stretch, float, border-radius, box-shadow, animation, transition

Match element rect.minor to determine the functional output.

• self — generic
• child — generic (has siblings)
• native — coerced by media usage (form) and restrictions (CORS)
• poster — texture atlas for common elements, with various qualities
• loader — an object or file requires additional resources

Match loader adds objects from uri/mime that filter 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 valid mesh
• .SVG — THREE.SVGLoader with minimal divisions
• .GIF — frames from gifuct are pre-rendered and imageData is freed

grade

Attributes of hierarchy traversal.

• atlas — texture atlas used, unless major other
  • canvas — shader
  • cells — cells @1x
  • ctx — shader context
  • fontEmbedCSS —
  • instanced — InstancedMesh
  • keyTest — { x, y, alpha } coordinate for generic structural element (self, child)
  • size — shader dimensions
  • uv — [x.x]: {idx, span, area, map, xColumn} allocate cell range for mip scale
  • uvOffset — InstancedBufferAttribute
• batch — count invocations of program
• capture — sync pseudo
• depth — limit of initial add, for relative slot add/compare
• el — selector HTMLElement
• elsMax — selector descendant elements
• elsMin — elements with rects major
• group — selector THREE.Group
• inPolar — sync view threshold
• major — { atlas, other, queue, text } subsets
• rects — Map data-idx to element meta
• wait — true|Infinity when busy

rect

Attributes of element.

• bound — DomRect to differ in css and update in box
• css — { transform, degree, radian, scale, style: CSSStyleDeclaration, tween: {} }
• el — DOM element
• frame — last update from timer, prevents duplicate transforms
• idx — index of DOM element, referenced via data-idx or userData.idx
• inPolar — view threshold of element bound
• major — coarse label, may be atlas or other
• minor — fine label, derived from precept lists and manual classes
• uv — cell coordinates and scaling
  • idx — index @1x
  • idxMip — index @xx
  • mip — a bin of area range, if availabile
  • w — uv scale
  • wX — uv x %
  • wY — uv -y %
  • x — ctx x
  • y — ctx y
• ux — priority hints, used to reduce queue
  • i — in: explicit type
  • o — out + in: implicit state
  • u — update phase: frame differs matrix, pseudo, tween...
• z — z-Index depth