to-do

[KurtPachinger]

enhancement

• [x] update wiki documentation
• [x] depth:
  • [x] honor z-index
  • [x] allow arc/radial
  • [x] arc smooth: displace map, or shader positions, or SkinnedMesh, IK chain
  • [x] ux: highlight, and arc front to uv or origin
• [x] types:
  • [x] store node in userData
  • [x] allow: box, html-to-image, CSS3DRenderer
  • [x] manual class hints
  • [x] mixed-content: test internal resource
  • [x] html-to-image
    • [x] InstancedMesh with texture atlas
    • [x] limit dimensions (track, crash) -- 1>n<2048,3840,4096
    • [ ] clone node into dummy ShadowDom div, to avoid un-set class hierarchy?
  • [x] url input
  • [ ] update resets size from non-unset (mp-offscreen)
  • [ ] load url: use FileLoader (needs address populated once? )
  • [x] class .loader: expose to THREE (i.e. SVGLoader, AudioLoader, arbitrary xml) enable-vr
  • [x] FontLoader: match h2, p, svg text?
  • [x] share generic path/hole pattern (SVGLoader, FontLoader, OpenCV)
  • [ ] class tools: gan-3d, gan-train-walk, gan-txt2pic
  • [x] progressive poster: convert text to path (cv.kmeans, cv.inRange, cv.findContours). For example, h2.mp-loader would output like SVGLoader. (gzip, docker)
  • [x] hierarchy holes
  • [x] limit toPng size
  • [x] comment callback: stub for xml, php
• [x] update:
  • [x] prefer viewport
  • [x] live plot: IntersectionObserver
  • [x] dom: soft update
  • [x] shader
  • [x] other/native/loader
  • [x] scrollY
  • [x] unset
  • [x] use of transforms(paint): atlas[0,½]
  • [x] callback to repeat queue (animate)
    • [x] clearTimeout: duplicate loop in GUI and ux
    • [x] fast frame, inPolar==4: parent css transform matrix not ready
    • [x] loop busy: frame 0 adds lazy-loaded mesh (loader, fitting)
    • [x] reduce: compare bound and css, (with ux i/o)
  • [x] update(trim): query visible (Observer)
  • [x] MutationObserver one MutationObserver instead of multiple IntersectionObserver
  • [ ] class mp-update force element to re-render once (similar to mp-native)
  • [ ] grade: keyed refs, dispose, weakmap
  • [ ] MouseEvent: ?
• [x] HTML generator: populate from seed (section,article,h2,img,ul,embed)
• [x] web3 hooks: node atlas matrix [a1,b2]::[a2,b1] use GAN for... spatial cross?
• [ ] demos: game map (FPS, racetrack), advanced CSS chains, GUI menu, CMS for test suites
• [ ] scale factor
• [x] performance:
  • [x] verify renderer.info releases, variable scope...
  • [x] DevTools: update may retain refs to DOM Nodes
  • [x] frustum cull
  • [ ] destructure const { var: vars } = mpos;
  • [ ] selector body is much slower than body>main
  • [ ] OffscreenCanvas / copyTextureToTexture

bug

• [x] expose mpos to window on init:
• [x] dom loop:
  • [x] return group
  • [x] grade.hardmax from viewport
  • [x] siblings increment depth
  • [x] NodeIterator: should wrap orphan #text nodes so interactive count is consistent, and to save time.
  • [x] inPolar control: PREVIOUS|CONTAINS
  • [x] text node wrap: test clauses for orphan_list and orphan_semantic
  • [x] element nested in tags deep/ignored/empty (solved by manual class hints)
  • [x] hide child for poster texture (if poster > poster is allowed... i.e. for background textures)
• [x] CSS3D clones and order
  • [x] transforms: css matrix (from parents) to struct.opts for box.opts
  • [x] hooks -- details only opens programmatically (OrbitControls preventDefault?)
  • [x] performance: on zoom, CSS3D degrades from vector to raster. Then emoji becomes garbled character (DOM clone AND original). Even in another tab... but after away, memory resets. MAX_TEXTURE_SIZE
  • [x] ComputedStyle -- elements need module-specific css, parent element(s) for relational scale... so html-to-image
  • [x] inherit modular: stub DOM tree, or poll ancestor styles Range
  • [x] mask z-depth (threeml, 48702, HTMLMesh)
• [x] gui arc: lost anchor
• [x] Controls:
  • [x] preventing clicks
  • [x] no pinch/zoom on mobile
• [x] update quirks:
  • [x] depth: body, value <2
  • [x] object.position.y += document.scrollTop
  • [x] update: rect.obj<Mesh> is stale?
  • [x] little skinny details div (mat=self)
  • [x] object: no url leaves skinny div, blocks form
  • [x] details[closed] > details (hidden, inPolar 2):
    • [x] unset: transform origin wrong
    • [x] unset: closes itself on mobile
  • [x] inPolar==4: rect.add only fires on hard update
  • [x] getComputedStyle: css background (0,0,0,0)
  • [x] object embed: wrong position, double
  • [x] stress test: settings (inPolar?) may expect rect.el, in race from dat.GUI
  • [x] hard-update: abort concurrent dom()
  • [x] update: verify still needs Promise and two distinct dataIdx of move/trim
  • [x] data-idx: preserve uid next NodeIterator
  • [x] atlas: reverse-loop not user-friendly
  • [ ] frame: values above ~60 have lower FPS
