Updating to the latest version: gray screen no error

[bbdaii]

I’m trying to update this program (originally written with Three.js r88) to work with the latest version of Three.js.

Original code: https://codepen.io/shubniggurath/pen/OEeMOd
My code: https://codepen.io/jfvwblgr-the-sasster/pen/ByBzRex

I’ve made the following changes so far:

1. Switched to importing Three.js via ES6 modules.
2. Replaced var geometry = new THREE.PlaneBufferGeometry(2, 2); with var geometry = new THREE.PlaneGeometry(2, 2);.
3. Renamed the sample variable in the fragment shader to sampleCoord since sample is now a reserved keyword.

The program runs without any errors, but all I see is a gray screen. Did I miss anything when updating the code for the newer Three.js version?

[Arthur]

It works for me when I open the codepen console and wait a second or two. I’d have a look at what’s happening inside your window resize handler and make sure the same thing happens without having to resize the window.

[Lawrence3DPK]

There were a few problems / changes needed in updating the code to the latest three.js version but here it is working…

[jrlazz]

Hi @Lawrence3DPK …

In codepen it runs OK.

When I bring the code to my local server it only runs when I cut this code:

/*
let capturer = new CCapture({
verbose: true,
framerate: 60,
// motionBlurFrames: 4,
quality: 90,
format: “webm”,
workersPath: “js/”
});
*/
Is it easy to fix?

[Lawrence3DPK]

Hey @jrlazz Yes you can remove all references and relative variables to CCapture if you spend time to unwire it, it’s currently being imported as an external resource on the original pen…

Although I think this is just in place to create a recording of the canvas, it’s somewhat irrelevant / unrelated to the actual three.js running the demo

[jrlazz]

Hi @Lawrence3DPK …

I was not the creator of this post.

But previously, I had updated a Stemkoski shader, so I tried to see the possible conversion.
I liked the shader and tried to adapt it to the conversion I had performed, which also acted on a BoxGeometry.

Unfortunately this shader does not accept BoxGeometry or OrbitControls.

But it’s very beautiful!

Thank You very much for your help and I hope @bbdaii likes the results of your work!

[bbdaii]

Thank you so much for your detailed reply!
I followed your code and modified the RenderTarget.

// remove this 
// renderer.render(scene, camera, rtTexture, true);

renderer.render(scene, camera);
renderer.setRenderTarget(null)

I also removed the { type: THREE.FloatType, minFilter: THREE.NearestMipMapNearestFilter } from rtTexture, and it finally worked!
The scene is displaying correctly now.

I really appreciate your help and clear guidance😊

[bbdaii]

But now I’m facing another issue.
My screen has a grid-like mosaic pattern, and on lower-end Android devices, there are strange wrinkling effects.