Updating Text content about drei

[lojjic]

@n1ru4l Thanks -- I'm able to reproduce the new bug in your codesandbox, if I make the text length change on update.

This is definitely related to my attempted fix/workaround in protectwise/troika#69. Three.js changed some internals that broke how I update the geometries, and it looks like my attempted workaround caused this new disappearing text bug. I will fix it and publish a patch release ASAP.

[n1ru4l]

This might be related to https://github.com/protectwise/troika/blob/master/packages/troika-three-text/CHANGELOG.md#bug-fixes

[drcmda]

the way text works internally is a bit unfortunate. in threejs mutation and cloning is normal, but in reacts immutable world that causes problems. this component seems to have some trouble updating. anyway, i have refreshed dependencies and published a new patch.

[n1ru4l]

Okay I updated to 0.0.64 and now I have the issue that the other texts disappear when changing another text.

[drcmda]

could you try with plain troika and see if you figure out a solution?

this is the wrap that drei publishes

import React, { Children, createElement, forwardRef, useMemo, useRef, useLayoutEffect, useState } from 'react'
import { Text as TextMeshImpl } from 'troika-three-text'
import { extend } from 'react-three-fiber'
import mergeRefs from 'react-merge-refs'

extend({ TextMeshImpl })

export const Text = forwardRef(({ anchorX = 'center', anchorY = 'middle', children, ...props }, ref) => {
  const textRef = useRef()
  const [baseMtl, setBaseMtl] = useState()
  const [nodes, text] = useMemo(() => {
    let n: React.ReactNode[] = []
    let t = ''
    Children.forEach(children, (child) => {
      if (typeof child === 'string') t += child
      else if (child && typeof child === 'object' && child.props.attach === 'material') {
        // Instantiate the base material and grab a reference to it, but don't assign any
        // props, and assign it as the `material`, which Troika will replace behind the scenes.
        n.push(createElement(child.type, { ref: setBaseMtl, attach: 'material' }))
        // Once the base material has been assigned, grab the resulting upgraded material,
        // and apply the original material props to that.
        if (baseMtl) {
          n.push(<primitive object={textRef.current.material} {...child.props} attach={null} />)
        }
      } else n.push(child)
    })
    return [n, t]
  }, [children, baseMtl])
  useLayoutEffect(() => void textRef.current.sync())

  return (
    <textMeshImpl ref={mergeRefs([textRef, ref])} text={text} anchorX={anchorX} anchorY={anchorY} {...props}>
      {nodes}
    </textMeshImpl>
  )
})

As you see it's all a little unusual, troika clones the material initially so the original becomes stale. i guess it must be something similar when you update text.

you could copy this into a local file for testing. if you find something a PR would be very welcome!

[n1ru4l]

I also get the following warning on chrome when the text is updated for the first time:

WebGL: INVALID_OPERATION: drawElementsInstanced: no buffer is bound to enabled attribute
renderInstances @ three.module.js:16994
WebGLRenderer.renderBufferDirect @ three.module.js:25564
renderObject @ three.module.js:25993
renderObjects @ three.module.js:25965
WebGLRenderer.render @ three.module.js:25766
renderGl @ web.js:70
(anonymous) @ web.js:85
renderLoop @ web.js:82
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
requestAnimationFrame (async)
renderLoop @ web.js:89
WebGL: too many errors, no more errors will be reported to the console for this context.
requestAnimationFrame (async)
renderLoop @ web.js:89
three.module.js:16994 WebGL: too many errors, no more errors will be reported to the console for this context.

[n1ru4l]

Cannot reproduce it either -.- https://codesandbox.io/s/troika-3d-text-via-react-three-fiber-94sv3?file=/src/index.js

The text disappearing also only happens to the (text) element that has been added last to the scene

[n1ru4l]

Maybe @lojjic has an idea

[n1ru4l]

@lojjic awesome 😍 thanks for the fast response!

[lojjic]

OK, troika-three-text 0.30.2 should fix the disappearing text issue.

[n1ru4l]

@lojjic Yes it works as expected 🎉 After bumping the version here to 0.30.2 I think we can close this issue! @drcmda Could you push the v0.0.64 changes? Then I could create a pull request for bumping the version

[n1ru4l]

Drei now uses ^0.30.2 so this issue can be closed.

https://github.com/react-spring/drei/blob/a752de0405eec8fb3d79115c53c192ec8337a284/package.json#L58