in packages/miew/src/Miew.js [423:635]
Miew.prototype._initGfx = function () {
const gfx = {
width: this._container.clientWidth,
height: this._container.clientHeight,
};
const webGLOptions = { preserveDrawingBuffer: true, alpha: true, premultipliedAlpha: false };
if (settings.now.antialias) {
webGLOptions.antialias = true;
}
gfx.renderer2d = new CSS2DRenderer();
gfx.renderer = new THREE.WebGL1Renderer(webGLOptions);
gfx.renderer.shadowMap.enabled = settings.now.shadow.on;
gfx.renderer.shadowMap.autoUpdate = false;
gfx.renderer.shadowMap.type = THREE.PCFShadowMap;
capabilities.init(gfx.renderer);
// z-sprites and ambient occlusion possibility
if (!arezSpritesSupported(gfx.renderer.getContext())) {
settings.set('zSprites', false);
}
if (!isAOSupported(gfx.renderer.getContext())) {
settings.set('ao', false);
}
gfx.renderer.autoClear = false;
gfx.renderer.setPixelRatio(window.devicePixelRatio);
gfx.renderer.setSize(gfx.width, gfx.height);
gfx.renderer.setClearColor(settings.now.bg.color, Number(!settings.now.bg.transparent));
gfx.renderer.clearColor();
gfx.renderer2d.setSize(gfx.width, gfx.height);
gfx.camera = new THREE.PerspectiveCamera(
settings.now.camFov,
gfx.width / gfx.height,
settings.now.camNear,
settings.now.camFar,
);
gfx.camera.setMinimalFov(settings.now.camFov);
gfx.camera.position.z = settings.now.camDistance;
gfx.camera.updateProjectionMatrix();
gfx.camera.layers.set(gfxutils.LAYERS.DEFAULT);
gfx.camera.layers.enable(gfxutils.LAYERS.VOLUME);
gfx.camera.layers.enable(gfxutils.LAYERS.VOLUME_BFPLANE);
gfx.stereoCam = new THREE.StereoCamera();
gfx.scene = new THREE.Scene();
const color = chooseFogColor();
gfx.scene.fog = new THREE.Fog(color, settings.now.camNear, settings.now.camFar);
gfx.root = new gfxutils.RCGroup();
gfx.scene.add(gfx.root);
gfx.pivot = new gfxutils.RCGroup();
gfx.root.add(gfx.pivot);
gfx.selectionScene = new THREE.Scene();
gfx.selectionRoot = new THREE.Group();
gfx.selectionRoot.matrixAutoUpdate = false;
gfx.selectionScene.add(gfx.selectionRoot);
gfx.selectionPivot = new THREE.Group();
gfx.selectionPivot.matrixAutoUpdate = false;
gfx.selectionRoot.add(gfx.selectionPivot);
const light12 = new THREE.DirectionalLight(0xffffff, 0.45);
light12.position.set(0, 0.414, 1);
light12.layers.enable(gfxutils.LAYERS.TRANSPARENT);
light12.castShadow = true;
light12.shadow.bias = 0.09;
light12.shadow.radius = settings.now.shadow.radius;
light12.shadow.camera.layers.set(gfxutils.LAYERS.SHADOWMAP);
const pixelRatio = gfx.renderer.getPixelRatio();
const shadowMapSize = Math.max(gfx.width, gfx.height) * pixelRatio;
light12.shadow.mapSize.width = shadowMapSize;
light12.shadow.mapSize.height = shadowMapSize;
light12.target.position.set(0.0, 0.0, 0.0);
gfx.scene.add(light12);
gfx.scene.add(light12.target);
const light3 = new THREE.AmbientLight(0x666666);
light3.layers.enable(gfxutils.LAYERS.TRANSPARENT);
gfx.scene.add(light3);
// add axes
gfx.axes = new Axes(gfx.root, gfx.camera);
const deviceWidth = gfx.width * pixelRatio;
const deviceHeight = gfx.height * pixelRatio;
gfx.offscreenBuf = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, depthBuffer: true,
},
);
if (gfx.renderer.getContext().getExtension('WEBGL_depth_texture')) {
gfx.offscreenBuf.depthTexture = new THREE.DepthTexture();
gfx.offscreenBuf.depthTexture.type = THREE.UnsignedShortType;
}
gfx.offscreenBuf2 = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, depthBuffer: false,
},
);
gfx.offscreenBuf3 = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, depthBuffer: false,
},
);
gfx.offscreenBuf4 = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, depthBuffer: false,
},
);
gfx.volBFTex = gfx.offscreenBuf3;
gfx.volFFTex = gfx.offscreenBuf4;
gfx.volWFFTex = gfx.offscreenBuf;
// use float textures for volume rendering if possible
if (gfx.renderer.getContext().getExtension('OES_texture_float')) {
gfx.offscreenBuf5 = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType,
depthBuffer: false,
},
);
gfx.offscreenBuf6 = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType,
depthBuffer: false,
},
);
gfx.offscreenBuf7 = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBAFormat,
type: THREE.FloatType,
depthBuffer: true,
},
);
gfx.volBFTex = gfx.offscreenBuf5;
gfx.volFFTex = gfx.offscreenBuf6;
gfx.volWFFTex = gfx.offscreenBuf7;
} else {
this.logger.warn('Device doesn\'t support OES_texture_float extension');
}
gfx.stereoBufL = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, depthBuffer: false,
},
);
gfx.stereoBufR = new THREE.WebGLRenderTarget(
deviceWidth,
deviceHeight,
{
minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, depthBuffer: false,
},
);
this._gfx = gfx;
this._showCanvas();
this._embedWebXR(settings.now.stereo === 'WEBVR');
this._container.appendChild(gfx.renderer2d.getElement());
// add FPS counter
const stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '0';
stats.domElement.style.bottom = '0';
this._container.appendChild(stats.domElement);
this._fps = stats;
this._fps.show(settings.now.fps);
};