Miew.prototype._initGfx = function()

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);
};