to-do

[KurtPachinger]

enhancement

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

bug

• expose mpos to window on init:
• dom loop:
  • return group
  • grade.hardmax from viewport
  • siblings increment depth
  • NodeIterator: should wrap orphan #text nodes so interactive count is consistent, and to save time.
  • inPolar control: PREVIOUS|CONTAINS
  • text node wrap: test clauses for orphan_list and orphan_semantic
  • element nested in tags deep/ignored/empty (solved by manual class hints)
  • hide child for poster texture (if poster > poster is allowed... i.e. for background textures)
• CSS3D clones and order
  • transforms: css matrix (from parents) to struct.opts for box.opts
  • hooks -- details only opens programmatically (OrbitControls preventDefault?)
  • 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
  • ComputedStyle -- elements need module-specific css, parent element(s) for relational scale... so html-to-image
  • inherit modular: stub DOM tree, or poll ancestor styles Range
  • mask z-depth (threeml, 48702, HTMLMesh)
• gui arc: lost anchor
• Controls:
  • preventing clicks
  • no pinch/zoom on mobile
• update quirks:
  • depth: body, value <2
  • object.position.y += document.scrollTop
  • update: rect.obj<Mesh> is stale?
  • little skinny details div (mat=self)
  • object: no url leaves skinny div, blocks form
  • details[closed] > details (hidden, inPolar 2):
    • unset: transform origin wrong
    • unset: closes itself on mobile
  • inPolar==4: rect.add only fires on hard update
  • getComputedStyle: css background (0,0,0,0)
  • object embed: wrong position, double
  • stress test: settings (inPolar?) may expect rect.el, in race from dat.GUI
  • hard-update: abort concurrent dom()
  • update: verify still needs Promise and two distinct dataIdx of move/trim
  • data-idx: preserve uid next NodeIterator
  • atlas: reverse-loop not user-friendly
  • frame: values above ~60 have lower FPS
• materials (atlas)
  • atlas: use strip, not square
  • toSvg errors (try/catch for missing img.src, without fallback)
  • ref lookup (bound, css attribute): extend?
    • inPolar: use rect.bound
    • rect.css: arc group lost initial rotation... aside#transform lost initial rotation
    • 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:
    • 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.
• 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.

• 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.

• 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

• scope: unique css
• DOM inject: three, css3d, atlas, address
• CSS3D: z-index 99
• dat.GUI: default selector
• 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
  } 

• separate mp CSS from test page

best practice & accessibility

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

[KurtPachinger]

• reference maxEls to batch-process [idx-queue]
• 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