• [x] materials (atlas)
  • [x] atlas: use strip, not square
  • [x] toSvg errors (try/catch for missing img.src, without fallback)
  • [x] ref lookup (bound, css attribute): extend?
    • [x] inPolar: use rect.bound
    • [x] rect.css: arc group lost initial rotation... aside#transform lost initial rotation
    • [x] onscroll reflow: update render doesn't queue box, without frame
    • [ ] edge cases: stretch/skew OO, faux-bold
    • [ ] defer css > getComputedStyle() for rect.ux.o<1
    • [ ] queue (from Observer per inPolar) has checks (backgroundColor,atlas) which could have better default support
    • [ ] atlas (on mobile): OffscreenCanvas.clearRect() breaks alpha on frame, after mpos.dom() is recalled
  • [ ] overflow:
  • [x] details[closed] children do not update position
  • [ ] checkVisibility breaks on iOS
  • [ ] scroll is visible
• [ ] loader: if page is cached and refreshed, initial update loop ( OpenCV, SVGLoader ) becomes very slow. Also other should use Promise.
• [x] improve raycast

[KurtPachinger]

crash, display and memory

THREE.Color: Unknown color transparent THREE.Color: Alpha component of rgba(128, 128, 128, 0.125) will be ignored. Too many active WebGL contexts. Oldest context will be lost. THREE.WebGLRenderer: Context Lost. THREE.WebGLRenderer: Context Restored.

• [x] After a reboot, in a new browser window, I see a reproducable bug. The entire browser flashes black, and then the canvas background is black. It occurs when I update CodeSandbox (i.e. CTRL+X to move a console.log(), or backspace). When I set the black canvas opacity to 0.9999999 (or lower), OrbitControls does not respond.

• [x] ~~Also, there is a mesh rectangle of widely varying dimensions added to my scene. It is >300% the size of my viewport, and very wide or tall. It is always at different y angles. I am using CSS3DRenderer.~~ arc

[KurtPachinger]

content type bias

mixed-content	CSS3D .mp-native	toSvg .mp-poster	FileLoader .mp-loader
*	100% events cors	<512	#comment
.	htm pdf	jpg txt	xml
model-viewer a-scene babylon three-d-viewer #stl_cont #root .sketchfab-embed-wrapper StandardReality	✓
iframe, object, embed	✓
svg	✓	SVGLoader text
canvas	✓
audio	controls	AudioLoader
Lena.mp-loader	OpenCV

[KurtPachinger]

export module

• [x] scope: unique css
• [x] DOM inject: three, css3d, atlas, address
• [x] CSS3D: z-index 99
• [x] dat.GUI: default selector
• [x] pass scene to init(?) , as opposed to Group.selector > userData > grade

  init ( renderer, scene, camera ) {
  if ( renderer && scene && camera ) {
  // DON'T: render, resize, update camera, helpers
  // DO:
  // renderer.domElement
  // - append CSS3D
  // - classList.add `mp-block`
  // reference
  // - add to scene, dispose
  // - update(grade), events
  } 

• [x] separate mp CSS from test page

best practice & accessibility

• [x] obscure resources "below the fold": inertia, FOV, perspective, distance
• [x] screen-read reference node innerHTML
• [x] form clone data authenticity

[KurtPachinger]

• [x] reference maxEls to batch-process [idx-queue]
• [x] make promise atlas > transform external to dom

HARD-REFRESH: MutationObserver

Rebuild all nodes, excluding eligible/active forms or videos.

• while ( el[data-idx] !== grade.rects[data-idx] )
  • attributes { inPolar, xyz, width, height }
  • update or add: rect.atlas || atlas++

SOFT-REFRESH: IntersectionObserver

Focus update within viewport, and minimize reflow (zero-height, lazy-loaded, triggered...).

• update or add: from grade.rects[data-idx]
  • { inPolar && mat } ==> ( rect.atlas || atlas++ )

use cases: scroll, resize, live DOM, accordion/gallery

[KurtPachinger]

frame shortlist

An update should:

• reduce the queue: visibility
• cache refs on frame: bound, css
  • refs used in: box, css, raycast, event
• prioritize ux: native, active

done	queue priority	attribute	usage
...	1	:pseudo	after, before, hover, focus
✓	3	animation
✓	background	color
border	color, width
2	opacity
1	overflow	scroll
✓	position	fixed
✓	3	transform	matrix, origin, rotate, scale
✓	3	transition
2	visibility
✓	z-index	integer

*outliers: deep tree, filetype.gif, canvas, loader, hidden iframe