Replacing a renderLoop for render/play animation just once?

Questions
,
1

Hi, I’ve worked out how to make Yoichi Kobayashi’s glitch effect sit in a container and resize at 16:9 ratio:

What I’d next like to do is make the sequence play only once, and not on loop, but when I try and change or remove the renderLoop function I break things!

I’ll then make it play once as part of a GSAP timeline when the container element is hovered over.

Thanks in advance.

2

I wouldn’t mess with the renderLoop… that has to run all the time to see anything.

Instead, you should disable/modify the effect to stop it.

I did it in your codepen by changing where it updates the time, like this:

  render(time) {
    this.uniforms.time.value +=       time;
  if(this.uniforms.time.value>1)
    if(!this.stopped){
      this.stopped = true;
      this.obj.material = new THREE.MeshBasicMaterial({
        map:this.uniforms.texture.value
      })
    }
  }

When the time hits 1 second, replace the shader with a regular basicmaterial with the shaders original texture.

1 Like
3

That’s wonderful thanks!

4

@manthrax I’ve since discovered that the code here doesn’t work with a more recent build…

It’s r86 in the Codepen but my site needs to use r155 and above.
Tried adding r155 CDN and the animation doesn’t run.

‘TypeError: undefined is not a constructor (evaluating ‘new THREE.PlaneBufferGeometry(2, 2)’)’

I’m a bit confused because after some digging I learnt that Geometry needs to be replaced with custom BufferGeometry since r125… but maybe PlaneBufferGeometry is different to custom?

Any chance of a few pointers for updating the code in the pen to run with more recent versions?
Apologies - noob!

5

PlaneBufferGeometry has been renamed to PlaneGeometry. The same applies to all other geometry primitives that share the same name semantics.

2 Likes
6

Great, thanks.

Have changed those two instances and replaced the old version with r151, but still not working :confused:

Would seem to be a shader issue as the glitch effect does display.

7

You still have the previous reference to non module version of THREE in the project settings…
Then I had to add an "import * as THREE from “three” at the top of the script…

That got rid of the warnings, but for some reason the background image isn’t showing in the glitch effect? Not sure what’s going on there…

8

Weird eh. Perhaps it’s to do with me changing every single reference of

‘window.innerWidth, window.innerHeight’
in the original version (https://codepen.io/ykob/pen/GmEzoQ)

to ‘container.clientWidth, container.clientHeight’ ?

I did that in a blunt way, to make the responsive fitting in the container div work, but might have overdone the changes as a beginner.

9

Oof… it took me a minute to get to the bottom of this…
I moved it to glitch…

https://shard-foil-wolfsbane.glitch.me

It was using the old style of rendering to rendertarget…
Now the rendertarget has to get explicitly with setRenderTarget instead of passing it in to renderer.render…
I might have broke some other bits along the way… hth.

code is in glitchpic.js:

edit: glitch can be glitchy… if it hangs… or doesn’t load… just Ctrl-R &| wait for a sec…
you can “remix” it to get your own copy for edit…

10

Thanks hugely for your time doing that!

Tried clearing cache and following a few ‘won’t load’ steps on the glitch.com (ironic name!) help and no joy, just a blank screen on the editor page.

However, was able to copy the code I could access in the glitch sidebar.

Took me a minute to realise all I needed to do was change the window.innerWidth etc. back to container.clientWidth, and append to container rather than document.body but it’s sat nicely in the container now!

There’s just the disable loop to add back in now, hopefully your previous code slots in for that.

What did the Glitch platform give you, to be able to fix it? Not familiar with it.

Thanks again loads!

1 Like
11

Try opening the glitch in an incognito window in chrome?

I know it’s ironically glitchy but when it works, it’s like google docs for test code.

You can just drag assets into it to load them… (codepen has some kind of weird pay feature around that)

It auto refreshes as you’re editing… you can edit alongside someone else, so its good for working through something with someone… and It has export functionality to a zip or directly to github…

And it’s structure mirrors that of the code on disk… it’s not broken into weird section like CSS HTML JS

I really like it. A really good tool for just improvving some simple feature into a self contained little project.