تکنیک‌های بهینه‌سازی رندرهای سه‌بعدی سنگین در وب: راهنمای جامع WebGL و WebGPU

import * as THREE from 'three';

const count = 10000;
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ roughness: 0.4, metalness: 0.1 });
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);

const matrix = new THREE.Matrix4();
const position = new THREE.Vector3();
const rotation = new THREE.Euler();
const quaternion = new THREE.Quaternion();
const scale = new THREE.Vector3();
const color = new THREE.Color();

for (let i = 0; i < count; i++) {
  position.set(
    (Math.random() - 0.5) * 100,
    (Math.random() - 0.5) * 100,
    (Math.random() - 0.5) * 100
  );
  rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);
  quaternion.setFromEuler(rotation);
  scale.setScalar(Math.random() * 0.5 + 0.5);

  matrix.compose(position, quaternion, scale);
  instancedMesh.setMatrixAt(i, matrix);

  color.setHSL(i / count, 0.7, 0.5);
  instancedMesh.setColorAt(i, color);
}

instancedMesh.instanceMatrix.needsUpdate = true;
if (instancedMesh.instanceColor) {
  instancedMesh.instanceColor.needsUpdate = true;
}

import * as THREE from 'three';

const lod = new THREE.LOD();
const material = new THREE.MeshStandardMaterial({ roughness: 0.5 });

const highDetailGeo = new THREE.IcosahedronGeometry(2, 6);
const highMesh = new THREE.Mesh(highDetailGeo, material);
lod.addLevel(highMesh, 0);

const mediumDetailGeo = new THREE.IcosahedronGeometry(2, 3);
const mediumMesh = new THREE.Mesh(mediumDetailGeo, material);
lod.addLevel(mediumMesh, 25);

const lowDetailGeo = new THREE.IcosahedronGeometry(2, 1);
const lowMesh = new THREE.Mesh(lowDetailGeo, material);
lod.addLevel(lowMesh, 60);

const billboardGeo = new THREE.PlaneGeometry(4, 4);
const billboardMat = new THREE.MeshBasicMaterial({ color: 0x888888 });
const billboardMesh = new THREE.Mesh(billboardGeo, billboardMat);
lod.addLevel(billboardMesh, 120);

import * as THREE from 'three';
import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance' });
renderer.setSize(window.innerWidth, window.innerHeight);

const ktx2Loader = new KTX2Loader();
ktx2Loader.setTranscoderPath('/basis/');
ktx2Loader.detectSupport(renderer);

const gltfLoader = new GLTFLoader();
gltfLoader.setKTX2Loader(ktx2Loader);

gltfLoader.load('/models/optimized_scene.glb', (gltf) => {
  gltf.scene.traverse((child) => {
    if (child.isMesh && child.material.map) {
      child.material.map.anisotropy = renderer.capabilities.getMaxAnisotropy();
      child.material.needsUpdate = true;
    }
  });
});

import * as THREE from 'three';

export class CustomCuller {
  constructor(camera) {
    this.camera = camera;
    this.frustum = new THREE.Frustum();
    this.projScreenMatrix = new THREE.Matrix4();
  }

  update() {
    this.projScreenMatrix.multiplyMatrices(
      this.camera.projectionMatrix,
      this.camera.matrixWorldInverse
    );
    this.frustum.setFromProjectionMatrix(this.projScreenMatrix);
  }

  cull(rootNode) {
    this.update();
    rootNode.traverse((object) => {
      if (object.isMesh) {
        if (!object.geometry.boundingSphere) {
          object.geometry.computeBoundingSphere();
        }
        const sphere = object.geometry.boundingSphere.clone();
        sphere.applyMatrix4(object.matrixWorld);
        object.visible = this.frustum.intersectsSphere(sphere);
      }
    });
  }
}

import * as THREE from 'three';

self.onmessage = function (event) {
  if (event.data.type === 'init') {
    const canvas = event.data.canvas;
    const width = event.data.width;
    const height = event.data.height;

    const renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: false });
    renderer.setSize(width, height, false);

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 5;

    const geometry = new THREE.BoxGeometry(1, 1, 1);
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff88, wireframe: true });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    function render() {
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
      requestAnimationFrame(render);
    }
    requestAnimationFrame(render);
  }
};

export async function initWebGPURenderer(canvas) {
  if (!navigator.gpu) {
    throw new Error('WebGPU not supported on this browser.');
  }

  const adapter = await navigator.gpu.requestAdapter({ powerPreference: 'high-performance' });
  if (!adapter) {
    throw new Error('No suitable GPU adapter found.');
  }

  const device = await adapter.requestDevice();
  const context = canvas.getContext('webgpu');
  const presentationFormat = navigator.gpu.getPreferredCanvasFormat();

  context.configure({
    device: device,
    format: presentationFormat,
    alphaMode: 'premultiplied'
  });

  const shaderModule = device.createShaderModule({
    code: `
      @vertex
      fn vs_main(@builtin(vertex_index) in_vertex_index: u32) -> @builtin(position) vec4<f32> {
        var pos = array<vec2<f32>, 3>(
          vec2<f32>(0.0, 0.5),
          vec2<f32>(-0.5, -0.5),
          vec2<f32>(0.5, -0.5)
        );
        return vec4<f32>(pos[in_vertex_index], 0.0, 1.0);
      }

      @fragment
      fn fs_main() -> @location(0) vec4<f32> {
        return vec4<f32>(0.2, 0.8, 0.4, 1.0);
      }
    `
  });

  const pipeline = device.createRenderPipeline({
    layout: 'auto',
    vertex: {
      module: shaderModule,
      entryPoint: 'vs_main'
    },
    fragment: {
      module: shaderModule,
      entryPoint: 'fs_main',
      targets: [{ format: presentationFormat }]
    },
    primitive: {
      topology: 'triangle-list'
    }
  });

  function frame() {
    const commandEncoder = device.createCommandEncoder();
    const textureView = context.getCurrentTexture().createView();
    const renderPassDescriptor = {
      colorAttachments: [{
        view: textureView,
        clearValue: { r: 0.05, g: 0.05, b: 0.05, a: 1.0 },
        loadOp: 'clear',
        storeOp: 'store'
      }]
    };

    const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
    passEncoder.setPipeline(pipeline);
    passEncoder.draw(3, 1, 0, 0);
    passEncoder.end();

    device.queue.submit([commandEncoder.finish()]);
    requestAnimationFrame(frame);
  }
  requestAnimationFrame(frame);
}