| // for regular meshes | |
| import {ShaderMaterial, Vector2, Color, Texture} from "three"; | |
| export class LodFadeMaterial extends ShaderMaterial { | |
| constructor(map: Texture, ditherOffset: number, ditherThreshold: number, invertMask: boolean, resolution: Vector2, color: Color) { | |
| super({ | |
| uniforms: { | |
| map: {value: map}, | |
| resolution: {value: resolution}, | |
| ditherOffset: {value: ditherOffset}, |
| import { Canvas } from '@react-three/fiber'; | |
| import { useActions, useQuery, useTraitEffect, useWorld } from 'koota/react'; | |
| import { useLayoutEffect, useRef, useState } from 'react'; | |
| import { SceneInfo, Transforms } from '../ecs/base-traits'; | |
| import { worldActions } from '../ecs'; | |
| import { SceneContainer } from './scene-container'; | |
| import { GameUiContainer } from './game-ui/game-ui-container'; | |
| export default function App() { | |
| const world = useWorld(); |
| import {MeshoptSimplifier, MeshoptEncoder} from "meshoptimizer"; | |
| import {BufferAttribute, BufferGeometry, Mesh} from "three"; | |
| await MeshoptSimplifier.ready; // await wasm promise | |
| await MeshoptEncoder.ready; // await wasm promise | |
| MeshoptSimplifier.useExperimentalFeatures = true; | |
| export function createLOD_Levels(originalMesh: Mesh, simplificationLevel: number[]) { |
| import { | |
| Group, | |
| AmbientLight, | |
| CubeCamera, | |
| HalfFloatType, | |
| Mesh, | |
| MeshStandardMaterial, | |
| Texture, | |
| Vector3, | |
| WebGLCubeRenderTarget, |
| // the returned function will return true at regular intervals p% of the time it gets called. | |
| // use instead of (i % N === 0) checks, whenever other frequencies other than (1 / someInteger) are needed. | |
| // as accumulated values carry over, we can change the targetd frequency at runtime. | |
| const createFrequencyCheck = () => { | |
| let sum = 0 | |
| return (p: number) => { | |
| sum += p | |
| if (sum >= 1) { | |
| sum = sum - Math.trunc(sum) | |
| return true |
As a user I never have the full graph in my head. Usually I only picture "islands of order" in my head that relate to the current part/feature of the game I'm working on. With a gowing list of system the risk that
| const getPointerPosition = (() => { | |
| const testEvent = new PointerEvent("pointermove"); | |
| // check for the existence of getCoalescedEvents and getPredictedEvents (Safari currently has both in tech preview) | |
| const _pos = {x: 0, y: 0}; | |
| if (testEvent.getCoalescedEvents && testEvent.getCoalescedEvents) { | |
| return (evt: PointerEvent, pos: {x: number, y: number} = _pos) => { | |
| evt.stopPropagation(); | |
| // using the first prediction (the latest seems too chaotic when the cursor comes to a halt) | |
| const latestPrediction = evt.getPredictedEvents().shift(); |
| /** | |
| * A class to store key value pairs while keeping | |
| * both available in contiguous arrays. Basically | |
| * always prefer a Map over this, unless you regularly | |
| * need to create arrays from the values or keys | |
| * (i.e. inside an update loop). Is strict about | |
| * duplicate or non-existing keys. | |
| * | |
| * - Does not keep insertion order! | |
| * - Throws error when using .set() with existing keys (use .mutate() instead) |
| class WeakCollection<T extends object> { | |
| #registry = new FinalizationRegistry((heldValue: WeakRef<T>) => { | |
| this.delete(heldValue); | |
| }); | |
| #refs: WeakRef<T>[] = []; | |
| #values: T[] = []; | |
| #clean() { | |
| let index = 0; |
| // Adapted from https://github.com/donmccurdy/three.js/blob/feat/extract-root-motion/examples/jsm/utils/SkeletonUtils.js#L606 | |
| import {AnimationClip, Bone, BufferAttribute, Object3D, Quaternion, Vector3, Vector4} from "three"; | |
| function getRootBone(rootNode: Object3D) { | |
| const rootBones: Bone[] = []; | |
| rootNode.traverse(function (object) { | |
| // @ts-ignore |