three memory

by sjpt

HTML

<p id='msg' style='position: fixed; bottom:0; color: white'>
data
</p>

CSS

body {
	background-color: #fff;
	margin: 0px;
	overflow: hidden;
}

JavaScript

import * as THREE from "https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.module.min.js"
// import * as THREE from "https://programbits.co.uk/three/three.module.js";

let mesh, renderer, camera, material, geom, numVerts = 15, rt = [];
let widthp = 1000
let heightp = widthp
const n = 2

var canvas = document.createElement('canvas');
var gl = canvas.getContext('webgl2', {});
renderer = new THREE.WebGLRenderer({context: gl, canvas});
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
camera = new THREE.PerspectiveCamera( 40, innerWidth / innerHeight, 0.1, 10);
camera.position.z = 5
geom = new THREE.SphereGeometry(2, 77, 93);
material = new THREE.MeshBasicMaterial()
mesh = new THREE.Mesh(geom, material);
mesh.position.set(0.5, 0.5, 0.5)

const options = {type: THREE.FloatType, format: THREE.RGBAFormat}
for (let i = 0; i < n; i++)
    rt[i] = new THREE.WebGLRenderTarget(widthp, heightp, options);
console.log('memory', widthp * heightp * 4 * 4 / 2**30, widthp * heightp * 4 * 4 * n / 2**30);

let f = 0;

animate();

function animate() {
	f++
    requestAnimationFrame(animate);
    let fn = f*7
    mesh.rotation.x = fn * 0.00029
    mesh.rotation.y = fn * 0.00037
    mesh.rotation.z = fn * 0.0017
    material.map = rt[f%n].texture
    renderer.setClearColor(new THREE.Color(0, 0.1, 0.6));
    renderer.setRenderTarget(null);
    //renderer.clear();
    renderer.render( mesh, camera );
    for (let i = 0; i < n; i++) {
	    material.map = rt[(i+1)%n].texture
        //material.map.needsUpdate = true
        renderer.setClearColor(new THREE.Color(1, i/n, i-i.n));
    	renderer.setRenderTarget(rt[i]);
        fn = f*n
        mesh.rotation.x = fn * 0.00029
        mesh.rotation.y = fn * 0.00037
        mesh.rotation.z = fn * 0.0017
        // mesh.matrixNeedsUpdate = true
        mesh.updateMatrix(); mesh.updateMatrixWorld()
        // msg.innerHTML = 'f' +...