minerender 2.1.0-alpha.141 → 2.1.0-alpha.142

package/dist/bundle.js

@@ -4852,7 +4852,7 @@ var MineRender = (() => {
     }
     throw new Error(`THREE.TextureUtils: Unknown texture type ${type}.`);
   }
-  var REVISION, MOUSE, TOUCH, CullFaceNone, CullFaceBack, CullFaceFront, PCFShadowMap, PCFSoftShadowMap, VSMShadowMap, FrontSide, BackSide, DoubleSide, NoBlending, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor, ConstantColorFactor, OneMinusConstantColorFactor, ConstantAlphaFactor, OneMinusConstantAlphaFactor, NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth, MultiplyOperation, MixOperation, AddOperation, NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping, AgXToneMapping, NeutralToneMapping, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, RepeatWrapping, ClampToEdgeWrapping, MirroredRepeatWrapping, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, UnsignedByteType, ByteType, ShortType, UnsignedShortType, IntType, UnsignedIntType, FloatType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedInt248Type, UnsignedInt5999Type, UnsignedInt101111Type, AlphaFormat, RGBFormat, RGBAFormat, DepthFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, RGB_S3TC_DXT1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGB_PVRTC_4BPPV1_Format, RGB_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_PVRTC_2BPPV1_Format, RGB_ETC1_Format, RGB_ETC2_Format, RGBA_ETC2_EAC_Format, R11_EAC_Format, SIGNED_R11_EAC_Format, RG11_EAC_Format, SIGNED_RG11_EAC_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_BPTC_Format, RGB_BPTC_SIGNED_Format, RGB_BPTC_UNSIGNED_Format, RED_RGTC1_Format, SIGNED_RED_RGTC1_Format, RED_GREEN_RGTC2_Format, SIGNED_RED_GREEN_RGTC2_Format, InterpolateDiscrete, InterpolateLinear, InterpolateSmooth, InterpolateBezier, ZeroCurvatureEnding, ZeroSlopeEnding, WrapAroundEnding, TrianglesDrawMode, TriangleStripDrawMode, TriangleFanDrawMode, BasicDepthPacking, TangentSpaceNormalMap, ObjectSpaceNormalMap, NoColorSpace, SRGBColorSpace, LinearSRGBColorSpace, LinearTransfer, SRGBTransfer, KeepStencilOp, AlwaysStencilFunc, NeverCompare, LessCompare, EqualCompare, LessEqualCompare, GreaterCompare, NotEqualCompare, GreaterEqualCompare, AlwaysCompare, StaticDrawUsage, GLSL3, WebGLCoordinateSystem, WebGPUCoordinateSystem, _cache, _setConsoleFunction, ReversedDepthFuncs, EventDispatcher, _lut, _seed, DEG2RAD, RAD2DEG, MathUtils, _Vector2, Vector2, Quaternion, _Vector3, Vector3, _vector$c, _quaternion$5, _Matrix3, Matrix3, _m3, LINEAR_REC709_TO_XYZ, XYZ_TO_LINEAR_REC709, ColorManagement, _canvas, ImageUtils, _sourceId, TextureSource, _textureId, _tempVec3, Texture, _Vector4, Vector4, RenderTarget, WebGLRenderTarget, DataArrayTexture, Data3DTexture, _Matrix4, Matrix4, _v1$7, _m1$2, _zero, _one, _x, _y, _z, _matrix$2, _quaternion$4, Euler, Layers, _object3DId, _v1$6, _q1, _m1$1, _target, _position$4, _scale$3, _quaternion$3, _xAxis, _yAxis, _zAxis, _addedEvent, _removedEvent, _childaddedEvent, _childremovedEvent, Object3D, Group, _moveEvent, WebXRController, _colorKeywords, _hslA, _hslB, Color, _color, Scene, _v0$2, _v1$5, _v2$4, _v3$2, _vab, _vac, _vbc, _vap, _vbp, _vcp, _v40, _v41, _v42, Triangle, Box3, _points, _vector$b, _box$4, _v0$1, _v1$4, _v2$3, _f0, _f1, _f2, _center, _extents, _triangleNormal, _testAxis, _vector$a, _vector2$1, _id$2, BufferAttribute, Uint16BufferAttribute, Uint32BufferAttribute, Float32BufferAttribute, _box$3, _v1$3, _v2$2, Sphere, _id$1, _m1, _obj, _offset, _box$2, _boxMorphTargets, _vector$9, BufferGeometry, InterleavedBuffer, _vector$8, InterleavedBufferAttribute, _vector1, _vector2, _normalMatrix, Plane, _materialId, Material, _vector$7, _segCenter, _segDir, _diff, Ray, MeshBasicMaterial, _inverseMatrix$3, _ray$3, _sphere$6, _sphereHitAt, _vA, _vB, _vC, _tempA, _morphA, _intersectionPoint, _intersectionPointWorld, Mesh, DataTexture, InstancedBufferAttribute, _instanceLocalMatrix, _instanceWorldMatrix, _instanceIntersects, _box3, _identity, _mesh$1, _sphere$4, InstancedMesh, _sphere$3, _defaultSpriteCenter, _vector$6, Frustum, LineBasicMaterial, _vStart, _vEnd, _inverseMatrix$1, _ray$1, _sphere$1, _intersectPointOnRay, _intersectPointOnSegment, Line, _start, _end, LineSegments, CompressedTexture, CubeTexture, CanvasTexture, DepthTexture, CubeDepthTexture, ExternalTexture, BoxGeometry, _v0, _v1$1, _normal, _triangle, EdgesGeometry, PlaneGeometry, UniformsUtils, default_vertex, default_fragment, ShaderMaterial, RawShaderMaterial, MeshStandardMaterial, MeshDepthMaterial, MeshDistanceMaterial, Interpolant, CubicInterpolant, LinearInterpolant, DiscreteInterpolant, BezierInterpolant, KeyframeTrack, BooleanKeyframeTrack, ColorKeyframeTrack, NumberKeyframeTrack, QuaternionLinearInterpolant, QuaternionKeyframeTrack, StringKeyframeTrack, VectorKeyframeTrack, LoadingManager, DefaultLoadingManager, Loader, _position$2, _quaternion$2, _scale$2, Camera, _v3$1, _minTarget, _maxTarget, PerspectiveCamera, OrthographicCamera, fov, aspect, CubeCamera, ArrayCamera, _RESERVED_CHARS_RE, _reservedRe, _wordChar, _wordCharOrDot, _directoryRe, _nodeRe, _objectRe, _propertyRe, _trackRe, _supportedObjectNames, Composite, PropertyBinding, _controlInterpolantsResultBuffer, Uniform, _matrix, Raycaster, Spherical, _Matrix2, Matrix2, _vector$4, Box2, GridHelper, AxesHelper, Controls;
+  var REVISION, MOUSE, TOUCH, CullFaceNone, CullFaceBack, CullFaceFront, PCFShadowMap, PCFSoftShadowMap, VSMShadowMap, FrontSide, BackSide, DoubleSide, NoBlending, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending, AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation, ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor, ConstantColorFactor, OneMinusConstantColorFactor, ConstantAlphaFactor, OneMinusConstantAlphaFactor, NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth, MultiplyOperation, MixOperation, AddOperation, NoToneMapping, LinearToneMapping, ReinhardToneMapping, CineonToneMapping, ACESFilmicToneMapping, CustomToneMapping, AgXToneMapping, NeutralToneMapping, UVMapping, CubeReflectionMapping, CubeRefractionMapping, EquirectangularReflectionMapping, EquirectangularRefractionMapping, CubeUVReflectionMapping, RepeatWrapping, ClampToEdgeWrapping, MirroredRepeatWrapping, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, LinearMipmapNearestFilter, LinearMipmapLinearFilter, UnsignedByteType, ByteType, ShortType, UnsignedShortType, IntType, UnsignedIntType, FloatType, HalfFloatType, UnsignedShort4444Type, UnsignedShort5551Type, UnsignedInt248Type, UnsignedInt5999Type, UnsignedInt101111Type, AlphaFormat, RGBFormat, RGBAFormat, DepthFormat, DepthStencilFormat, RedFormat, RedIntegerFormat, RGFormat, RGIntegerFormat, RGBAIntegerFormat, RGB_S3TC_DXT1_Format, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, RGB_PVRTC_4BPPV1_Format, RGB_PVRTC_2BPPV1_Format, RGBA_PVRTC_4BPPV1_Format, RGBA_PVRTC_2BPPV1_Format, RGB_ETC1_Format, RGB_ETC2_Format, RGBA_ETC2_EAC_Format, R11_EAC_Format, SIGNED_R11_EAC_Format, RG11_EAC_Format, SIGNED_RG11_EAC_Format, RGBA_ASTC_4x4_Format, RGBA_ASTC_5x4_Format, RGBA_ASTC_5x5_Format, RGBA_ASTC_6x5_Format, RGBA_ASTC_6x6_Format, RGBA_ASTC_8x5_Format, RGBA_ASTC_8x6_Format, RGBA_ASTC_8x8_Format, RGBA_ASTC_10x5_Format, RGBA_ASTC_10x6_Format, RGBA_ASTC_10x8_Format, RGBA_ASTC_10x10_Format, RGBA_ASTC_12x10_Format, RGBA_ASTC_12x12_Format, RGBA_BPTC_Format, RGB_BPTC_SIGNED_Format, RGB_BPTC_UNSIGNED_Format, RED_RGTC1_Format, SIGNED_RED_RGTC1_Format, RED_GREEN_RGTC2_Format, SIGNED_RED_GREEN_RGTC2_Format, InterpolateDiscrete, InterpolateLinear, InterpolateSmooth, InterpolateBezier, ZeroCurvatureEnding, ZeroSlopeEnding, WrapAroundEnding, TrianglesDrawMode, TriangleStripDrawMode, TriangleFanDrawMode, BasicDepthPacking, TangentSpaceNormalMap, ObjectSpaceNormalMap, NoColorSpace, SRGBColorSpace, LinearSRGBColorSpace, LinearTransfer, SRGBTransfer, KeepStencilOp, AlwaysStencilFunc, NeverCompare, LessCompare, EqualCompare, LessEqualCompare, GreaterCompare, NotEqualCompare, GreaterEqualCompare, AlwaysCompare, StaticDrawUsage, DynamicDrawUsage, GLSL3, WebGLCoordinateSystem, WebGPUCoordinateSystem, _cache, _setConsoleFunction, ReversedDepthFuncs, EventDispatcher, _lut, _seed, DEG2RAD, RAD2DEG, MathUtils, _Vector2, Vector2, Quaternion, _Vector3, Vector3, _vector$c, _quaternion$5, _Matrix3, Matrix3, _m3, LINEAR_REC709_TO_XYZ, XYZ_TO_LINEAR_REC709, ColorManagement, _canvas, ImageUtils, _sourceId, TextureSource, _textureId, _tempVec3, Texture, _Vector4, Vector4, RenderTarget, WebGLRenderTarget, DataArrayTexture, Data3DTexture, _Matrix4, Matrix4, _v1$7, _m1$2, _zero, _one, _x, _y, _z, _matrix$2, _quaternion$4, Euler, Layers, _object3DId, _v1$6, _q1, _m1$1, _target, _position$4, _scale$3, _quaternion$3, _xAxis, _yAxis, _zAxis, _addedEvent, _removedEvent, _childaddedEvent, _childremovedEvent, Object3D, Group, _moveEvent, WebXRController, _colorKeywords, _hslA, _hslB, Color, _color, Scene, _v0$2, _v1$5, _v2$4, _v3$2, _vab, _vac, _vbc, _vap, _vbp, _vcp, _v40, _v41, _v42, Triangle, Box3, _points, _vector$b, _box$4, _v0$1, _v1$4, _v2$3, _f0, _f1, _f2, _center, _extents, _triangleNormal, _testAxis, _vector$a, _vector2$1, _id$2, BufferAttribute, Uint16BufferAttribute, Uint32BufferAttribute, Float32BufferAttribute, _box$3, _v1$3, _v2$2, Sphere, _id$1, _m1, _obj, _offset, _box$2, _boxMorphTargets, _vector$9, BufferGeometry, InterleavedBuffer, _vector$8, InterleavedBufferAttribute, _vector1, _vector2, _normalMatrix, Plane, _materialId, Material, _vector$7, _segCenter, _segDir, _diff, Ray, MeshBasicMaterial, _inverseMatrix$3, _ray$3, _sphere$6, _sphereHitAt, _vA, _vB, _vC, _tempA, _morphA, _intersectionPoint, _intersectionPointWorld, Mesh, DataTexture, InstancedBufferAttribute, _instanceLocalMatrix, _instanceWorldMatrix, _instanceIntersects, _box3, _identity, _mesh$1, _sphere$4, InstancedMesh, _sphere$3, _defaultSpriteCenter, _vector$6, Frustum, LineBasicMaterial, _vStart, _vEnd, _inverseMatrix$1, _ray$1, _sphere$1, _intersectPointOnRay, _intersectPointOnSegment, Line, _start, _end, LineSegments, CompressedTexture, CubeTexture, CanvasTexture, DepthTexture, CubeDepthTexture, ExternalTexture, BoxGeometry, _v0, _v1$1, _normal, _triangle, EdgesGeometry, PlaneGeometry, UniformsUtils, default_vertex, default_fragment, ShaderMaterial, RawShaderMaterial, MeshStandardMaterial, MeshDepthMaterial, MeshDistanceMaterial, Interpolant, CubicInterpolant, LinearInterpolant, DiscreteInterpolant, BezierInterpolant, KeyframeTrack, BooleanKeyframeTrack, ColorKeyframeTrack, NumberKeyframeTrack, QuaternionLinearInterpolant, QuaternionKeyframeTrack, StringKeyframeTrack, VectorKeyframeTrack, LoadingManager, DefaultLoadingManager, Loader, _position$2, _quaternion$2, _scale$2, Camera, _v3$1, _minTarget, _maxTarget, PerspectiveCamera, OrthographicCamera, fov, aspect, CubeCamera, ArrayCamera, _RESERVED_CHARS_RE, _reservedRe, _wordChar, _wordCharOrDot, _directoryRe, _nodeRe, _objectRe, _propertyRe, _trackRe, _supportedObjectNames, Composite, PropertyBinding, _controlInterpolantsResultBuffer, Uniform, _matrix, Raycaster, Spherical, _Matrix2, Matrix2, _vector$4, Box2, GridHelper, AxesHelper, Controls;
   var init_three_core = __esm({
     "../../node_modules/three/build/three.core.js"() {
       init_dirname();
@@ -5018,6 +5018,7 @@ var MineRender = (() => {
       GreaterEqualCompare = 518;
       AlwaysCompare = 519;
       StaticDrawUsage = 35044;
+      DynamicDrawUsage = 35048;
       GLSL3 = "300 es";
       WebGLCoordinateSystem = 2e3;
       WebGPUCoordinateSystem = 2001;
@@ -104863,6 +104864,9 @@ gl_FragDepth=readDepth(vUv);
   var SectionWorker = _SectionWorker;
 
   // src/world/SectionMesh.ts
+  var BLOCK_SIZE = 16;
+  var QUAD_VERTICES = 4;
+  var QUAD_INDICES = 6;
   var templateCache = /* @__PURE__ */ new WeakMap();
   var WATER_TINT = new Color(4159204).toArray();
   function toInput(entries, maxAtlasSize, fluids, lighting) {
@@ -104899,8 +104903,8 @@ gl_FragDepth=readDepth(vUv);
         if (!data) {
           const indices = template.geometry.getIndex();
           const position = template.geometry.getAttribute("position");
-          const quads = indices.count / 6;
-          if (indices.count % 6 !== 0 || position.count !== quads * 4) {
+          const quads = indices.count / QUAD_INDICES;
+          if (indices.count % QUAD_INDICES !== 0 || position.count !== quads * QUAD_VERTICES) {
             throw new RangeError("Section template geometry must hold four vertices and six indices per quad");
           }
           data = {
@@ -104910,8 +104914,8 @@ gl_FragDepth=readDepth(vUv);
             uvs: new Float32Array(quads * 8),
             uvBounds: new Float32Array(quads * 16),
             colors: new Float32Array(quads * 12),
-            shade: new Float32Array(quads * 4),
-            indices: new Uint16Array(quads * 6),
+            shade: new Float32Array(quads * QUAD_VERTICES),
+            indices: new Uint16Array(quads * QUAD_INDICES),
             cullFaces: new Uint8Array(template.cullFaces),
             biomeTint: template.biomeTint ? new Uint8Array(template.biomeTint) : void 0,
             atlas: 0,
@@ -104923,7 +104927,7 @@ gl_FragDepth=readDepth(vUv);
           const bounds = template.geometry.getAttribute("uvBounds");
           const color3 = template.geometry.getAttribute("color");
           const shade = template.geometry.getAttribute("shade");
-          for (let vertex2 = 0; vertex2 < quads * 4; vertex2++) {
+          for (let vertex2 = 0; vertex2 < quads * QUAD_VERTICES; vertex2++) {
             data.positions.set([position.getX(vertex2), position.getY(vertex2), position.getZ(vertex2)], vertex2 * 3);
             data.normals.set([normal.getX(vertex2), normal.getY(vertex2), normal.getZ(vertex2)], vertex2 * 3);
             data.uvs.set([uv.getX(vertex2), uv.getY(vertex2)], vertex2 * 2);
@@ -104936,7 +104940,7 @@ gl_FragDepth=readDepth(vUv);
             data.colors.set([color3?.getX(vertex2) ?? 1, color3?.getY(vertex2) ?? 1, color3?.getZ(vertex2) ?? 1], vertex2 * 3);
             data.shade[vertex2] = shade?.getX(vertex2) ?? 1;
           }
-          for (let i5 = 0; i5 < data.indices.length; i5++) data.indices[i5] = indices.getX(i5) - 4 * Math.floor(i5 / 6);
+          for (let i5 = 0; i5 < data.indices.length; i5++) data.indices[i5] = indices.getX(i5) - QUAD_VERTICES * Math.floor(i5 / QUAD_INDICES);
           templateCache.set(template, data);
         }
         id = input.templateData.length;
@@ -104969,6 +104973,54 @@ gl_FragDepth=readDepth(vUv);
     }
     return { input, atlases: atlases2 };
   }
+  function sortTransparentQuads(mesh) {
+    const index = mesh.geometry.getIndex();
+    if (index.count <= QUAD_INDICES) return;
+    index.setUsage(DynamicDrawUsage);
+    const count = index.count / QUAD_INDICES;
+    let source, centers, depths, order;
+    const view = new Matrix4(), localCamera = new Vector3(), key = new Vector3(), previous = new Vector3();
+    let previousOrthographic;
+    mesh.onBeforeRender = (_renderer, _scene, camera) => {
+      localCamera.setFromMatrixPosition(camera.matrixWorld).applyMatrix4(view.copy(mesh.matrixWorld).invert());
+      const orthographic = !!camera.isOrthographicCamera;
+      if (orthographic) {
+        view.multiplyMatrices(camera.matrixWorldInverse, mesh.matrixWorld);
+        key.set(view.elements[2], view.elements[6], view.elements[10]);
+      } else {
+        key.copy(localCamera).divideScalar(BLOCK_SIZE).floor();
+      }
+      if (orthographic === previousOrthographic && key.equals(previous)) return;
+      previous.copy(key);
+      previousOrthographic = orthographic;
+      if (!centers) {
+        source = new Uint32Array(index.array);
+        centers = new Float32Array(count * 3);
+        depths = new Float32Array(count);
+        order = Uint32Array.from({ length: count }, (_4, quad) => quad);
+        const positions = mesh.geometry.getAttribute("position");
+        for (let quad = 0; quad < count; quad++) {
+          for (let axis = 0; axis < 3; axis++) {
+            let center = 0;
+            for (let corner = 0; corner < QUAD_VERTICES; corner++) center += positions.getComponent(quad * QUAD_VERTICES + corner, axis);
+            centers[quad * 3 + axis] = center / QUAD_VERTICES;
+          }
+        }
+      }
+      for (let quad = 0; quad < count; quad++) {
+        const x4 = centers[quad * 3], y5 = centers[quad * 3 + 1], z4 = centers[quad * 3 + 2];
+        depths[quad] = orthographic ? key.x * x4 + key.y * y5 + key.z * z4 : -((x4 - localCamera.x) ** 2 + (y5 - localCamera.y) ** 2 + (z4 - localCamera.z) ** 2);
+      }
+      order.sort((a4, b4) => depths[a4] - depths[b4] || a4 - b4);
+      if (!order.some((quad, offset) => index.array[offset * QUAD_INDICES] !== source[quad * QUAD_INDICES])) return;
+      for (let offset = 0; offset < count; offset++) {
+        for (let indexOffset = 0; indexOffset < QUAD_INDICES; indexOffset++) {
+          index.array[offset * QUAD_INDICES + indexOffset] = source[order[offset] * QUAD_INDICES + indexOffset];
+        }
+      }
+      index.needsUpdate = true;
+    };
+  }
   var SectionMesh = class _SectionMesh extends Group {
     constructor() {
       super(...arguments);
@@ -104978,7 +105030,11 @@ gl_FragDepth=readDepth(vUv);
     /** Returns the owning section cell for a triangle hit on this mesh's merged geometry. */
     getBlockIndex(hit) {
       if (hit.faceIndex === void 0 || hit.faceIndex === null) return void 0;
-      return this.blockIndices.get(hit.object)?.[Math.floor(hit.faceIndex / 2)];
+      const mesh = hit.object;
+      const owners = this.blockIndices.get(mesh);
+      if (!owners) return void 0;
+      const vertex2 = mesh.geometry.getIndex().getX(hit.faceIndex * 3);
+      return owners[Math.floor(vertex2 / QUAD_VERTICES)];
     }
     /** Builds section-local meshes from visible quads. `maxAtlasSize` limits each atlas dimension in pixels. */
     static build(entries, maxAtlasSize = 2048, fluids, lighting) {
@@ -105014,13 +105070,14 @@ gl_FragDepth=readDepth(vUv);
         const material = Materials.createShadedCanvasMaterial(canvas, transparent, false, true);
         material.side = FrontSide;
         if (page.layer === 2) {
+          material.depthWrite = !material.transparent;
           material.side = DoubleSide;
           material.forceSinglePass = true;
-          material.depthWrite = !material.transparent;
         }
         material.vertexColors = true;
         const texture = material.uniforms?.map?.value ?? material.map;
         const mesh = new Mesh(geometry, material);
+        if (transparent) sortTransparentQuads(mesh);
         section.add(mesh);
         section.blockIndices.set(mesh, page.blockIndices);
         const unsubscribe = [];