77 lines
2.5 KiB
JavaScript
77 lines
2.5 KiB
JavaScript
import * as Three from "../../libs/three.mjs";
|
|
import { Thread } from "../../utils/workerUtils.mjs";
|
|
|
|
class Renderer
|
|
{
|
|
static async init(threaded)
|
|
{
|
|
this._threaded = threaded === undefined ? false : threaded;
|
|
if(threaded)
|
|
{
|
|
this._renderer_thread = new Thread("../../workers/renderer.mjs", "view", true);
|
|
await this._renderer_thread.setup();
|
|
this._canvas = document.createElement("canvas");
|
|
const offcanvas = this._canvas.transferControlToOffscreen();
|
|
await this._renderer_thread.render.init(offcanvas, window.innerWidth, window.innerHeight);
|
|
}
|
|
else
|
|
{
|
|
this._renderer = new Three.WebGLRenderer();
|
|
this._renderer.setSize(window.innerWidth, window.innerHeight);
|
|
document.body.appendChild(this._renderer.domElement);
|
|
|
|
this._width = window.innerWidth;
|
|
this._height = window.innerHeight;
|
|
|
|
this._clock = new Three.Clock();
|
|
this._scene = new Three.Scene();
|
|
this._camera = new Three.OrthographicCamera(0, this._width, 0, this._height, 0.1, 1000);
|
|
this._camera.zoom = 0.98;
|
|
this._camera.updateProjectionMatrix();
|
|
|
|
Renderer.render();
|
|
}
|
|
}
|
|
static render()
|
|
{
|
|
if(this._threaded)
|
|
return;
|
|
|
|
this._rAF = requestAnimationFrame(Renderer.render.bind(Renderer));
|
|
|
|
/*this._camera.zoom = 1 + (0.5 + Math.sin(this._clock.getElapsedTime()) / 2) * 5;
|
|
this._camera.updateProjectionMatrix();*/
|
|
|
|
this._renderer.render(this._scene, this._camera);
|
|
}
|
|
static async initGrid(centers, positions, vertices) //Share the list of cell and the resolution in the model with the view
|
|
{
|
|
if(this._threaded)
|
|
{
|
|
//We can share the cells with the rendering thread because it will only be used as read-only to create the point data
|
|
await this._renderer_thread.view.lerpToView(position, settings);
|
|
}
|
|
else
|
|
{
|
|
/*const centerGeometry = new Three.BufferGeometry();
|
|
centerGeometry.setAttribute('position', new Three.Float32BufferAttribute( centers, 3));
|
|
*/
|
|
const geometry = new Three.BufferGeometry();
|
|
geometry.setIndex( new Three.Uint32BufferAttribute( vertices, 1 ) );
|
|
geometry.setAttribute('position', new Three.Float32BufferAttribute( positions, 3));
|
|
|
|
const material = new Three.MeshBasicMaterial( { color: 0xff0000, wireframe: true, } );
|
|
const mesh = new Three.Mesh( geometry, material );
|
|
this._scene.add( mesh );
|
|
|
|
const points = new Three.Points( geometry, new Three.PointsMaterial( { size: 3.0 } ) );
|
|
this._scene.add( points );
|
|
|
|
/*const center = new Three.Points( centerGeometry, new Three.PointsMaterial( { color: 0xffbb00, size: 2.0 } ) );
|
|
this._scene.add( center );*/
|
|
}
|
|
}
|
|
}
|
|
|
|
export default Renderer;
|