Hi. I’ve created this simple “mouse flowmap”. It uses the same technique as the EffectComposer: Creating two RenderTargets and alternately using them as read- and write buffers. The texture from the current write buffer in combination with a simple ShaderMaterial is then applied to a screen-filling mesh. This works fine on all platforms, except for iOS, where it looks very pixelated (like when using the NearestFilter).
Both RenderTargets have a size of 128, but since I’m using the LinearFilter the resulting texture still looks “smooth” when scaled to fit the user’s screen. My guess is that the LinearFilter is somehow not working on iOS devices. I’m relatively new to THREE.js thus making it possible that I’m missing something very obvious. Of course I could just set the size of the RenderTargets to fit the screen directly, but that seems like a “cheap fix” and an unnecessary waste of resources.
This is the part of my code used to create the RenderTargets:
import { FloatType, LinearFilter, RGBAFormat, WebGLRenderTarget } from "three";
export default class FramebufferObject{
readonly target: WebGLRenderTarget;
constructor(width: number, height: number){
this.target = new WebGLRenderTarget(width, height, {
type: FloatType,
format: RGBAFormat,
depthBuffer: false,
stencilBuffer: false,
minFilter: LinearFilter,
magFilter: LinearFilter
});
};
/**
* Adjusts the size
* @param width
* @param height
*/
SetSize(width: number, height: number){
this.target.setSize(width, height);
};
};
I’m happy to provide more information if needed.
Thanks in advance for any insight.