├── .editorconfig ├── .eslintrc.js ├── .gitattributes ├── .github └── workflows │ ├── ci.yml │ └── site.yml ├── .gitignore ├── .gitmodules ├── .prettierignore ├── .prettierrc.js ├── LICENSE ├── README.md ├── common ├── autoinstallers │ └── rush-prettier │ │ ├── .npmrc │ │ ├── package.json │ │ └── pnpm-lock.yaml ├── config │ └── rush │ │ ├── .npmrc │ │ ├── .npmrc-publish │ │ ├── .pnpmfile.cjs │ │ ├── artifactory.json │ │ ├── build-cache.json │ │ ├── command-line.json │ │ ├── common-versions.json │ │ ├── experiments.json │ │ ├── pnpm-config.json │ │ ├── pnpm-lock.yaml │ │ ├── repo-state.json │ │ ├── rush-plugins.json │ │ └── version-policies.json ├── git-hooks │ └── commit-msg.sample └── scripts │ ├── install-run-rush-pnpm.js │ ├── install-run-rush.js │ ├── install-run-rushx.js │ └── install-run.js ├── examples ├── config │ └── rush-project.json ├── package.json ├── rollup.config.mjs ├── src │ ├── computeboids │ │ ├── index.html │ │ └── main.ts │ ├── cube │ │ ├── index.html │ │ └── main.ts │ ├── imageblur │ │ ├── dog_01.png │ │ ├── dom.html │ │ ├── index.html │ │ └── main.ts │ ├── index.html │ ├── instancecube │ │ ├── index.html │ │ └── main.ts │ ├── rendertexture │ │ ├── index.html │ │ └── main.ts │ ├── sea │ │ ├── index.html │ │ └── main.ts │ ├── stenciloutline │ │ ├── index.html │ │ └── main.ts │ ├── texturedcube │ │ ├── index.html │ │ ├── layer.jpg │ │ ├── main.ts │ │ └── sample-video.mp4 │ └── triangle │ │ ├── index.html │ │ └── main.ts └── tsconfig.json ├── libs ├── backend-webgl │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ │ └── rush-project.json │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── basetexture_webgl.ts │ │ ├── bindgroup_webgl.ts │ │ ├── buffer_webgl.ts │ │ ├── capabilities_webgl.ts │ │ ├── constants_webgl.ts │ │ ├── device_webgl.ts │ │ ├── framebuffer_webgl.ts │ │ ├── gpu_timer.ts │ │ ├── gpuobject_webgl.ts │ │ ├── gpuprogram_webgl.ts │ │ ├── index.ts │ │ ├── indexbuffer_webgl.ts │ │ ├── renderstate_webgl.ts │ │ ├── sampler_cache.ts │ │ ├── sampler_webgl.ts │ │ ├── structuredbuffer_webgl.ts │ │ ├── texture2d_webgl.ts │ │ ├── texture2darray_webgl.ts │ │ ├── texture3d_webgl.ts │ │ ├── texturecube_webgl.ts │ │ ├── texturevideo_webgl.ts │ │ ├── utils.ts │ │ ├── vertexlayout_webgl.ts │ │ └── webgl_enum.ts │ └── tsconfig.json ├── backend-webgpu │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ │ └── rush-project.json │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── basetexture_webgpu.ts │ │ ├── bindgroup_cache.ts │ │ ├── bindgroup_webgpu.ts │ │ ├── buffer_webgpu.ts │ │ ├── capabilities_webgpu.ts │ │ ├── commandqueue.ts │ │ ├── computepass_webgpu.ts │ │ ├── constants_webgpu.ts │ │ ├── device.ts │ │ ├── framebuffer_webgpu.ts │ │ ├── gpuobject_webgpu.ts │ │ ├── gpuprogram_webgpu.ts │ │ ├── index.ts │ │ ├── indexbuffer_webgpu.ts │ │ ├── pipeline_cache.ts │ │ ├── renderpass_webgpu.ts │ │ ├── renderstates_webgpu.ts │ │ ├── sampler_cache.ts │ │ ├── sampler_webgpu.ts │ │ ├── structuredbuffer_webgpu.ts │ │ ├── texture2d_webgpu.ts │ │ ├── texture2darray_webgpu.ts │ │ ├── texture3d_webgpu.ts │ │ ├── texturecube_webgpu.ts │ │ ├── texturevideo_webgpu.ts │ │ ├── uploadringbuffer.ts │ │ ├── utils_webgpu.ts │ │ ├── vertexlayout_cache.ts │ │ └── vertexlayout_webgpu.ts │ └── tsconfig.json ├── base │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ │ └── rush-project.json │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── event.ts │ │ ├── index.ts │ │ ├── linkedlist.ts │ │ ├── math │ │ │ ├── aabb.ts │ │ │ ├── fft │ │ │ │ ├── complex.ts │ │ │ │ ├── fft.ts │ │ │ │ ├── fft2.ts │ │ │ │ └── index.ts │ │ │ ├── frustum.ts │ │ │ ├── index.ts │ │ │ ├── interpolator.ts │ │ │ ├── misc.ts │ │ │ ├── noise.ts │ │ │ ├── plane.ts │ │ │ ├── ray.ts │ │ │ ├── sh.ts │ │ │ ├── tangent.ts │ │ │ ├── types.ts │ │ │ └── vector.ts │ │ ├── orderedstringset.ts │ │ ├── prng.ts │ │ ├── rectspacker.ts │ │ └── utils.ts │ └── tsconfig.json ├── device │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ │ └── rush-project.json │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── base_types.ts │ │ ├── builder │ │ │ ├── ast.ts │ │ │ ├── base.ts │ │ │ ├── builtinfunc.ts │ │ │ ├── constructors.ts │ │ │ ├── errors.ts │ │ │ ├── index.ts │ │ │ ├── programbuilder.ts │ │ │ ├── reflection.ts │ │ │ └── types.ts │ │ ├── device.ts │ │ ├── gpuobject.ts │ │ ├── helpers │ │ │ ├── drawtext.ts │ │ │ ├── font.ts │ │ │ ├── glyphmanager.ts │ │ │ ├── index.ts │ │ │ └── textureatlas.ts │ │ ├── index.ts │ │ ├── pool.ts │ │ ├── render_states.ts │ │ ├── timer.ts │ │ ├── uniformdata.ts │ │ └── vertexdata.ts │ └── tsconfig.json ├── imgui │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ │ └── rush-project.json │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── bind-imgui.d.ts │ │ ├── bind-imgui.js │ │ ├── emscripten.d.ts │ │ ├── font.ts │ │ ├── imconfig.ts │ │ ├── imgui.ts │ │ ├── imgui_impl.ts │ │ ├── index.ts │ │ ├── input.ts │ │ └── renderer.ts │ └── tsconfig.json ├── inspector │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ │ ├── index.ts │ │ ├── inspector.ts │ │ ├── misc.ts │ │ └── textureview.ts │ ├── textureview.ts │ └── tsconfig.json └── scene │ ├── CHANGELOG.json │ ├── CHANGELOG.md │ ├── README.md │ ├── config │ └── rush-project.json │ ├── package.json │ ├── rollup.config.mjs │ ├── src │ ├── animation │ │ ├── animation.ts │ │ ├── animationset.ts │ │ ├── animationtrack.ts │ │ ├── eulerrotationtrack.ts │ │ ├── index.ts │ │ ├── morphtarget.ts │ │ ├── morphtrack.ts │ │ ├── rotationtrack.ts │ │ ├── scaletrack.ts │ │ ├── skeleton.ts │ │ └── translationtrack.ts │ ├── app.ts │ ├── asset │ │ ├── assetmanager.ts │ │ ├── builtin.ts │ │ ├── index.ts │ │ ├── loaders │ │ │ ├── dds │ │ │ │ ├── dds.ts │ │ │ │ └── dds_loader.ts │ │ │ ├── gltf │ │ │ │ ├── gltf.ts │ │ │ │ ├── gltf_loader.ts │ │ │ │ ├── helpers.ts │ │ │ │ └── index.ts │ │ │ ├── hdr │ │ │ │ └── hdr.ts │ │ │ ├── image │ │ │ │ ├── tga_Loader.ts │ │ │ │ └── webimage_loader.ts │ │ │ └── loader.ts │ │ └── model.ts │ ├── blitter │ │ ├── bilateralblur.ts │ │ ├── blitter.ts │ │ ├── box.ts │ │ ├── copy.ts │ │ ├── gaussianblur.ts │ │ └── index.ts │ ├── camera │ │ ├── base.ts │ │ ├── camera.ts │ │ ├── fps.ts │ │ ├── index.ts │ │ ├── orbit.ts │ │ ├── orthocamera.ts │ │ └── perspectivecamera.ts │ ├── index.ts │ ├── input │ │ └── inputmgr.ts │ ├── material │ │ ├── blinn.ts │ │ ├── grassmaterial.ts │ │ ├── index.ts │ │ ├── lambert.ts │ │ ├── material.ts │ │ ├── meshmaterial.ts │ │ ├── mixins │ │ │ ├── albedocolor.ts │ │ │ ├── foliage.ts │ │ │ ├── lightmodel │ │ │ │ ├── blinnphong.ts │ │ │ │ ├── lambert.ts │ │ │ │ ├── pbrmetallicroughness.ts │ │ │ │ └── pbrspecularglossness.ts │ │ │ ├── lit.ts │ │ │ ├── pbr │ │ │ │ └── common.ts │ │ │ ├── texture.ts │ │ │ └── vertexcolor.ts │ │ ├── pbrmr.ts │ │ ├── pbrsg.ts │ │ ├── shader │ │ │ └── helper.ts │ │ ├── terrainmaterial.ts │ │ └── unlit.ts │ ├── posteffect │ │ ├── bloom.ts │ │ ├── compositor.ts │ │ ├── fxaa.ts │ │ ├── grayscale.ts │ │ ├── index.ts │ │ ├── posteffect.ts │ │ ├── sao.ts │ │ ├── ssr.ts │ │ ├── tonemap.ts │ │ └── water.ts │ ├── render │ │ ├── abuffer_oit.ts │ │ ├── clipmap.ts │ │ ├── cluster_light.ts │ │ ├── cull_visitor.ts │ │ ├── depthpass.ts │ │ ├── drawable.ts │ │ ├── drawable_mixin.ts │ │ ├── envlight.ts │ │ ├── fft_wavegenerator.ts │ │ ├── fullscreenquad.ts │ │ ├── gerstner_wavegenerator.ts │ │ ├── globalbindgroup_allocator.ts │ │ ├── hzb.ts │ │ ├── index.ts │ │ ├── lightpass.ts │ │ ├── objectcolorpass.ts │ │ ├── oit.ts │ │ ├── primitive.ts │ │ ├── render_queue.ts │ │ ├── renderbundle_wrapper.ts │ │ ├── renderer.ts │ │ ├── renderpass.ts │ │ ├── scatteringlut.ts │ │ ├── shadowmap_pass.ts │ │ ├── sky.ts │ │ ├── watermesh.ts │ │ ├── wavegenerator.ts │ │ └── weightedblended_oit.ts │ ├── scene │ │ ├── batchgroup.ts │ │ ├── environment.ts │ │ ├── graph_node.ts │ │ ├── index.ts │ │ ├── light.ts │ │ ├── mesh.ts │ │ ├── octree.ts │ │ ├── raycast_visitor.ts │ │ ├── scene.ts │ │ ├── scene_node.ts │ │ ├── terrain │ │ │ ├── grass.ts │ │ │ ├── heightfield.ts │ │ │ ├── index.ts │ │ │ ├── patch.ts │ │ │ ├── quadtree.ts │ │ │ └── terrain.ts │ │ ├── visitor.ts │ │ └── xform.ts │ ├── shaders │ │ ├── index.ts │ │ ├── misc.ts │ │ ├── noise.ts │ │ ├── pbr.ts │ │ ├── shadow.ts │ │ ├── ssr.ts │ │ └── water.ts │ ├── shadow │ │ ├── esm.ts │ │ ├── index.ts │ │ ├── pcf_opt.ts │ │ ├── pcf_pd.ts │ │ ├── shadow_impl.ts │ │ ├── shadowmapper.ts │ │ ├── ssm.ts │ │ └── vsm.ts │ ├── shapes │ │ ├── box.ts │ │ ├── cylinder.ts │ │ ├── index.ts │ │ ├── plane.ts │ │ ├── shape.ts │ │ ├── sphere.ts │ │ └── torus.ts │ ├── utility │ │ ├── aabbtree.ts │ │ ├── bounding_volume.ts │ │ ├── draco │ │ │ └── decoder.ts │ │ ├── index.ts │ │ ├── misc.ts │ │ ├── panorama.ts │ │ ├── pmrem.ts │ │ ├── shprojection.ts │ │ └── textures │ │ │ ├── ggxlut.ts │ │ │ ├── gradientnoise.ts │ │ │ └── randomnoise.ts │ └── values.ts │ └── tsconfig.json ├── package.json ├── rush.json ├── site ├── assets │ ├── images │ │ ├── Wide_Street.hdr │ │ ├── earthcolor.jpg │ │ ├── earthnormal.png │ │ ├── environments │ │ │ ├── doge2.hdr │ │ │ ├── forest.hdr │ │ │ ├── street_night.hdr │ │ │ └── tower.hdr │ │ ├── fur-alpha.png │ │ ├── fur-color.png │ │ ├── grass1.dds │ │ ├── grass2.dds │ │ ├── layer.jpg │ │ ├── rocks.jpg │ │ ├── rocks_NM_height.tga │ │ └── sky.dds │ ├── js │ │ ├── ammo.wasm.js │ │ ├── ammo.wasm.wasm │ │ ├── draco_decoder.js │ │ └── draco_decoder.wasm │ ├── maps │ │ └── map1 │ │ │ ├── colormap.jpg │ │ │ ├── detail1.jpg │ │ │ ├── detail1_norm.jpg │ │ │ ├── detail2.jpg │ │ │ ├── detail2_norm.jpg │ │ │ ├── detail3.jpg │ │ │ ├── detail3_norm.jpg │ │ │ ├── heightmap.raw │ │ │ └── splatmap.tga │ ├── models │ │ ├── BoxTextured.glb │ │ ├── CesiumMan.glb │ │ ├── DamagedHelmet.glb │ │ ├── Duck.glb │ │ ├── abandoned_building_room.glb │ │ ├── cage │ │ │ ├── license.txt │ │ │ ├── scene.bin │ │ │ ├── scene.gltf │ │ │ └── textures │ │ │ │ └── Scene_-_Root_baseColor.jpeg │ │ ├── medieval_asset_19_cage.zip │ │ ├── sitting_room_with_baked_textures.glb │ │ ├── stone1.glb │ │ └── stone2.glb │ ├── sponza.zip │ └── terrain_assets.zip ├── build-doc.js ├── dummy.js ├── extract-api.js ├── package.json ├── report │ ├── backend-webgl.api.md │ ├── backend-webgpu.api.md │ ├── base.api.md │ ├── device.api.md │ ├── imgui.api.md │ └── scene.api.md ├── rewrite-markdown.js ├── rollup.config.mjs ├── rollup.config.showcase.mjs ├── spawn.js ├── src │ ├── demo-0 │ │ ├── envmap.ts │ │ ├── gltfviewer.ts │ │ ├── index.html │ │ ├── main.ts │ │ └── ui.ts │ ├── demo-1 │ │ ├── index.html │ │ ├── main.ts │ │ ├── materials │ │ │ ├── fur.ts │ │ │ ├── parallax.ts │ │ │ ├── scenecolor.ts │ │ │ ├── toon.ts │ │ │ └── wood.ts │ │ └── ui.ts │ ├── demo-2 │ │ ├── index.html │ │ ├── main.ts │ │ └── ui.ts │ ├── demo-3 │ │ ├── demo.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── treematerial.ts │ │ └── ui.ts │ ├── demo-4 │ │ ├── index.html │ │ ├── main.ts │ │ ├── physics.ts │ │ └── ui.ts │ ├── demo-5 │ │ ├── index.html │ │ ├── main.ts │ │ └── ui.ts │ ├── demo-6 │ │ ├── index.html │ │ ├── main.ts │ │ └── ui.ts │ ├── demo-7 │ │ ├── index.html │ │ ├── main.ts │ │ └── ui.ts │ ├── demo-8 │ │ ├── index.html │ │ └── main.ts │ ├── sample-0 │ │ ├── index.html │ │ └── main.js │ ├── sample-1 │ │ ├── index.html │ │ └── main.js │ ├── sample-2 │ │ ├── index.html │ │ └── main.js │ ├── sample-3 │ │ ├── index.html │ │ └── main.js │ ├── sample-4 │ │ ├── index.html │ │ └── main.js │ ├── sample-5 │ │ ├── index.html │ │ └── main.js │ ├── tut-0 │ │ ├── index.html │ │ └── main.js │ ├── tut-1 │ │ ├── index.html │ │ └── main.js │ ├── tut-10 │ │ ├── index.html │ │ └── main.js │ ├── tut-11 │ │ ├── index.html │ │ └── main.js │ ├── tut-12 │ │ ├── index.html │ │ └── main.js │ ├── tut-13 │ │ ├── index.html │ │ └── main.js │ ├── tut-14 │ │ ├── index.html │ │ └── main.js │ ├── tut-15 │ │ ├── index.html │ │ └── main.js │ ├── tut-16 │ │ ├── index.html │ │ └── main.js │ ├── tut-17 │ │ ├── index.html │ │ └── main.js │ ├── tut-18 │ │ ├── index.html │ │ └── main.js │ ├── tut-19 │ │ ├── index.html │ │ └── main.js │ ├── tut-2 │ │ ├── index.html │ │ └── main.js │ ├── tut-20 │ │ ├── index.html │ │ └── main.js │ ├── tut-21 │ │ ├── index.html │ │ └── main.js │ ├── tut-22 │ │ ├── index.html │ │ └── main.js │ ├── tut-23 │ │ ├── index.html │ │ └── main.js │ ├── tut-24 │ │ ├── index.html │ │ └── main.js │ ├── tut-25 │ │ ├── index.html │ │ └── main.js │ ├── tut-26 │ │ ├── index.html │ │ └── main.js │ ├── tut-27 │ │ ├── index.html │ │ └── main.js │ ├── tut-28 │ │ ├── index.html │ │ └── main.js │ ├── tut-29 │ │ ├── index.html │ │ └── main.js │ ├── tut-3 │ │ ├── index.html │ │ └── main.js │ ├── tut-30 │ │ ├── index.html │ │ └── main.js │ ├── tut-31 │ │ ├── index.html │ │ └── main.js │ ├── tut-32 │ │ ├── index.html │ │ └── main.js │ ├── tut-33 │ │ ├── index.html │ │ └── main.js │ ├── tut-34 │ │ ├── index.html │ │ └── main.js │ ├── tut-35 │ │ ├── index.html │ │ └── main.js │ ├── tut-36 │ │ ├── index.html │ │ └── main.js │ ├── tut-37 │ │ ├── index.html │ │ └── main.js │ ├── tut-38 │ │ ├── index.html │ │ └── main.js │ ├── tut-39 │ │ ├── index.html │ │ └── main.js │ ├── tut-4 │ │ ├── index.html │ │ └── main.js │ ├── tut-40 │ │ ├── index.html │ │ └── main.js │ ├── tut-41 │ │ ├── index.html │ │ └── main.js │ ├── tut-42 │ │ ├── index.html │ │ └── main.js │ ├── tut-43 │ │ ├── index.html │ │ └── main.js │ ├── tut-44 │ │ ├── index.html │ │ └── main.js │ ├── tut-45 │ │ ├── index.html │ │ └── main.js │ ├── tut-46 │ │ ├── index.html │ │ └── main.js │ ├── tut-47 │ │ ├── index.html │ │ └── main.js │ ├── tut-48 │ │ ├── index.html │ │ └── main.js │ ├── tut-49 │ │ ├── index.html │ │ └── main.js │ ├── tut-5 │ │ ├── index.html │ │ └── main.js │ ├── tut-6 │ │ ├── index.html │ │ └── main.js │ ├── tut-7 │ │ ├── index.html │ │ └── main.js │ ├── tut-8 │ │ ├── index.html │ │ └── main.js │ └── tut-9 │ │ ├── index.html │ │ └── main.js ├── tsconfig.json ├── types │ └── ammo-wasm.d.ts └── web │ ├── .nojekyll │ ├── README.md │ ├── css │ ├── bootstrap.min.css │ ├── doc.css │ ├── showcase.css │ └── var.css │ ├── demo.html │ ├── en │ ├── README.md │ ├── _coverpage.md │ ├── _navbar.md │ ├── _sidebar.md │ ├── animation-blending.md │ ├── animation-custom.md │ ├── animation-intro.md │ ├── animation-keyframe.md │ ├── animation-skeleton.md │ ├── buffer.md │ ├── device.md │ ├── devicesamples.md │ ├── drawcall.md │ ├── fog.md │ ├── gltf.md │ ├── installation.md │ ├── instancing-intro.md │ ├── intro.md │ ├── lighting-direct.md │ ├── lighting-indirect.md │ ├── lighting-intro.md │ ├── mesh-material.md │ ├── multi-views.md │ ├── oit.md │ ├── picking.md │ ├── posteffect-bloom.md │ ├── posteffect-fxaa.md │ ├── posteffect-intro.md │ ├── posteffect-sao.md │ ├── posteffect-ssr.md │ ├── posteffect-tonemap.md │ ├── renderstate.md │ ├── scene-basic.md │ ├── scene-graph.md │ ├── shader.md │ ├── shadow-aa.md │ ├── shadow-intro.md │ ├── sky.md │ ├── terrain.md │ ├── texture.md │ ├── user-material-lit.md │ ├── user-material-multipass.md │ ├── user-material-unlit.md │ ├── user-material-var.md │ ├── user-material.md │ └── water.md │ ├── favicon.ico │ ├── index.html │ ├── intro.md │ ├── js │ ├── bootstrap.min.js │ └── showcase.js │ ├── media │ ├── commandbufferreuse.jpg │ ├── favicon.ico │ ├── gltf.jpg │ ├── icon.svg │ ├── instancing.jpg │ ├── lights.jpg │ ├── logo.svg │ ├── logo_i.svg │ ├── material.jpg │ ├── oit.jpg │ ├── physics.jpg │ └── terrain.jpg │ ├── showcase.html │ ├── showdemo.html │ ├── vendor │ ├── docsify.js │ ├── search.min.js │ └── themes │ │ ├── dark.css │ │ ├── darkly.css │ │ ├── fonts │ │ ├── L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_QOW4Ep0.woff2 │ │ ├── L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_R-W4Ep0.woff2 │ │ ├── L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2 │ │ ├── L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_S-W4Ep0.woff2 │ │ ├── L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SeW4Ep0.woff2 │ │ ├── L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SuW4Ep0.woff2 │ │ ├── jizaRExUiTo99u79D0-ExdGM.woff2 │ │ ├── jizaRExUiTo99u79D0KExQ.woff2 │ │ ├── jizaRExUiTo99u79D0aExdGM.woff2 │ │ └── jizaRExUiTo99u79D0yExdGM.woff2 │ │ ├── style.min.css │ │ └── vue.css │ └── zh-cn │ ├── README.md │ ├── _coverpage.md │ ├── _navbar.md │ ├── _sidebar.md │ ├── animation-blending.md │ ├── animation-custom.md │ ├── animation-intro.md │ ├── animation-keyframe.md │ ├── animation-skeleton.md │ ├── buffer.md │ ├── device.md │ ├── devicesamples.md │ ├── drawcall.md │ ├── fog.md │ ├── installation.md │ ├── instancing-intro.md │ ├── intro.md │ ├── lighting-direct.md │ ├── lighting-indirect.md │ ├── lighting-intro.md │ ├── lighting.md │ ├── mesh-material.md │ ├── multi-views.md │ ├── oit.md │ ├── picking.md │ ├── posteffect-bloom.md │ ├── posteffect-fxaa.md │ ├── posteffect-intro.md │ ├── posteffect-sao.md │ ├── posteffect-ssr.md │ ├── posteffect-tonemap.md │ ├── renderstate.md │ ├── scene-basic.md │ ├── scene-graph.md │ ├── shader.md │ ├── shadow-aa.md │ ├── shadow-intro.md │ ├── shadow.md │ ├── sky.md │ ├── terrain.md │ ├── texture.md │ ├── user-material-lit.md │ ├── user-material-multipass.md │ ├── user-material-unlit.md │ ├── user-material-var.md │ ├── user-material.md │ └── water.md ├── test ├── README.md ├── build.js ├── config │ └── rush-project.json ├── package.json ├── rollup.config.mjs ├── src │ ├── assets │ │ ├── SimpleMorph.gltf │ │ ├── images │ │ │ ├── Di-3d-bc6h.dds │ │ │ ├── Di-3d.dds │ │ │ ├── Di-3d.png │ │ │ └── cloudy.hdr │ │ ├── stone1.glb │ │ └── stone2.glb │ ├── builder │ │ ├── index.html │ │ └── main.ts │ ├── common │ │ ├── index.ts │ │ └── textureview.ts │ ├── doc │ │ ├── index.html │ │ └── main.ts │ ├── index.html │ ├── instancing │ │ ├── index.html │ │ ├── main.ts │ │ └── materal.ts │ ├── mathtest │ │ ├── aabb.ts │ │ ├── common.ts │ │ ├── frustum.ts │ │ ├── index.html │ │ ├── main.ts │ │ ├── plane.ts │ │ ├── sh.ts │ │ └── vector.ts │ ├── ssr │ │ ├── index.html │ │ └── main.ts │ └── texture │ │ ├── case.ts │ │ ├── index.html │ │ └── main.ts └── tsconfig.json ├── tsconfig.common.json └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | #root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | max_line_length = 100 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | extends: [ 4 | 'plugin:@typescript-eslint/recommended', 5 | 'plugin:prettier/recommended' 6 | ], 7 | plugins: [ 8 | 'prettier', 9 | 'import' 10 | ], 11 | parserOptions: { 12 | ecmaVersion: 12, 13 | sourceType: 'module', 14 | }, 15 | env: { 16 | browser: true, 17 | node: true, 18 | es2021: true 19 | }, 20 | ignorePatterns: ['**/*.d.ts', '**/dist/**'], 21 | rules: { 22 | 'import/no-cycle': 'warn', 23 | 'no-explicit-any': 'off', 24 | '@typescript-eslint/no-explicit-any': 'off', 25 | '@typescript-eslint/ban-ts-comment': 'off', 26 | 'no-unused-vars': 'off', 27 | '@typescript-eslint/no-unused-vars': ['error', { args: 'none' }], 28 | 'no-empty-function': 'off', 29 | '@typescript-eslint/no-empty-function': 'off', 30 | '@typescript-eslint/no-empty-interface': 'off', 31 | '@typescript-eslint/no-this-alias': 'off', 32 | '@typescript-eslint/consistent-type-imports': 'warn', 33 | '@typescript-eslint/ban-types': 'off', 34 | 'prettier/prettier': 'error' 35 | }, 36 | }; 37 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Don't allow people to merge changes to these generated files, because the result 2 | # may be invalid. You need to run "rush update" again. 3 | pnpm-lock.yaml merge=text 4 | shrinkwrap.yaml merge=binary 5 | npm-shrinkwrap.json merge=binary 6 | yarn.lock merge=binary 7 | 8 | # Rush's JSON config files use JavaScript-style code comments. The rule below prevents pedantic 9 | # syntax highlighters such as GitHub's from highlighting these comments as errors. Your text editor 10 | # may also require a special configuration to allow comments in JSON. 11 | # 12 | # For more information, see this issue: https://github.com/microsoft/rushstack/issues/1088 13 | # 14 | *.json linguist-language=JSON-with-Comments 15 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | on: 3 | push: 4 | branches: [ "main" ] 5 | pull_request: 6 | branches: [ "main" ] 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v3 12 | with: 13 | fetch-depth: 2 14 | - name: Git config user 15 | uses: snow-actions/git-config-user@v1.0.0 16 | with: 17 | name: gavinyork 18 | email: gavinyork2024@outlook.com 19 | - uses: actions/setup-node@v3 20 | with: 21 | node-version: 16 22 | - name: Verify Change Logs 23 | run: node common/scripts/install-run-rush.js change --verify 24 | - name: Rush Update 25 | run: node common/scripts/install-run-rush.js update 26 | - name: Rush Install 27 | run: node common/scripts/install-run-rush.js install 28 | - name: Rush rebuild 29 | run: node common/scripts/install-run-rush.js rebuild --verbose 30 | -------------------------------------------------------------------------------- /.github/workflows/site.yml: -------------------------------------------------------------------------------- 1 | name: Build and Deploy to GitHub Pages 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | jobs: 9 | build-and-deploy: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@v3 13 | with: 14 | fetch-depth: 2 15 | - uses: actions/setup-node@v3 16 | with: 17 | node-version: 16 18 | - name: Rush Update 19 | run: node common/scripts/install-run-rush.js update 20 | - name: Rush Install 21 | run: node common/scripts/install-run-rush.js install 22 | - name: Rush rebuild 23 | run: node common/scripts/install-run-rush.js rebuild --verbose 24 | - name: Build site 25 | run: pushd site && npm run build:site && popd 26 | 27 | - name: Deploy to GitHub Pages 28 | uses: Cecilapp/GitHub-Pages-deploy@v3 29 | env: 30 | GITHUB_TOKEN: ${{ secrets.SITE_TOKEN }} 31 | with: 32 | email: gavinyork2024@outlook.com 33 | build_dir: ./site/dist/web 34 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "doc-site"] 2 | path = doc-site 3 | url = https://github.com/gavinyork/zephyr3d-site.git 4 | -------------------------------------------------------------------------------- /.prettierrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | // We use a larger print width because Prettier's word-wrapping seems to be tuned 3 | // for plain JavaScript without type annotations 4 | printWidth: 110, 5 | 6 | // Use .gitattributes to manage newlines 7 | endOfLine: 'auto', 8 | 9 | // Use single quotes instead of double quotes 10 | singleQuote: true, 11 | 12 | // For ES5, trailing commas cannot be used in function parameters; it is counterintuitive 13 | // to use them for arrays only 14 | trailingComma: 'none', 15 | 16 | semi: true 17 | }; 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 gavinyork 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /common/autoinstallers/rush-prettier/.npmrc: -------------------------------------------------------------------------------- 1 | # Rush uses this file to configure the NPM package registry during installation. It is applicable 2 | # to PNPM, NPM, and Yarn package managers. It is used by operations such as "rush install", 3 | # "rush update", and the "install-run.js" scripts. 4 | # 5 | # NOTE: The "rush publish" command uses .npmrc-publish instead. 6 | # 7 | # Before invoking the package manager, Rush will copy this file to the folder where installation 8 | # is performed. The copied file will omit any config lines that reference environment variables 9 | # that are undefined in that session; this avoids problems that would otherwise result due to 10 | # a missing variable being replaced by an empty string. 11 | # 12 | # * * * SECURITY WARNING * * * 13 | # 14 | # It is NOT recommended to store authentication tokens in a text file on a lab machine, because 15 | # other unrelated processes may be able to read the file. Also, the file may persist indefinitely, 16 | # for example if the machine loses power. A safer practice is to pass the token via an 17 | # environment variable, which can be referenced from .npmrc using ${} expansion. For example: 18 | # 19 | # //registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} 20 | # 21 | # registry=https://registry.npmjs.org/ 22 | # registry=http://localhost:4873/ 23 | always-auth=false 24 | -------------------------------------------------------------------------------- /common/autoinstallers/rush-prettier/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rush-prettier", 3 | "version": "1.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "prettier": "2.8.4", 7 | "pretty-quick": "3.1.3" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /common/config/rush/.npmrc: -------------------------------------------------------------------------------- 1 | # Rush uses this file to configure the NPM package registry during installation. It is applicable 2 | # to PNPM, NPM, and Yarn package managers. It is used by operations such as "rush install", 3 | # "rush update", and the "install-run.js" scripts. 4 | # 5 | # NOTE: The "rush publish" command uses .npmrc-publish instead. 6 | # 7 | # Before invoking the package manager, Rush will copy this file to the folder where installation 8 | # is performed. The copied file will omit any config lines that reference environment variables 9 | # that are undefined in that session; this avoids problems that would otherwise result due to 10 | # a missing variable being replaced by an empty string. 11 | # 12 | # * * * SECURITY WARNING * * * 13 | # 14 | # It is NOT recommended to store authentication tokens in a text file on a lab machine, because 15 | # other unrelated processes may be able to read the file. Also, the file may persist indefinitely, 16 | # for example if the machine loses power. A safer practice is to pass the token via an 17 | # environment variable, which can be referenced from .npmrc using ${} expansion. For example: 18 | # 19 | # //registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} 20 | # 21 | # registry=https://registry.npmjs.org/ 22 | # registry=http://localhost:4873/ 23 | registry=https://registry.npmmirror.com 24 | always-auth=false 25 | update-notifier=false 26 | -------------------------------------------------------------------------------- /common/config/rush/.npmrc-publish: -------------------------------------------------------------------------------- 1 | # This config file is very similar to common/config/rush/.npmrc, except that .npmrc-publish 2 | # is used by the "rush publish" command, as publishing often involves different credentials 3 | # and registries than other operations. 4 | # 5 | # Before invoking the package manager, Rush will copy this file to "common/temp/publish-home/.npmrc" 6 | # and then temporarily map that folder as the "home directory" for the current user account. 7 | # This enables the same settings to apply for each project folder that gets published. The copied file 8 | # will omit any config lines that reference environment variables that are undefined in that session; 9 | # this avoids problems that would otherwise result due to a missing variable being replaced by 10 | # an empty string. 11 | # 12 | # * * * SECURITY WARNING * * * 13 | # 14 | # It is NOT recommended to store authentication tokens in a text file on a lab machine, because 15 | # other unrelated processes may be able to read the file. Also, the file may persist indefinitely, 16 | # for example if the machine loses power. A safer practice is to pass the token via an 17 | # environment variable, which can be referenced from .npmrc using ${} expansion. For example: 18 | # 19 | # //registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} 20 | # 21 | registry.npmjs.org/:_authToken=${NPM_AUTH_TOKEN} 22 | -------------------------------------------------------------------------------- /common/config/rush/.pnpmfile.cjs: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * When using the PNPM package manager, you can use pnpmfile.js to workaround 5 | * dependencies that have mistakes in their package.json file. (This feature is 6 | * functionally similar to Yarn's "resolutions".) 7 | * 8 | * For details, see the PNPM documentation: 9 | * https://pnpm.js.org/docs/en/hooks.html 10 | * 11 | * IMPORTANT: SINCE THIS FILE CONTAINS EXECUTABLE CODE, MODIFYING IT IS LIKELY TO INVALIDATE 12 | * ANY CACHED DEPENDENCY ANALYSIS. After any modification to pnpmfile.js, it's recommended to run 13 | * "rush update --full" so that PNPM will recalculate all version selections. 14 | */ 15 | module.exports = { 16 | hooks: { 17 | readPackage 18 | } 19 | }; 20 | 21 | /** 22 | * This hook is invoked during installation before a package's dependencies 23 | * are selected. 24 | * The `packageJson` parameter is the deserialized package.json 25 | * contents for the package that is about to be installed. 26 | * The `context` parameter provides a log() function. 27 | * The return value is the updated object. 28 | */ 29 | function readPackage(packageJson, context) { 30 | 31 | // // The karma types have a missing dependency on typings from the log4js package. 32 | // if (packageJson.name === '@types/karma') { 33 | // context.log('Fixed up dependencies for @types/karma'); 34 | // packageJson.dependencies['log4js'] = '0.6.38'; 35 | // } 36 | 37 | return packageJson; 38 | } 39 | -------------------------------------------------------------------------------- /common/config/rush/repo-state.json: -------------------------------------------------------------------------------- 1 | // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. 2 | { 3 | "preferredVersionsHash": "bf21a9e8fbc5a3846fb05b4fa0859e0917b2202f" 4 | } 5 | -------------------------------------------------------------------------------- /common/config/rush/rush-plugins.json: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file manages Rush's plugin feature. 3 | */ 4 | { 5 | "$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush-plugins.schema.json", 6 | "plugins": [ 7 | /** 8 | * Each item configures a plugin to be loaded by Rush. 9 | */ 10 | // { 11 | // /** 12 | // * The name of the NPM package that provides the plugin. 13 | // */ 14 | // "packageName": "@scope/my-rush-plugin", 15 | // /** 16 | // * The name of the plugin. This can be found in the "pluginName" 17 | // * field of the "rush-plugin-manifest.json" file in the NPM package folder. 18 | // */ 19 | // "pluginName": "my-plugin-name", 20 | // /** 21 | // * The name of a Rush autoinstaller that will be used for installation, which 22 | // * can be created using "rush init-autoinstaller". Add the plugin's NPM package 23 | // * to the package.json "dependencies" of your autoinstaller, then run 24 | // * "rush update-autoinstaller". 25 | // */ 26 | // "autoinstallerName": "rush-plugins" 27 | // } 28 | ] 29 | } -------------------------------------------------------------------------------- /common/git-hooks/commit-msg.sample: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | # 3 | # This is an example Git hook for use with Rush. To enable this hook, rename this file 4 | # to "commit-msg" and then run "rush install", which will copy it from common/git-hooks 5 | # to the .git/hooks folder. 6 | # 7 | # TO LEARN MORE ABOUT GIT HOOKS 8 | # 9 | # The Git documentation is here: https://git-scm.com/docs/githooks 10 | # Some helpful resources: https://githooks.com 11 | # 12 | # ABOUT THIS EXAMPLE 13 | # 14 | # The commit-msg hook is called by "git commit" with one argument, the name of the file 15 | # that has the commit message. The hook should exit with non-zero status after issuing 16 | # an appropriate message if it wants to stop the commit. The hook is allowed to edit 17 | # the commit message file. 18 | 19 | # This example enforces that commit message should contain a minimum amount of 20 | # description text. 21 | if [ `cat $1 | wc -w` -lt 3 ]; then 22 | echo "" 23 | echo "Invalid commit message: The message must contain at least 3 words." 24 | exit 1 25 | fi 26 | -------------------------------------------------------------------------------- /common/scripts/install-run-rush-pnpm.js: -------------------------------------------------------------------------------- 1 | // THIS FILE WAS GENERATED BY A TOOL. ANY MANUAL MODIFICATIONS WILL GET OVERWRITTEN WHENEVER RUSH IS UPGRADED. 2 | // 3 | // This script is intended for usage in an automated build environment where the Rush command may not have 4 | // been preinstalled, or may have an unpredictable version. This script will automatically install the version of Rush 5 | // specified in the rush.json configuration file (if not already installed), and then pass a command-line to the 6 | // rush-pnpm command. 7 | // 8 | // An example usage would be: 9 | // 10 | // node common/scripts/install-run-rush-pnpm.js pnpm-command 11 | // 12 | // For more information, see: https://rushjs.io/pages/maintainer/setup_new_repo/ 13 | 14 | /******/ (() => { // webpackBootstrap 15 | /******/ "use strict"; 16 | var __webpack_exports__ = {}; 17 | /*!*****************************************************!*\ 18 | !*** ./lib-esnext/scripts/install-run-rush-pnpm.js ***! 19 | \*****************************************************/ 20 | 21 | // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. 22 | // See the @microsoft/rush package's LICENSE file for license information. 23 | require('./install-run-rush'); 24 | //# sourceMappingURL=install-run-rush-pnpm.js.map 25 | module.exports = __webpack_exports__; 26 | /******/ })() 27 | ; 28 | //# sourceMappingURL=install-run-rush-pnpm.js.map -------------------------------------------------------------------------------- /common/scripts/install-run-rushx.js: -------------------------------------------------------------------------------- 1 | // THIS FILE WAS GENERATED BY A TOOL. ANY MANUAL MODIFICATIONS WILL GET OVERWRITTEN WHENEVER RUSH IS UPGRADED. 2 | // 3 | // This script is intended for usage in an automated build environment where the Rush command may not have 4 | // been preinstalled, or may have an unpredictable version. This script will automatically install the version of Rush 5 | // specified in the rush.json configuration file (if not already installed), and then pass a command-line to the 6 | // rushx command. 7 | // 8 | // An example usage would be: 9 | // 10 | // node common/scripts/install-run-rushx.js custom-command 11 | // 12 | // For more information, see: https://rushjs.io/pages/maintainer/setup_new_repo/ 13 | 14 | /******/ (() => { // webpackBootstrap 15 | /******/ "use strict"; 16 | var __webpack_exports__ = {}; 17 | /*!*************************************************!*\ 18 | !*** ./lib-esnext/scripts/install-run-rushx.js ***! 19 | \*************************************************/ 20 | 21 | // Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. 22 | // See the @microsoft/rush package's LICENSE file for license information. 23 | require('./install-run-rush'); 24 | //# sourceMappingURL=install-run-rushx.js.map 25 | module.exports = __webpack_exports__; 26 | /******/ })() 27 | ; 28 | //# sourceMappingURL=install-run-rushx.js.map -------------------------------------------------------------------------------- /examples/src/computeboids/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/cube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/imageblur/dog_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/examples/src/imageblur/dog_01.png -------------------------------------------------------------------------------- /examples/src/imageblur/dom.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 22 | 23 | 24 |
25 | 26 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /examples/src/imageblur/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/instancecube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/rendertexture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/sea/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/stenciloutline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/texturedcube/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/src/texturedcube/layer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/examples/src/texturedcube/layer.jpg -------------------------------------------------------------------------------- /examples/src/texturedcube/sample-video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/examples/src/texturedcube/sample-video.mp4 -------------------------------------------------------------------------------- /examples/src/triangle/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /examples/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "typeRoots": ["./node_modules/@webgpu/types"] 20 | }, 21 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /libs/backend-webgl/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @zephyr3d/backend-webgl 2 | 3 | This log was last generated on Mon, 04 Nov 2024 16:42:57 GMT and should not be manually modified. 4 | 5 | ## 0.1.8 6 | Mon, 04 Nov 2024 16:42:57 GMT 7 | 8 | ### Patches 9 | 10 | - Update README.md 11 | 12 | ## 0.1.7 13 | Sun, 02 Jun 2024 11:21:22 GMT 14 | 15 | ### Patches 16 | 17 | - Add device object pool 18 | 19 | ## 0.1.6 20 | Fri, 19 Apr 2024 18:22:46 GMT 21 | 22 | ### Patches 23 | 24 | - change keywords 25 | 26 | ## 0.1.5 27 | Fri, 19 Apr 2024 18:09:58 GMT 28 | 29 | ### Patches 30 | 31 | - implement render bundle 32 | 33 | ## 0.1.4 34 | Tue, 19 Mar 2024 19:55:21 GMT 35 | 36 | ### Patches 37 | 38 | - Update documentation 39 | 40 | ## 0.1.3 41 | Mon, 11 Mar 2024 18:19:27 GMT 42 | 43 | _Version update only_ 44 | 45 | ## 0.1.2 46 | Thu, 08 Feb 2024 10:49:24 GMT 47 | 48 | ### Patches 49 | 50 | - update rollup config 51 | 52 | ## 0.1.1 53 | Thu, 08 Feb 2024 09:29:37 GMT 54 | 55 | ### Patches 56 | 57 | - add README.md 58 | 59 | ## 0.1.0 60 | Thu, 08 Feb 2024 08:12:06 GMT 61 | 62 | _Initial release_ 63 | 64 | -------------------------------------------------------------------------------- /libs/backend-webgl/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d/backend-webgl 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/backend-webgl/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { swc } from 'rollup-plugin-swc3'; 2 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 3 | import dts from 'rollup-plugin-dts'; 4 | 5 | function getTargetDts() { 6 | return { 7 | input: './src/index.ts', 8 | output: [{ file: './dist/index.d.ts', format: 'es' }], 9 | plugins: [dts()] 10 | } 11 | } 12 | 13 | function getTargetES6() { 14 | return { 15 | external: (id) => /@zephyr3d\/base/.test(id) || /@zephyr3d\/device/.test(id), 16 | input: './src/index.ts', 17 | preserveSymlinks: true, 18 | output: { 19 | dir: 'dist', 20 | preserveModules: true, 21 | format: 'esm', 22 | sourcemap: true 23 | }, 24 | plugins: [ 25 | nodeResolve(), 26 | swc(), 27 | // terser() 28 | ] 29 | }; 30 | } 31 | 32 | export default (args) => { 33 | return [getTargetES6(), getTargetDts()]; 34 | }; 35 | -------------------------------------------------------------------------------- /libs/backend-webgl/src/index.ts: -------------------------------------------------------------------------------- 1 | import { backend1, backend2 } from './device_webgl'; 2 | 3 | /** 4 | * The WebGL1 backend 5 | * @public 6 | */ 7 | export const backendWebGL1 = backend1; 8 | 9 | /** 10 | * The WebGL2 backend 11 | * @public 12 | */ 13 | export const backendWebGL2 = backend2; 14 | -------------------------------------------------------------------------------- /libs/backend-webgl/src/indexbuffer_webgl.ts: -------------------------------------------------------------------------------- 1 | import type { IndexBuffer } from '@zephyr3d/device'; 2 | import { GPUResourceUsageFlags, PBPrimitiveTypeInfo, PBPrimitiveType } from '@zephyr3d/device'; 3 | import { WebGLGPUBuffer } from './buffer_webgl'; 4 | import type { WebGLDevice } from './device_webgl'; 5 | 6 | const typeU16 = PBPrimitiveTypeInfo.getCachedTypeInfo(PBPrimitiveType.U16); 7 | const typeU32 = PBPrimitiveTypeInfo.getCachedTypeInfo(PBPrimitiveType.U32); 8 | 9 | export class WebGLIndexBuffer extends WebGLGPUBuffer implements IndexBuffer { 10 | readonly indexType: PBPrimitiveTypeInfo; 11 | readonly length: number; 12 | constructor(device: WebGLDevice, data: Uint16Array | Uint32Array, usage?: number) { 13 | if (!(data instanceof Uint16Array) && !(data instanceof Uint32Array)) { 14 | throw new Error('invalid index data'); 15 | } 16 | super(device, GPUResourceUsageFlags.BF_INDEX | usage, data); 17 | this.indexType = data instanceof Uint16Array ? typeU16 : typeU32; 18 | this.length = data.length; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /libs/backend-webgl/src/utils.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Utilitty functions and classes 3 | */ 4 | 5 | import { WebGLEnum } from './webgl_enum'; 6 | 7 | export function isWebGL2(gl: WebGLRenderingContext | WebGL2RenderingContext): gl is WebGL2RenderingContext { 8 | // eslint-disable-next-line @typescript-eslint/no-explicit-any 9 | return !!(gl && (gl as any).texStorage2D); 10 | } 11 | 12 | export class WebGLError extends Error { 13 | private static errorToString: Record = { 14 | [WebGLEnum.NO_ERROR]: 'NO_ERROR', 15 | [WebGLEnum.INVALID_ENUM]: 'INVALID_ENUM', 16 | [WebGLEnum.INVALID_VALUE]: 'INVALID_VALUE', 17 | [WebGLEnum.INVALID_OPERATION]: 'INVALID_OPERATION', 18 | [WebGLEnum.INVALID_FRAMEBUFFER_OPERATION]: 'INVALID_FRAMEBUFFER_OPERATION', 19 | [WebGLEnum.OUT_OF_MEMORY]: 'OUT_OF_MEMORY', 20 | [WebGLEnum.CONTEXT_LOST_WEBGL]: 'CONTEXT_LOST_WEBGL' 21 | }; 22 | code: number; 23 | constructor(code: number) { 24 | super(WebGLError.errorToString[code]); 25 | this.code = code; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /libs/backend-webgl/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types", "./node_modules/@webgpu/types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /libs/backend-webgpu/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @zephyr3d/backend-webgpu 2 | 3 | This log was last generated on Mon, 04 Nov 2024 16:42:57 GMT and should not be manually modified. 4 | 5 | ## 0.1.7 6 | Mon, 04 Nov 2024 16:42:57 GMT 7 | 8 | ### Patches 9 | 10 | - Update README.md 11 | 12 | ## 0.1.6 13 | Sun, 02 Jun 2024 11:21:22 GMT 14 | 15 | ### Patches 16 | 17 | - Add device object pool 18 | - Allow v-sync to be turned off. 19 | 20 | ## 0.1.5 21 | Fri, 19 Apr 2024 18:09:58 GMT 22 | 23 | ### Patches 24 | 25 | - Add render bundle support 26 | 27 | ## 0.1.4 28 | Tue, 19 Mar 2024 19:55:21 GMT 29 | 30 | ### Patches 31 | 32 | - Update documentation 33 | 34 | ## 0.1.3 35 | Mon, 11 Mar 2024 18:19:27 GMT 36 | 37 | _Version update only_ 38 | 39 | ## 0.1.2 40 | Thu, 08 Feb 2024 10:49:24 GMT 41 | 42 | ### Patches 43 | 44 | - update rollup config 45 | 46 | ## 0.1.1 47 | Thu, 08 Feb 2024 09:29:37 GMT 48 | 49 | ### Patches 50 | 51 | - add README.md 52 | 53 | ## 0.1.0 54 | Thu, 08 Feb 2024 08:12:06 GMT 55 | 56 | _Initial release_ 57 | 58 | -------------------------------------------------------------------------------- /libs/backend-webgpu/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d/backend-webgpu 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/backend-webgpu/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { swc } from 'rollup-plugin-swc3'; 2 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 3 | import dts from 'rollup-plugin-dts'; 4 | 5 | function getTargetDts() { 6 | return { 7 | input: './src/index.ts', 8 | output: [{ file: './dist/index.d.ts', format: 'es' }], 9 | plugins: [dts()] 10 | } 11 | } 12 | 13 | function getTargetES6() { 14 | return { 15 | external: (id) => /@zephyr3d\/base/.test(id) || /@zephyr3d\/device/.test(id), 16 | input: './src/index.ts', 17 | preserveSymlinks: true, 18 | output: { 19 | dir: 'dist', 20 | preserveModules: true, 21 | format: 'esm', 22 | sourcemap: true 23 | }, 24 | plugins: [ 25 | nodeResolve(), 26 | swc(), 27 | // terser() 28 | ] 29 | }; 30 | } 31 | 32 | export default (args) => { 33 | return [getTargetES6(), getTargetDts()]; 34 | }; 35 | -------------------------------------------------------------------------------- /libs/backend-webgpu/src/index.ts: -------------------------------------------------------------------------------- 1 | import { WebGPUDevice } from './device'; 2 | import type { DeviceBackend, DeviceEventMap } from '@zephyr3d/device'; 3 | import { makeEventTarget } from '@zephyr3d/base'; 4 | 5 | /** 6 | * The WebGPU backend 7 | * @public 8 | */ 9 | export const backendWebGPU: DeviceBackend = { 10 | typeName() { 11 | return 'webgpu'; 12 | }, 13 | supported() { 14 | return !!window.GPU && navigator.gpu instanceof window.GPU; 15 | }, 16 | async createDevice(cvs, options?) { 17 | try { 18 | const factory = makeEventTarget(WebGPUDevice)(); 19 | const device = new factory(this, cvs, options); 20 | await device.initContext(); 21 | device.setViewport(); 22 | device.setScissor(); 23 | return device; 24 | } catch (err) { 25 | console.error(err); 26 | return null; 27 | } 28 | } 29 | }; 30 | -------------------------------------------------------------------------------- /libs/backend-webgpu/src/indexbuffer_webgpu.ts: -------------------------------------------------------------------------------- 1 | import type { IndexBuffer } from '@zephyr3d/device'; 2 | import { PBPrimitiveTypeInfo, PBPrimitiveType, GPUResourceUsageFlags } from '@zephyr3d/device'; 3 | import { WebGPUBuffer } from './buffer_webgpu'; 4 | import type { WebGPUDevice } from './device'; 5 | 6 | const typeU16 = PBPrimitiveTypeInfo.getCachedTypeInfo(PBPrimitiveType.U16); 7 | const typeU32 = PBPrimitiveTypeInfo.getCachedTypeInfo(PBPrimitiveType.U32); 8 | 9 | export class WebGPUIndexBuffer extends WebGPUBuffer implements IndexBuffer { 10 | readonly indexType: PBPrimitiveTypeInfo; 11 | readonly length: number; 12 | constructor(device: WebGPUDevice, data: Uint16Array | Uint32Array, usage?: number) { 13 | if (!(data instanceof Uint16Array) && !(data instanceof Uint32Array)) { 14 | throw new Error('invalid index data'); 15 | } 16 | super(device, GPUResourceUsageFlags.BF_INDEX | usage, data); 17 | this.indexType = data instanceof Uint16Array ? typeU16 : typeU32; 18 | this.length = data.length; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /libs/backend-webgpu/src/vertexlayout_cache.ts: -------------------------------------------------------------------------------- 1 | import { hashToVertexFormat } from './constants_webgpu'; 2 | 3 | export class VertexLayoutCache { 4 | private _layouts: Record; 5 | constructor() { 6 | this._layouts = {}; 7 | } 8 | fetchVertexLayout(hash: string): GPUVertexBufferLayout[] { 9 | let layouts: GPUVertexBufferLayout[] = this._layouts[hash]; 10 | if (!layouts) { 11 | layouts = []; 12 | hash.split(':').forEach((l) => { 13 | const parts = l.split('-'); 14 | const layout = { 15 | arrayStride: Number(parts[0]), 16 | stepMode: (Number(parts[1]) ? 'instance' : 'vertex') as GPUVertexStepMode, 17 | attributes: [] as GPUVertexAttribute[] 18 | }; 19 | for (let i = 2; i < parts.length; i += 3) { 20 | layout.attributes.push({ 21 | format: hashToVertexFormat[parts[i]] as GPUVertexFormat, 22 | offset: Number(parts[i + 1]), 23 | shaderLocation: Number(parts[i + 2]) 24 | }); 25 | } 26 | layouts.push(layout); 27 | }); 28 | this._layouts[hash] = layouts; 29 | } 30 | return layouts; 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /libs/backend-webgpu/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types", "./node_modules/@webgpu/types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /libs/base/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @zephyr3d/base 2 | 3 | This log was last generated on Mon, 04 Nov 2024 16:42:57 GMT and should not be manually modified. 4 | 5 | ## 0.1.5 6 | Mon, 04 Nov 2024 16:42:57 GMT 7 | 8 | ### Patches 9 | 10 | - Update README.md 11 | 12 | ## 0.1.4 13 | Sun, 02 Jun 2024 11:21:22 GMT 14 | 15 | ### Patches 16 | 17 | - Add weight-average functional. 18 | 19 | ## 0.1.3 20 | Tue, 19 Mar 2024 19:55:21 GMT 21 | 22 | ### Patches 23 | 24 | - Upate documentation 25 | 26 | ## 0.1.2 27 | Thu, 08 Feb 2024 10:49:24 GMT 28 | 29 | ### Patches 30 | 31 | - update rollup config 32 | - minor changes 33 | 34 | ## 0.1.1 35 | Thu, 08 Feb 2024 09:11:35 GMT 36 | 37 | ### Patches 38 | 39 | - changes README.md of base package 40 | 41 | ## 0.1.0 42 | Thu, 08 Feb 2024 08:12:06 GMT 43 | 44 | _Initial release_ 45 | 46 | -------------------------------------------------------------------------------- /libs/base/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d/base 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/base/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { swc } from 'rollup-plugin-swc3'; 2 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 3 | import dts from 'rollup-plugin-dts'; 4 | 5 | function getTargetDts() { 6 | return { 7 | input: './src/index.ts', 8 | output: [{ file: './dist/index.d.ts', format: 'es' }], 9 | plugins: [dts()] 10 | } 11 | } 12 | 13 | function getTargetES6() { 14 | return { 15 | input: './src/index.ts', 16 | preserveSymlinks: true, 17 | output: { 18 | dir: 'dist', 19 | preserveModules: true, 20 | format: 'esm', 21 | sourcemap: true 22 | }, 23 | plugins: [ 24 | nodeResolve(), 25 | swc(), 26 | // terser() 27 | ] 28 | }; 29 | } 30 | 31 | export default (args) => { 32 | return [getTargetES6(), getTargetDts()]; 33 | }; 34 | -------------------------------------------------------------------------------- /libs/base/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * The base library for zephyr3d project 3 | * 4 | * @packageDocumentation 5 | */ 6 | export * from './utils'; 7 | export * from './event'; 8 | export * from './linkedlist'; 9 | export * from './math'; 10 | export * from './rectspacker'; 11 | export * from './prng'; 12 | -------------------------------------------------------------------------------- /libs/base/src/math/fft/complex.ts: -------------------------------------------------------------------------------- 1 | export type Complex = [number, number]; 2 | export const complex = (re: number, im: number): Complex => [re, im]; 3 | export const add = (a: Complex, b: Complex): Complex => [a[0] + b[0], a[1] + b[1]]; 4 | export const sub = (a: Complex, b: Complex): Complex => [a[0] - b[0], a[1] - b[1]]; 5 | export const mult = (a: Complex, b: Complex): Complex => [ 6 | a[0] * b[0] - a[1] * b[1], 7 | a[0] * b[1] + a[1] * b[0] 8 | ]; 9 | export const eix = (x: number): Complex => [Math.cos(x), Math.sin(x)]; 10 | export const abs = (v: Complex) => Math.sqrt(v[0] * v[0] + v[1] * v[1]); 11 | export const scale = (v: Complex, s: number): Complex => [v[0] * s, v[1] * s]; 12 | export const conj = (v: Complex): Complex => [v[0], -v[1]]; 13 | export const re = (v: Complex) => v[0]; 14 | export const im = (v: Complex) => v[1]; 15 | export const areAqual = (a: Complex, b: Complex, eps = 1.0e-4) => 16 | Math.abs(re(a) - re(b)) < eps && Math.abs(im(a) - im(b)) < eps; 17 | -------------------------------------------------------------------------------- /libs/base/src/math/fft/index.ts: -------------------------------------------------------------------------------- 1 | export * from './complex'; 2 | export * from './fft'; 3 | export * from './fft2'; 4 | -------------------------------------------------------------------------------- /libs/base/src/math/index.ts: -------------------------------------------------------------------------------- 1 | export * from './misc'; 2 | export * from './vector'; 3 | export * from './types'; 4 | export * from './plane'; 5 | export * from './frustum'; 6 | export * from './aabb'; 7 | export * from './ray'; 8 | export * from './sh'; 9 | export * from './noise'; 10 | export * from './interpolator'; 11 | -------------------------------------------------------------------------------- /libs/base/src/math/types.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Enumerator used to refer to a box side 3 | * @public 4 | */ 5 | export enum BoxSide { 6 | /** Left side (-x) */ 7 | LEFT = 0, 8 | /** Right side (+x) */ 9 | RIGHT = 1, 10 | /** Bottom side (-y) */ 11 | BOTTOM = 2, 12 | /** Top side (+y) */ 13 | TOP = 3, 14 | /** Front side (+z) */ 15 | FRONT = 4, 16 | /** Back side (-z) */ 17 | BACK = 5 18 | } 19 | 20 | /** 21 | * The intersection test result of two object A and B 22 | * @public 23 | */ 24 | export enum ClipState { 25 | /** A does not intersect with B */ 26 | NOT_CLIPPED = 0, 27 | /** A is inside B */ 28 | A_INSIDE_B = 1, 29 | /** B is inside A */ 30 | B_INSIDE_A = 2, 31 | /** A and B partially overlap */ 32 | CLIPPED = 2 33 | } 34 | 35 | /** 36 | * Enumerator used to refer to the cube face 37 | * @public 38 | */ 39 | export enum CubeFace { 40 | PX = 0, 41 | NX = 1, 42 | PY = 2, 43 | NY = 3, 44 | PZ = 4, 45 | NZ = 5 46 | } 47 | -------------------------------------------------------------------------------- /libs/base/src/prng.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Pseudorandom number generator 3 | * @public 4 | */ 5 | export class PRNG { 6 | /** @internal */ 7 | private _generator: () => number; 8 | /** 9 | * Creates an instance of PRNG 10 | * @param seed - The random seed 11 | */ 12 | constructor(seed = 0) { 13 | // mulberry32 algorithm 14 | this._generator = () => { 15 | let t = (seed += 0x6d2b79f5); 16 | t = Math.imul(t ^ (t >>> 15), t | 1); 17 | t ^= t + Math.imul(t ^ (t >>> 7), t | 61); 18 | return ((t ^ (t >>> 14)) >>> 0) / 4294967296; 19 | }; 20 | } 21 | /** Gets next random value between 0 and 1 */ 22 | get() { 23 | return this._generator(); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /libs/base/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /libs/device/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @zephyr3d/device 2 | 3 | This log was last generated on Mon, 04 Nov 2024 16:42:57 GMT and should not be manually modified. 4 | 5 | ## 0.2.4 6 | Mon, 04 Nov 2024 16:42:57 GMT 7 | 8 | ### Patches 9 | 10 | - Update README.md 11 | 12 | ## 0.2.3 13 | Sun, 02 Jun 2024 11:21:22 GMT 14 | 15 | ### Patches 16 | 17 | - Add device object pool 18 | 19 | ## 0.2.2 20 | Fri, 19 Apr 2024 18:09:58 GMT 21 | 22 | ### Patches 23 | 24 | - Implement uniform buffer with dynamic offset 25 | - Add render bundle support 26 | 27 | ## 0.2.1 28 | Tue, 19 Mar 2024 19:55:21 GMT 29 | 30 | ### Patches 31 | 32 | - Update documentation 33 | 34 | ## 0.2.0 35 | Mon, 11 Mar 2024 18:19:27 GMT 36 | 37 | ### Minor changes 38 | 39 | - Improve webgpu shader generation 40 | 41 | ## 0.1.2 42 | Thu, 08 Feb 2024 10:49:24 GMT 43 | 44 | ### Patches 45 | 46 | - update rollup config 47 | 48 | ## 0.1.1 49 | Thu, 08 Feb 2024 09:29:37 GMT 50 | 51 | ### Patches 52 | 53 | - add README.md 54 | 55 | ## 0.1.0 56 | Thu, 08 Feb 2024 08:12:06 GMT 57 | 58 | _Initial release_ 59 | 60 | -------------------------------------------------------------------------------- /libs/device/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d/device 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/device/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { swc } from 'rollup-plugin-swc3'; 2 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 3 | import dts from 'rollup-plugin-dts'; 4 | 5 | function getTargetDts() { 6 | return { 7 | input: './src/index.ts', 8 | output: [{ file: './dist/index.d.ts', format: 'es' }], 9 | plugins: [dts()] 10 | } 11 | } 12 | 13 | function getTargetES6() { 14 | return { 15 | external: (id) => /@zephyr3d\/base/.test(id), 16 | input: './src/index.ts', 17 | preserveSymlinks: true, 18 | output: { 19 | dir: 'dist', 20 | preserveModules: true, 21 | format: 'esm', 22 | sourcemap: true 23 | }, 24 | plugins: [ 25 | nodeResolve(), 26 | swc(), 27 | // terser() 28 | ] 29 | }; 30 | } 31 | 32 | export default (args) => { 33 | return [getTargetES6(), getTargetDts()]; 34 | }; 35 | -------------------------------------------------------------------------------- /libs/device/src/builder/index.ts: -------------------------------------------------------------------------------- 1 | export * from './base'; 2 | export * from './ast'; 3 | export * from './programbuilder'; 4 | export * from './types'; 5 | export * from './reflection'; 6 | -------------------------------------------------------------------------------- /libs/device/src/helpers/index.ts: -------------------------------------------------------------------------------- 1 | export * from './textureatlas'; 2 | export * from './font'; 3 | export * from './glyphmanager'; 4 | export * from './drawtext'; 5 | -------------------------------------------------------------------------------- /libs/device/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * A thin wrapper for WebGL/WebGPU api. 3 | * 4 | * @remarks 5 | * This library is a thin wrapper for WebGL/WebGPU api. 6 | * It not only encapsulates the programming interface, but also provides 7 | * a unified way to write shaders and automatically generate shader code 8 | * for the current platform. 9 | * 10 | * @packageDocumentation 11 | */ 12 | 13 | export * from './base_types'; 14 | export * from './vertexdata'; 15 | export * from './render_states'; 16 | export * from './gpuobject'; 17 | export * from './device'; 18 | export * from './builder'; 19 | export * from './helpers'; 20 | export * from './timer'; 21 | export * from './uniformdata'; 22 | -------------------------------------------------------------------------------- /libs/device/src/timer.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Abstract timer interface 3 | * @public 4 | */ 5 | export interface ITimer { 6 | begin(): void; 7 | end(): void; 8 | ended(): boolean; 9 | elapsed(): number; 10 | } 11 | 12 | /** 13 | * CPU timer class 14 | * @public 15 | */ 16 | export class CPUTimer implements ITimer { 17 | /** @internal */ 18 | private _cpuTimer: Performance | DateConstructor; 19 | /** @internal */ 20 | private _cpuStart: number; 21 | /** @internal */ 22 | private _cpuTime: number; 23 | /** @internal */ 24 | private _ended: boolean; 25 | constructor() { 26 | this._cpuTimer = window.performance || window.Date; 27 | this._cpuTime = null; 28 | this._ended = false; 29 | } 30 | now(): number { 31 | return this._cpuTimer.now(); 32 | } 33 | begin() { 34 | this._cpuStart = this.now(); 35 | this._cpuTime = null; 36 | this._ended = false; 37 | } 38 | end() { 39 | this._cpuTime = this.now() - this._cpuStart; 40 | this._ended = true; 41 | } 42 | ended(): boolean { 43 | return this._ended; 44 | } 45 | elapsed(): number { 46 | return this._cpuTime; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /libs/device/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types", "./node_modules/@webgpu/types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /libs/imgui/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @zephyr3d/imgui 2 | 3 | This log was last generated on Mon, 04 Nov 2024 16:42:57 GMT and should not be manually modified. 4 | 5 | ## 0.1.4 6 | Mon, 04 Nov 2024 16:42:57 GMT 7 | 8 | ### Patches 9 | 10 | - Update README.md 11 | 12 | ## 0.1.3 13 | Mon, 11 Mar 2024 18:19:27 GMT 14 | 15 | _Version update only_ 16 | 17 | ## 0.1.2 18 | Thu, 08 Feb 2024 10:49:24 GMT 19 | 20 | ### Patches 21 | 22 | - update rollup config 23 | 24 | ## 0.1.1 25 | Thu, 08 Feb 2024 09:29:37 GMT 26 | 27 | ### Patches 28 | 29 | - add README.md 30 | 31 | ## 0.1.0 32 | Thu, 08 Feb 2024 08:12:06 GMT 33 | 34 | _Initial release_ 35 | 36 | -------------------------------------------------------------------------------- /libs/imgui/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d/imgui 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/imgui/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { swc } from 'rollup-plugin-swc3'; 2 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 3 | import commonjs from '@rollup/plugin-commonjs'; 4 | import dts from 'rollup-plugin-dts'; 5 | 6 | function getTargetDts() { 7 | return { 8 | input: './src/index.ts', 9 | output: [{ file: './dist/index.d.ts', format: 'es' }], 10 | plugins: [dts()] 11 | } 12 | } 13 | 14 | function getTargetES6() { 15 | return { 16 | external: (id) => /@zephyr3d\/base/.test(id) || /@zephyr3d\/device/.test(id), 17 | input: './src/index.ts', 18 | preserveSymlinks: true, 19 | output: { 20 | dir: 'dist', 21 | preserveModules: true, 22 | format: 'esm', 23 | sourcemap: true 24 | }, 25 | plugins: [ 26 | nodeResolve(), 27 | commonjs(), 28 | swc(), 29 | // terser() 30 | ] 31 | }; 32 | } 33 | 34 | export default (args) => { 35 | return [getTargetES6(), getTargetDts()]; 36 | }; 37 | -------------------------------------------------------------------------------- /libs/imgui/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types", "./node_modules/@webgpu/types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /libs/inspector/CHANGELOG.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@zephyr3d/inspector", 3 | "entries": [ 4 | { 5 | "version": "0.1.1", 6 | "tag": "@zephyr3d/inspector_v0.1.1", 7 | "date": "Mon, 04 Nov 2024 16:19:45 GMT", 8 | "comments": { 9 | "dependency": [ 10 | { 11 | "comment": "Updating dependency \"@zephyr3d/scene\" from `^0.5.0` to `^0.6.0`" 12 | } 13 | ] 14 | } 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /libs/inspector/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log - @zephyr3d/inspector 2 | 3 | This log was last generated on Mon, 04 Nov 2024 16:19:45 GMT and should not be manually modified. 4 | 5 | ## 0.1.1 6 | Mon, 04 Nov 2024 16:19:45 GMT 7 | 8 | _Initial release_ 9 | 10 | -------------------------------------------------------------------------------- /libs/inspector/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/inspector/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 2 | import { swc } from 'rollup-plugin-swc3'; 3 | import dts from 'rollup-plugin-dts'; 4 | 5 | const externals = [/@zephyr3d\/base/, /@zephyr3d\/device/, /@zephyr3d\/scene/, /@zephyr3d\/imgui/]; 6 | 7 | function getTargetDts() { 8 | return { 9 | input: './src/index.ts', 10 | output: [{ file: './dist/index.d.ts', format: 'es' }], 11 | plugins: [dts()] 12 | }; 13 | } 14 | 15 | function getTargetES6() { 16 | return { 17 | external: (id) => { 18 | for (const m of externals) { 19 | if (m.test(id)) { 20 | return true; 21 | } 22 | } 23 | }, 24 | input: './src/index.ts', 25 | preserveSymlinks: true, 26 | output: { 27 | dir: 'dist', 28 | preserveModules: true, 29 | format: 'esm', 30 | sourcemap: true 31 | }, 32 | plugins: [nodeResolve(), swc()] 33 | }; 34 | } 35 | 36 | export default (args) => { 37 | return [getTargetES6(), getTargetDts()]; 38 | }; 39 | -------------------------------------------------------------------------------- /libs/inspector/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './inspector'; 2 | export * from './misc'; 3 | -------------------------------------------------------------------------------- /libs/inspector/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": false, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /libs/scene/README.md: -------------------------------------------------------------------------------- 1 | # @zephyr3d/scene 2 | 3 | Zephyr3d is a set of API for 3D rendering within the browser. 4 | 5 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 6 | 7 | ## Installation 8 | 9 | - @zephyr3d/base 10 | 11 | The basic module includes a math library and content commonly used in other modules. 12 | 13 | ```npm install --save @zephyr3d/base``` 14 | 15 | - @zephyr3d/device 16 | 17 | Includes the basic definitions and abstract interfaces of the rendering API. 18 | 19 | ```npm install --save @zephyr3d/device``` 20 | 21 | - @zephyr3d/backend-webgl 22 | 23 | WebGL backend, WebGL/WebGL2 rendering. 24 | 25 | ```npm install --save @zephyr3d/backend-webgl``` 26 | 27 | - @zephyr3d/backend-webgpu 28 | 29 | WebGPU backend. 30 | 31 | ```npm install --save @zephyr3d/backend-webgpu``` 32 | 33 | - @zephyr3d/scene 34 | 35 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 36 | 37 | ```npm install --save @zephyr3d/scene``` 38 | 39 | - @zephyr3d/imgui 40 | 41 | To render a GUI, you can install the ImGui binding module. 42 | 43 | ```npm install --save @zephyr3d/imgui``` 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /libs/scene/rollup.config.mjs: -------------------------------------------------------------------------------- 1 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 2 | import { swc } from 'rollup-plugin-swc3'; 3 | import dts from 'rollup-plugin-dts'; 4 | 5 | const externals = [/@zephyr3d\/base/, /@zephyr3d\/device/]; 6 | 7 | function getTargetDts() { 8 | return { 9 | input: './src/index.ts', 10 | output: [{ file: './dist/index.d.ts', format: 'es' }], 11 | plugins: [dts()] 12 | } 13 | } 14 | 15 | function getTargetES6() { 16 | return { 17 | external: (id) => { 18 | for (const m of externals) { 19 | if (m.test(id)) { 20 | return true; 21 | } 22 | } 23 | }, 24 | input: './src/index.ts', 25 | preserveSymlinks: true, 26 | output: { 27 | dir: 'dist', 28 | preserveModules: true, 29 | format: 'esm', 30 | sourcemap: true 31 | }, 32 | plugins: [ 33 | nodeResolve(), 34 | swc(), 35 | ] 36 | }; 37 | } 38 | 39 | export default (args) => { 40 | return [getTargetES6(), getTargetDts()]; 41 | }; 42 | -------------------------------------------------------------------------------- /libs/scene/src/animation/index.ts: -------------------------------------------------------------------------------- 1 | export * from './animation'; 2 | export * from './animationset'; 3 | export * from './animationtrack'; 4 | export * from './translationtrack'; 5 | export * from './rotationtrack'; 6 | export * from './eulerrotationtrack'; 7 | export * from './scaletrack'; 8 | export * from './skeleton'; 9 | -------------------------------------------------------------------------------- /libs/scene/src/asset/index.ts: -------------------------------------------------------------------------------- 1 | export * from './assetmanager'; 2 | export * from './model'; 3 | -------------------------------------------------------------------------------- /libs/scene/src/asset/loaders/gltf/index.ts: -------------------------------------------------------------------------------- 1 | export { GLTFLoader } from './gltf_loader'; 2 | -------------------------------------------------------------------------------- /libs/scene/src/blitter/copy.ts: -------------------------------------------------------------------------------- 1 | import type { BlitType } from './blitter'; 2 | import { Blitter } from './blitter'; 3 | import type { PBShaderExp, PBInsideFunctionScope } from '@zephyr3d/device'; 4 | 5 | /** 6 | * Copy blitter 7 | * @public 8 | */ 9 | export class CopyBlitter extends Blitter { 10 | /** 11 | * {@inheritDoc Blitter.filter} 12 | * @override 13 | */ 14 | filter( 15 | scope: PBInsideFunctionScope, 16 | type: BlitType, 17 | srcTex: PBShaderExp, 18 | srcUV: PBShaderExp, 19 | srcLayer: PBShaderExp, 20 | sampleType: 'float' | 'int' | 'uint' 21 | ): PBShaderExp { 22 | return this.readTexel(scope, type, srcTex, srcUV, srcLayer, sampleType); 23 | } 24 | /** 25 | * {@inheritDoc Blitter.calcHash} 26 | * @override 27 | */ 28 | protected calcHash(): string { 29 | return ''; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /libs/scene/src/blitter/index.ts: -------------------------------------------------------------------------------- 1 | export * from './blitter'; 2 | export * from './gaussianblur'; 3 | export * from './box'; 4 | export * from './copy'; 5 | -------------------------------------------------------------------------------- /libs/scene/src/camera/index.ts: -------------------------------------------------------------------------------- 1 | export * from './camera'; 2 | export * from './orthocamera'; 3 | export * from './perspectivecamera'; 4 | export * from './base'; 5 | export * from './fps'; 6 | export * from './orbit'; 7 | -------------------------------------------------------------------------------- /libs/scene/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This is a 3d rendering framework built on top of the \@zephyr3d/device api 3 | * 4 | * @packageDocumentation 5 | */ 6 | export * from './utility'; 7 | export * from './shapes'; 8 | export * from './render'; 9 | export * from './material'; 10 | export * from './render'; 11 | export * from './scene'; 12 | export * from './animation'; 13 | export * from './camera'; 14 | export * from './shaders'; 15 | export * from './shadow'; 16 | export * from './asset'; 17 | export * from './blitter'; 18 | export * from './values'; 19 | export * from './shaders'; 20 | export * from './posteffect'; 21 | export * from './app'; 22 | -------------------------------------------------------------------------------- /libs/scene/src/material/index.ts: -------------------------------------------------------------------------------- 1 | export * from './shader/helper'; 2 | export * from './lambert'; 3 | export * from './blinn'; 4 | export * from './unlit'; 5 | export * from './material'; 6 | export * from './meshmaterial'; 7 | export * from './grassmaterial'; 8 | export * from './terrainmaterial'; 9 | export * from './pbrmr'; 10 | export * from './pbrsg'; 11 | export * from './mixins/pbr/common'; 12 | export * from './mixins/lightmodel/pbrmetallicroughness'; 13 | export * from './mixins/lightmodel/pbrspecularglossness'; 14 | export * from './mixins/lightmodel/blinnphong'; 15 | export * from './mixins/lightmodel/lambert'; 16 | export * from './mixins/albedocolor'; 17 | export * from './mixins/lit'; 18 | export * from './mixins/texture'; 19 | export * from './mixins/vertexcolor'; 20 | export * from './mixins/foliage'; 21 | -------------------------------------------------------------------------------- /libs/scene/src/posteffect/index.ts: -------------------------------------------------------------------------------- 1 | export * from './posteffect'; 2 | export * from './grayscale'; 3 | export * from './tonemap'; 4 | export * from './bloom'; 5 | export * from './sao'; 6 | export * from './fxaa'; 7 | export * from './water'; 8 | export * from './compositor'; 9 | -------------------------------------------------------------------------------- /libs/scene/src/render/fullscreenquad.ts: -------------------------------------------------------------------------------- 1 | import type { RenderStateSet, VertexLayout } from '@zephyr3d/device'; 2 | import { Application } from '../app'; 3 | 4 | let quadVertexLayout: VertexLayout = null; 5 | let quadRenderStateSet: RenderStateSet = null; 6 | 7 | export function drawFullscreenQuad(renderStates?: RenderStateSet) { 8 | const device = Application.instance.device; 9 | if (!quadVertexLayout) { 10 | quadVertexLayout = device.createVertexLayout({ 11 | vertexBuffers: [ 12 | { 13 | buffer: device.createVertexBuffer('position_f32x2', new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1])) 14 | } 15 | ] 16 | }); 17 | } 18 | if (!quadRenderStateSet) { 19 | quadRenderStateSet = device.createRenderStateSet(); 20 | quadRenderStateSet.useRasterizerState().setCullMode('none'); 21 | quadRenderStateSet.useDepthState().enableTest(false).enableWrite(false); 22 | } 23 | const saveRenderStateSet = device.getRenderStates(); 24 | device.setRenderStates(renderStates ?? quadRenderStateSet); 25 | device.setVertexLayout(quadVertexLayout); 26 | device.draw('triangle-strip', 0, 4); 27 | device.setRenderStates(saveRenderStateSet); 28 | } 29 | -------------------------------------------------------------------------------- /libs/scene/src/render/index.ts: -------------------------------------------------------------------------------- 1 | export * from './drawable'; 2 | export * from './renderpass'; 3 | export * from './renderer'; 4 | export * from './lightpass'; 5 | export * from './shadowmap_pass'; 6 | export * from './depthpass'; 7 | export * from './render_queue'; 8 | export * from './sky'; 9 | export * from './clipmap'; 10 | export * from './envlight'; 11 | export * from './primitive'; 12 | export * from './cull_visitor'; 13 | export * from './watermesh'; 14 | export * from './oit'; 15 | export * from './weightedblended_oit'; 16 | export * from './abuffer_oit'; 17 | export * from './wavegenerator'; 18 | export * from './fft_wavegenerator'; 19 | export * from './gerstner_wavegenerator'; 20 | -------------------------------------------------------------------------------- /libs/scene/src/scene/index.ts: -------------------------------------------------------------------------------- 1 | export * from './scene'; 2 | export * from './environment'; 3 | export * from './graph_node'; 4 | export * from './light'; 5 | export * from './mesh'; 6 | export * from './octree'; 7 | export * from './scene_node'; 8 | export * from './batchgroup'; 9 | export * from './scene'; 10 | export * from './terrain'; 11 | export * from './xform'; 12 | export * from './visitor'; 13 | -------------------------------------------------------------------------------- /libs/scene/src/scene/terrain/index.ts: -------------------------------------------------------------------------------- 1 | export * from './terrain'; 2 | export * from './heightfield'; 3 | export * from './patch'; 4 | export * from './quadtree'; 5 | -------------------------------------------------------------------------------- /libs/scene/src/scene/visitor.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Visior 3 | * @public 4 | */ 5 | export interface Visitor { 6 | visit(target: T): unknown; 7 | } 8 | -------------------------------------------------------------------------------- /libs/scene/src/shaders/index.ts: -------------------------------------------------------------------------------- 1 | export * from './misc'; 2 | export * from './noise'; 3 | export * from './water'; 4 | -------------------------------------------------------------------------------- /libs/scene/src/shadow/index.ts: -------------------------------------------------------------------------------- 1 | export * from './shadowmapper'; 2 | export * from './esm'; 3 | export * from './pcf_pd'; 4 | export * from './pcf_opt'; 5 | export * from './vsm'; 6 | -------------------------------------------------------------------------------- /libs/scene/src/shapes/index.ts: -------------------------------------------------------------------------------- 1 | export * from './shape'; 2 | export * from './box'; 3 | export * from './cylinder'; 4 | export * from './torus'; 5 | export * from './plane'; 6 | export * from './sphere'; 7 | -------------------------------------------------------------------------------- /libs/scene/src/utility/index.ts: -------------------------------------------------------------------------------- 1 | export * from './pmrem'; 2 | export * from './panorama'; 3 | export * from './shprojection'; 4 | export * from './aabbtree'; 5 | export * from './bounding_volume'; 6 | export * from './textures/gradientnoise'; 7 | export * from './textures/randomnoise'; 8 | -------------------------------------------------------------------------------- /libs/scene/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": false, 19 | "keyofStringsOnly": false, 20 | "rootDir": "./src", 21 | "declaration": true, 22 | "importHelpers": false, 23 | "typeRoots": ["./node_modules/@types"] 24 | }, 25 | "include": ["./src"], 26 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts", "tests"] 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@zephyr3d/root", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "lint-libs": "eslint \"libs/**/*.ts\" -f compact", 7 | "lint-test": "eslint \"test/**/*.ts\" -f compact", 8 | "lint-examples": "eslint \"examples/**/*.ts\" -f compact", 9 | "lint": "npm run lint-libs && npm run lint-test && npm run lint-examples", 10 | "lint-fix-site": "eslint --fix \"site/src/**/*.ts\" -f compact", 11 | "lint-fix-libs": "eslint --fix \"libs/**/*.ts\" -f compact", 12 | "lint-fix-test": "eslint --fix \"test/**/*.ts\" -f compact", 13 | "lint-fix-examples": "eslint --fix \"examples/**/*.ts\" -f compact", 14 | "lint-fix": "npm run lint-fix-libs && npm run lint-fix-test && npm run lint-fix-examples && npm run lint-fix-site" 15 | }, 16 | "devDependencies": { 17 | "eslint": "^8.33.0", 18 | "typescript": "^5.1.3", 19 | "@rollup/plugin-commonjs":"^25.0.1", 20 | "eslint-config-prettier": "^8.6.0", 21 | "eslint-plugin-import": "^2.27.5", 22 | "eslint-plugin-prettier": "^4.2.1", 23 | "prettier": "^2.8.4", 24 | "eslint-plugin-tsdoc": "^0.2.17", 25 | "@typescript-eslint/parser": "^5.51.0", 26 | "@typescript-eslint/eslint-plugin": "^5.51.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /site/assets/images/Wide_Street.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/Wide_Street.hdr -------------------------------------------------------------------------------- /site/assets/images/earthcolor.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/earthcolor.jpg -------------------------------------------------------------------------------- /site/assets/images/earthnormal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/earthnormal.png -------------------------------------------------------------------------------- /site/assets/images/environments/doge2.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/environments/doge2.hdr -------------------------------------------------------------------------------- /site/assets/images/environments/forest.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/environments/forest.hdr -------------------------------------------------------------------------------- /site/assets/images/environments/street_night.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/environments/street_night.hdr -------------------------------------------------------------------------------- /site/assets/images/environments/tower.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/environments/tower.hdr -------------------------------------------------------------------------------- /site/assets/images/fur-alpha.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/fur-alpha.png -------------------------------------------------------------------------------- /site/assets/images/fur-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/fur-color.png -------------------------------------------------------------------------------- /site/assets/images/grass1.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/grass1.dds -------------------------------------------------------------------------------- /site/assets/images/grass2.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/grass2.dds -------------------------------------------------------------------------------- /site/assets/images/layer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/layer.jpg -------------------------------------------------------------------------------- /site/assets/images/rocks.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/rocks.jpg -------------------------------------------------------------------------------- /site/assets/images/rocks_NM_height.tga: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/rocks_NM_height.tga -------------------------------------------------------------------------------- /site/assets/images/sky.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/images/sky.dds -------------------------------------------------------------------------------- /site/assets/js/ammo.wasm.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/js/ammo.wasm.wasm -------------------------------------------------------------------------------- /site/assets/js/draco_decoder.wasm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/js/draco_decoder.wasm -------------------------------------------------------------------------------- /site/assets/maps/map1/colormap.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/colormap.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/detail1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/detail1.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/detail1_norm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/detail1_norm.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/detail2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/detail2.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/detail2_norm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/detail2_norm.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/detail3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/detail3.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/detail3_norm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/detail3_norm.jpg -------------------------------------------------------------------------------- /site/assets/maps/map1/heightmap.raw: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/heightmap.raw -------------------------------------------------------------------------------- /site/assets/maps/map1/splatmap.tga: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/maps/map1/splatmap.tga -------------------------------------------------------------------------------- /site/assets/models/BoxTextured.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/BoxTextured.glb -------------------------------------------------------------------------------- /site/assets/models/CesiumMan.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/CesiumMan.glb -------------------------------------------------------------------------------- /site/assets/models/DamagedHelmet.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/DamagedHelmet.glb -------------------------------------------------------------------------------- /site/assets/models/Duck.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/Duck.glb -------------------------------------------------------------------------------- /site/assets/models/abandoned_building_room.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/abandoned_building_room.glb -------------------------------------------------------------------------------- /site/assets/models/cage/license.txt: -------------------------------------------------------------------------------- 1 | Model Information: 2 | * title: Medieval asset 19\ cage 3 | * source: https://sketchfab.com/3d-models/medieval-asset-19-cage-1fb5fb1fc62a4d22b819705273f79941 4 | * author: hamsterspit (https://sketchfab.com/hamsterspit) 5 | 6 | Model License: 7 | * license type: CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) 8 | * requirements: Author must be credited. Commercial use is allowed. 9 | 10 | If you use this 3D model in your project be sure to copy paste this credit wherever you share it: 11 | This work is based on "Medieval asset 19\ cage" (https://sketchfab.com/3d-models/medieval-asset-19-cage-1fb5fb1fc62a4d22b819705273f79941) by hamsterspit (https://sketchfab.com/hamsterspit) licensed under CC-BY-4.0 (http://creativecommons.org/licenses/by/4.0/) -------------------------------------------------------------------------------- /site/assets/models/cage/scene.bin: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/cage/scene.bin -------------------------------------------------------------------------------- /site/assets/models/cage/textures/Scene_-_Root_baseColor.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/cage/textures/Scene_-_Root_baseColor.jpeg -------------------------------------------------------------------------------- /site/assets/models/medieval_asset_19_cage.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/medieval_asset_19_cage.zip -------------------------------------------------------------------------------- /site/assets/models/sitting_room_with_baked_textures.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/sitting_room_with_baked_textures.glb -------------------------------------------------------------------------------- /site/assets/models/stone1.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/stone1.glb -------------------------------------------------------------------------------- /site/assets/models/stone2.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/models/stone2.glb -------------------------------------------------------------------------------- /site/assets/sponza.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/sponza.zip -------------------------------------------------------------------------------- /site/assets/terrain_assets.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/assets/terrain_assets.zip -------------------------------------------------------------------------------- /site/dummy.js: -------------------------------------------------------------------------------- 1 | // Dummy js for rollup build 2 | console.log('This is dummy js'); 3 | -------------------------------------------------------------------------------- /site/report/backend-webgl.api.md: -------------------------------------------------------------------------------- 1 | ## API Report File for "@zephyr3d/backend-webgl" 2 | 3 | > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). 4 | 5 | ```ts 6 | 7 | import * as _zephyr3d_device from '@zephyr3d/device'; 8 | 9 | // @public 10 | export const backendWebGL1: _zephyr3d_device.DeviceBackend; 11 | 12 | // @public 13 | export const backendWebGL2: _zephyr3d_device.DeviceBackend; 14 | 15 | // (No @packageDocumentation comment for this package) 16 | 17 | ``` 18 | -------------------------------------------------------------------------------- /site/report/backend-webgpu.api.md: -------------------------------------------------------------------------------- 1 | ## API Report File for "@zephyr3d/backend-webgpu" 2 | 3 | > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). 4 | 5 | ```ts 6 | 7 | import { DeviceBackend } from '@zephyr3d/device'; 8 | 9 | // @public 10 | export const backendWebGPU: DeviceBackend; 11 | 12 | // (No @packageDocumentation comment for this package) 13 | 14 | ``` 15 | -------------------------------------------------------------------------------- /site/rewrite-markdown.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const path = require('path'); 3 | 4 | const markdownDir = path.join(__dirname, 'dist', 'web', 'doc', 'markdown'); 5 | const r = /(\[[^\]]+\])\(([^\)]+\.md)\)/g; 6 | fs.readdirSync(markdownDir).forEach((file) => { 7 | const fullpath = path.join(markdownDir, file); 8 | if (fullpath.endsWith('.md') && fs.statSync(fullpath).isFile()) { 9 | const content = fs.readFileSync(fullpath, { encoding: 'utf-8' }); 10 | const newcontent = content.replaceAll(r, '$1(doc/markdown/$2'); 11 | if (newcontent !== content) { 12 | fs.writeFileSync(fullpath, newcontent, { encoding: 'utf-8' }); 13 | } 14 | } 15 | }); 16 | -------------------------------------------------------------------------------- /site/rollup.config.showcase.mjs: -------------------------------------------------------------------------------- 1 | import { swc } from 'rollup-plugin-swc3'; 2 | import { nodeResolve } from '@rollup/plugin-node-resolve'; 3 | import { fileURLToPath } from 'url'; 4 | import path from 'path'; 5 | import commonjs from '@rollup/plugin-commonjs'; 6 | import css from 'rollup-plugin-import-css'; 7 | 8 | const __filename = fileURLToPath(import.meta.url); 9 | const __dirname = path.dirname(__filename); 10 | 11 | function getWebTarget() { 12 | return { 13 | input: path.join(__dirname, 'web', 'js', 'showcase.js'), 14 | preserveSymlinks: false, 15 | output: { 16 | file: path.join(__dirname, 'dist', 'web', 'js', `showcase.js`), 17 | format: 'esm', 18 | sourcemap: true 19 | }, 20 | plugins: [ 21 | css(), 22 | nodeResolve(), 23 | commonjs(), 24 | swc(), 25 | // terser(), 26 | ] 27 | }; 28 | } 29 | 30 | export default (args) => { 31 | return [getWebTarget()]; 32 | }; 33 | -------------------------------------------------------------------------------- /site/src/demo-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /site/src/demo-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /site/src/demo-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 26 | 27 | 28 | 29 |
30 | 34 |
35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /site/src/demo-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /site/src/demo-4/ui.ts: -------------------------------------------------------------------------------- 1 | import { GUI } from 'lil-gui'; 2 | import { Application } from '@zephyr3d/scene'; 3 | 4 | interface GUIParams { 5 | deviceType: string; 6 | FPS: string; 7 | } 8 | 9 | export class Panel { 10 | private _deviceList: string[]; 11 | private _params: GUIParams; 12 | private _gui: GUI; 13 | constructor() { 14 | this._deviceList = ['WebGL2', 'WebGPU']; 15 | this._params = { 16 | deviceType: 17 | this._deviceList[ 18 | this._deviceList.findIndex((val) => val.toLowerCase() === Application.instance.device.type) 19 | ], 20 | FPS: '' 21 | }; 22 | this._gui = new GUI({ container: document.body }); 23 | this.create(); 24 | } 25 | create() { 26 | const systemSettings = this._gui.addFolder('System'); 27 | systemSettings 28 | .add(this._params, 'deviceType', this._deviceList) 29 | .name('Select device') 30 | .onChange((value) => { 31 | const url = new URL(window.location.href); 32 | url.searchParams.set('dev', value.toLowerCase()); 33 | window.location.href = url.href; 34 | }); 35 | const stats = this._gui.addFolder('Stats'); 36 | stats.add(this._params, 'FPS').name('FPS').disable(true).listen(); 37 | setInterval(() => { 38 | this._params.FPS = Application.instance.device.frameInfo.FPS.toFixed(2); 39 | }, 1000); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /site/src/demo-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /site/src/demo-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /site/src/demo-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 29 |
30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /site/src/demo-8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | zephyr3d demo 11 | 24 | 25 | 26 | 27 |
28 | 32 |
33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /site/src/sample-0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /site/src/sample-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /site/src/sample-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /site/src/sample-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /site/src/sample-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /site/src/sample-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cube - Zephyr3d example 6 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /site/src/tut-0/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-0/main.js: -------------------------------------------------------------------------------- 1 | // 引入Vector4 2 | import { Vector4 } from '@zephyr3d/base'; 3 | import { Application } from '@zephyr3d/scene'; 4 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 5 | 6 | // Create the application 7 | const myApp = new Application({ 8 | // Use WebGL2 as the rendering backend 9 | // We currently support three types of rendering backends: WebGL, WebGL2 and WebGPU. 10 | backend: backendWebGL2, 11 | // Canvas element 12 | canvas: document.querySelector('#my-canvas') 13 | }); 14 | 15 | // Wait for the rendering device to be ready 16 | myApp.ready().then(function () { 17 | // Frame event handler 18 | myApp.on('tick', function(){ 19 | // device is the rendering device, and we call its clearFrameBuffer method to clear the screen to green 20 | myApp.device.clearFrameBuffer(new Vector4(0, 1, 0, 1), 1, 0); 21 | }); 22 | // The app has been initialized and the rendering loop begins 23 | myApp.run(); 24 | }); 25 | -------------------------------------------------------------------------------- /site/src/tut-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-1/main.js: -------------------------------------------------------------------------------- 1 | import { Vector4 } from '@zephyr3d/base'; 2 | import { Application } from '@zephyr3d/scene'; 3 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 4 | 5 | // Create the application 6 | const myApp = new Application({ 7 | // Use WebGL2 as the rendering backend 8 | // We currently support three types of rendering backends: WebGL, WebGL2 and WebGPU. 9 | backend: backendWebGL2, 10 | // Canvas element 11 | canvas: document.querySelector('#my-canvas') 12 | }); 13 | 14 | // Wait for the rendering device to be ready 15 | myApp.ready().then(function () { 16 | let str = ''; 17 | // Define the clear color 18 | const clearColor = new Vector4(0, 0, 0, 1); 19 | // Set the font 20 | myApp.device.setFont('16px arial'); 21 | // Frame event handler 22 | myApp.on('tick', function () { 23 | // Clears the frame buffer 24 | myApp.device.clearFrameBuffer(clearColor, 1, 0); 25 | // Render some text onto the screen 26 | myApp.device.drawText(str, 30, 30, '#ffff00'); 27 | }); 28 | // handle pointer move 29 | myApp.on('pointermove', function (ev) { 30 | // Display text 31 | str = `X:${ev.offsetX.toFixed()} Y:${ev.offsetY.toFixed()}`; 32 | }); 33 | // The app has been initialized and the rendering loop begins 34 | myApp.run(); 35 | }); 36 | -------------------------------------------------------------------------------- /site/src/tut-10/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-10/main.js: -------------------------------------------------------------------------------- 1 | import { Vector3 } from '@zephyr3d/base'; 2 | import { Scene, Application, OrbitCameraController, PerspectiveCamera, Compositor, Tonemap, DirectionalLight, AssetManager } from '@zephyr3d/scene'; 3 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 4 | 5 | const myApp = new Application({ 6 | backend: backendWebGL2, 7 | canvas: document.querySelector('#my-canvas') 8 | }); 9 | 10 | myApp.ready().then(function () { 11 | // Create scene and light 12 | const scene = new Scene(); 13 | const light = new DirectionalLight(scene); 14 | light.lookAt(Vector3.one(), Vector3.zero(), Vector3.axisPY()); 15 | 16 | const assetManager = new AssetManager(); 17 | // Load a model 18 | assetManager.fetchModel(scene, 'assets/models/Duck.glb').then(info => { 19 | info.group.position.setXYZ(0, -0.5, 0); 20 | }); 21 | 22 | // Create camera 23 | const camera = new PerspectiveCamera(scene, Math.PI/3, myApp.device.canvas.width/myApp.device.canvas.height, 1, 100); 24 | camera.lookAt(new Vector3(0, 0, 3), Vector3.zero(), new Vector3(0, 1, 0)); 25 | camera.controller = new OrbitCameraController(); 26 | 27 | const compositor = new Compositor(); 28 | // Add a Tonemap post-processing effect 29 | compositor.appendPostEffect(new Tonemap()); 30 | 31 | myApp.inputManager.use(camera.handleEvent.bind(camera)); 32 | 33 | myApp.on('tick', function () { 34 | camera.updateController(); 35 | camera.render(scene, compositor); 36 | }); 37 | 38 | myApp.run(); 39 | }); 40 | -------------------------------------------------------------------------------- /site/src/tut-11/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-12/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-13/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-14/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-15/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-16/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-17/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-18/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-19/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-2/main.js: -------------------------------------------------------------------------------- 1 | import { Application, PerspectiveCamera } from '@zephyr3d/scene'; 2 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 3 | import { Scene } from '@zephyr3d/scene'; 4 | 5 | // Create the application 6 | const myApp = new Application({ 7 | // Use WebGL2 as the rendering backend 8 | // We currently support three types of rendering backends: WebGL, WebGL2 and WebGPU. 9 | backend: backendWebGL2, 10 | // Canvas element 11 | canvas: document.querySelector('#my-canvas') 12 | }); 13 | 14 | // Wait for the rendering device to be ready 15 | myApp.ready().then(function () { 16 | // Create scene 17 | const scene = new Scene(); 18 | // Create camera 19 | const camera = new PerspectiveCamera(scene, Math.PI/3, myApp.device.canvas.width/myApp.device.canvas.height, 1, 100); 20 | // Reset aspect ratio when size was changed 21 | myApp.on('resize', function(ev){ 22 | camera.aspect = ev.width / ev.height; 23 | }); 24 | // Frame event handler 25 | myApp.on('tick', function () { 26 | // Render scene 27 | camera.render(scene); 28 | }); 29 | // The app has been initialized and the rendering loop begins 30 | myApp.run(); 31 | }); 32 | -------------------------------------------------------------------------------- /site/src/tut-20/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-21/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-22/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-23/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-24/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-24/main.js: -------------------------------------------------------------------------------- 1 | import { Vector3 } from '@zephyr3d/base'; 2 | import { Scene, OrbitCameraController, AssetManager, Application, PerspectiveCamera } from '@zephyr3d/scene'; 3 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 4 | 5 | const myApp = new Application({ 6 | backend: backendWebGL2, 7 | canvas: document.querySelector('#my-canvas') 8 | }); 9 | 10 | myApp.ready().then(async () => { 11 | const scene = new Scene(); 12 | 13 | const assetManager = new AssetManager(); 14 | const actor = await assetManager.fetchModel(scene, 'assets/models/CesiumMan.glb'); 15 | actor.group.scale.setXYZ(10, 10, 10); 16 | actor.animationSet.playAnimation(actor.animationSet.getAnimationNames()[0], 0); 17 | 18 | // Create camera 19 | const camera = new PerspectiveCamera(scene, Math.PI/3, myApp.device.canvas.width/myApp.device.canvas.height, 1, 600); 20 | camera.lookAt(new Vector3(0, 8, 30), new Vector3(0, 8, 0), Vector3.axisPY()); 21 | camera.controller = new OrbitCameraController({ center: new Vector3(0, 8, 0) }); 22 | 23 | myApp.inputManager.use(camera.handleEvent.bind(camera)); 24 | 25 | myApp.on('tick', () => { 26 | camera.updateController(); 27 | camera.render(scene); 28 | }); 29 | 30 | myApp.run(); 31 | }); 32 | -------------------------------------------------------------------------------- /site/src/tut-25/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-26/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-27/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-28/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-29/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-3/main.js: -------------------------------------------------------------------------------- 1 | import { Application, Compositor, PerspectiveCamera, Tonemap } from '@zephyr3d/scene'; 2 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 3 | import { Scene } from '@zephyr3d/scene'; 4 | 5 | // Create the application 6 | const myApp = new Application({ 7 | // Use WebGL2 as the rendering backend 8 | // We currently support three types of rendering backends: WebGL, WebGL2 and WebGPU. 9 | backend: backendWebGL2, 10 | // Canvas element 11 | canvas: document.querySelector('#my-canvas') 12 | }); 13 | 14 | // Wait for the rendering device to be ready 15 | myApp.ready().then(function () { 16 | // Create scene 17 | const scene = new Scene(); 18 | // Create camera 19 | const camera = new PerspectiveCamera(scene, Math.PI/3, myApp.device.canvas.width/myApp.device.canvas.height, 1, 100); 20 | const compositor = new Compositor(); 21 | // Add a Tonemap post-processing effect 22 | compositor.appendPostEffect(new Tonemap()); 23 | // Frame event handler 24 | myApp.on('tick', function () { 25 | // Render scene 26 | camera.render(scene, compositor); 27 | }); 28 | myApp.run(); 29 | }); 30 | -------------------------------------------------------------------------------- /site/src/tut-30/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-31/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-32/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-32/main.js: -------------------------------------------------------------------------------- 1 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 2 | import { Vector3 } from '@zephyr3d/base'; 3 | import { Scene, AssetManager, Application, PerspectiveCamera, OrbitCameraController } from '@zephyr3d/scene'; 4 | 5 | const myApp = new Application({ 6 | backend: backendWebGL2, 7 | canvas: document.querySelector('#my-canvas') 8 | }); 9 | 10 | 11 | myApp.ready().then(async() => { 12 | const device = myApp.device; 13 | 14 | // Create scene 15 | const scene = new Scene(); 16 | 17 | // Create camera 18 | const camera = new PerspectiveCamera(scene, Math.PI/3, device.canvas.width / device.canvas.height, 1, 500); 19 | camera.controller = new OrbitCameraController({ center: new Vector3(0, 0, 1) }); 20 | myApp.inputManager.use(camera.handleEvent.bind(camera)); 21 | 22 | // Load skybox texture 23 | const assetManager = new AssetManager(); 24 | /** @type {import('@zephyr3d/device').TextureCube} */ 25 | const skyboxTexture = await assetManager.fetchTexture('assets/images/sky.dds'); 26 | 27 | // Set the sky rendering mode to Skybox 28 | scene.env.sky.skyType = 'skybox'; 29 | // Set skybox texture 30 | scene.env.sky.skyboxTexture = skyboxTexture; 31 | 32 | // Reset aspect ratio when size was changed 33 | myApp.on('resize', ev => { 34 | camera.aspect = ev.width / ev.height; 35 | }); 36 | 37 | myApp.on('tick', function () { 38 | camera.updateController(); 39 | camera.render(scene); 40 | }); 41 | 42 | myApp.run(); 43 | }); 44 | -------------------------------------------------------------------------------- /site/src/tut-33/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-34/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-35/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-36/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-37/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-38/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-39/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-4/main.js: -------------------------------------------------------------------------------- 1 | import { Application, Compositor, OrbitCameraController, PerspectiveCamera, Tonemap } from '@zephyr3d/scene'; 2 | import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 3 | import { Scene } from '@zephyr3d/scene'; 4 | import { Vector3 } from '@zephyr3d/base'; 5 | 6 | // Create the application 7 | const myApp = new Application({ 8 | // Use WebGL2 as the rendering backend 9 | // We currently support three types of rendering backends: WebGL, WebGL2 and WebGPU. 10 | backend: backendWebGL2, 11 | // Canvas element 12 | canvas: document.querySelector('#my-canvas') 13 | }); 14 | 15 | // Wait for the rendering device to be ready 16 | myApp.ready().then(function () { 17 | // Create scene 18 | const scene = new Scene(); 19 | // Create camera 20 | const camera = new PerspectiveCamera(scene, Math.PI/3, myApp.device.canvas.width/myApp.device.canvas.height, 1, 100); 21 | // Set camera controller 22 | camera.controller = new OrbitCameraController({ center: new Vector3(0, 0, 1) }); 23 | const compositor = new Compositor(); 24 | // Add a Tonemap post-processing effect 25 | compositor.appendPostEffect(new Tonemap()); 26 | // Input handler middleware for camera controll 27 | myApp.inputManager.use(camera.handleEvent.bind(camera)); 28 | // Frame event handler 29 | myApp.on('tick', function () { 30 | // Update camera controller state 31 | camera.updateController(); 32 | // Render scene 33 | camera.render(scene, compositor); 34 | }); 35 | myApp.run(); 36 | }); 37 | -------------------------------------------------------------------------------- /site/src/tut-40/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-41/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-42/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-43/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-44/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-45/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-46/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-47/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-48/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-49/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d showcase 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-5/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-6/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-7/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-8/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/src/tut-9/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Zephyr3d test 6 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /site/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": ["es2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowJs": true, 15 | "checkJs": true, 16 | "allowSyntheticDefaultImports": true, 17 | "experimentalDecorators": false, 18 | "emitDecoratorMetadata": false, 19 | "sourceMap": true, 20 | "noEmit": true, 21 | "outDir": "dist", 22 | "stripInternal": true, 23 | "sourceRoot": "./src", 24 | "typeRoots": ["./node_modules/@webgpu/types", "./types"], 25 | "types": ["ammo-wasm"] 26 | }, 27 | "include": ["./src"], 28 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts"] 29 | } 30 | -------------------------------------------------------------------------------- /site/web/.nojekyll: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/.nojekyll -------------------------------------------------------------------------------- /site/web/css/doc.css: -------------------------------------------------------------------------------- 1 | .app-nav { 2 | margin: 25px 60px 0 0; 3 | position: absolute; 4 | right: 0; 5 | text-align: right; 6 | } 7 | -------------------------------------------------------------------------------- /site/web/css/showcase.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | html, 6 | body { 7 | width: 100vw; 8 | height: 100vh; 9 | } 10 | canvas { 11 | position: absolute; 12 | left: 0; 13 | top: 0; 14 | width: 100%; 15 | height: 100%; 16 | } 17 | -------------------------------------------------------------------------------- /site/web/css/var.css: -------------------------------------------------------------------------------- 1 | html { 2 | --siteFont: PT Sans; 3 | --defaultTheme: dark; 4 | --codeFontFamily: ui-monospace, Menlo, Roboto Mono, Monaco, Consolas, monospace; 5 | --bodyFontSize: 17px; 6 | --accent: #42b983; 7 | --toogleBackground: #ffffff; 8 | --background: #091a28; 9 | --textColor: #b4b4b4; 10 | --codeTextColor: #ffffff; 11 | --codeBackgroundColor: #0e2233; 12 | --borderColor: #0d2538; 13 | --blockQuoteColor: #858585; 14 | --highlightColor: #d22778; 15 | --sidebarSublink: #b4b4b4; 16 | --codeTypeColor: #ffffff; 17 | --coverBackground: #0c2057; 18 | --toogleImage: url(https://cdn.jsdelivr.net/npm/docsify-darklight-theme@latest/icons/sun.svg); 19 | --color-scheme: dark; 20 | } -------------------------------------------------------------------------------- /site/web/en/README.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | # 简介 7 | 8 | Zephyr3d是一组支持在浏览器中进行3D渲染的API接口，支持WebGL/WebGL2/WebGPU. 9 | 10 | 它主要包括两个部分：Device API 和 Scene API.
11 | 12 | ### Device API 13 | 14 | Device API通过抽象化的封装，允许用户使用一套统一的接口来一致的方法来调用WebGL和WebGPU渲染功能。
15 | 主要功能包括: 16 | 17 | - 全面支持WebGL，WebGL2和WebGPU。 18 | - 使用javascript编写shader，无需了解GLSL或WGSL。 19 | - 类似于WebGPU架构, 使用绑定组(Bind group)来管理着色器资源。 20 | 21 | Device API提供了跨底层API的能力，适合用于编写自己的渲染框架。 22 | 23 | ### Scene API 24 | 25 | Scene API是建立于Device API之上的一个高级渲染框架。
26 | 主要功能包括: 27 | 28 | - PBR渲染及IBL光照。 29 | - Clustered光照渲染器，支持WebGL/WebGL2/WebGPU。 30 | - 导入GLTF模型。 31 | - 基于Octree的裁剪与拾取。 32 | - 骨骼动画，帧动画 33 | - 基于ChunkedLOD的地形渲染 34 | - Linear/Exp/Exp2雾 35 | - HDR渲染 36 | - PCF/ESM/VSM Shadow Map 37 | - Cascaded Shadow Map 38 | - 集成ImGUI 39 | 40 | Scene API适合用于快速开发。 41 | 42 | [Examples](/examples/index.html). 43 | -------------------------------------------------------------------------------- /site/web/en/_coverpage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > The 3D rendering API of the web platform fully supports WebGL/WebGL2/WebGPU 4 | 5 | - Easy to use. 6 | - Seamlessly supports WebGL and WebGPU. 7 | - Write shaders using native Javascript without the need to learn GLSL and WGSL. 8 | - Offers a comprehensive low-level API wrapper, making it convenient for developing your own rendering framework. 9 | 10 | [GitHub](https://github.com/gavinyork/zephyr3d/) 11 | [API](doc/markdown/index.md) 12 | [Quick start](/en/intro) 13 | 14 | ![color](#308080) 15 | -------------------------------------------------------------------------------- /site/web/en/_navbar.md: -------------------------------------------------------------------------------- 1 | - Language ▾ 2 | - [English](/en/) 3 | - [简体中文](/zh-cn/) 4 | 5 | - [API](doc/markdown/index.md)     6 | -------------------------------------------------------------------------------- /site/web/en/animation-intro.md: -------------------------------------------------------------------------------- 1 | # Animation 2 | 3 | Currently, we support skeletal animation and keyframe animation. 4 | 5 | The following classes are related to animation playback: 6 | 7 | - [AnimationClip](/doc/markdown/./scene.animationclip) 8 | 9 | AnimationClip is an animation instance that contains several animation tracks, with each track controlling a scene node. 10 | 11 | - [AnimationSet](/doc/markdown/./scene.animationset) 12 | 13 | AnimationSet is a collection of AnimationClips, used to control the playback and stopping of animations in the collection. 14 | 15 | - [AnimationTrack](/doc/markdown/./scene.animationtrack) 16 | 17 | AnimationTrack serves as the abstract base class for all types of animation tracks. 18 | 19 | - [TranslationTrack](/doc/markdown/./scene.translationtrack) 20 | 21 | A class for animation tracks that control the translation of scene nodes. 22 | 23 | - [RotationTrack](/doc/markdown/./scene.rotationtrack) 24 | 25 | A class for animation tracks that control the rotation of scene nodes, storing keyframes as Quaternions. 26 | 27 | - [EulerRotationTrack](/doc/markdown/./scene.eulerrotationtrack) 28 | 29 | A class for animation tracks that control the rotation of scene nodes, storing keyframes as Euler angles. 30 | 31 | - [ScaleTrack](/doc/markdown/./scene.scaletrack) 32 | 33 | A class for animation tracks that control the scaling of scene nodes. 34 | 35 | -------------------------------------------------------------------------------- /site/web/en/devicesamples.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | ## Triangle 4 | 5 |
6 | 7 | ## Cube 8 | 9 |
10 | 11 | ## Render to texture 12 | 13 |
14 | 15 | ## Instancing 16 | 17 |
18 | 19 | ## Stencil outline 20 | 21 |
22 | 23 | ## Compute shader 24 | 25 |
26 | -------------------------------------------------------------------------------- /site/web/en/fog.md: -------------------------------------------------------------------------------- 1 | # Fog 2 | 3 | Fog effects are used to simulate the natural phenomenon where objects become increasingly blurry with distance, enhancing the realism of rendered scenes. We support fog effects based on true atmospheric scattering algorithms, as well as traditional linear and exponential fog algorithms. 4 | 5 | ## Atmospheric scattering 6 | 7 | ```javascript 8 | 9 | // Set to atmospheric scattering fog effect (usually required in conjunction with atmospheric scattering sky rendering mode) 10 | scene.env.sky.fogType = 'scatter'; 11 | // When using the Atmospheric Scatter Fog effect, this property adjusts the fog density. 12 | scene.env.sky.aerialPerspectiveDensity = 100; 13 | 14 | ``` 15 | 16 |
17 | 18 | ## Linear fog 19 | 20 | ```javascript 21 | 22 | // Set to linear fog 23 | scene.env.sky.fogType = 'linear'; 24 | // Starting distance 25 | scene.env.sky.fogStart = 10; 26 | // End distance 27 | scene.env.sky.fogEnd = 400; 28 | // Fog height 29 | scene.env.sky.fogTop = 120; 30 | 31 | ``` 32 | 33 |
34 | 35 | ## Exp/Exp2 fog 36 | 37 | ```javascript 38 | 39 | // Set to exp fog 40 | scene.env.sky.fogType = 'exp'; 41 | // Set to exp2 fog 42 | scene.env.sky.fogType = 'exp2'; 43 | 44 | // Fog density 45 | scene.env.sky.fogDensity = 0.006; 46 | 47 | ``` 48 | 49 |
50 | -------------------------------------------------------------------------------- /site/web/en/gltf.md: -------------------------------------------------------------------------------- 1 | # GLTF viewer 2 |
3 | -------------------------------------------------------------------------------- /site/web/en/installation.md: -------------------------------------------------------------------------------- 1 | # Installation 2 | 3 | Zephyr3d is released as ES6 modules and requires npm for installation. It is designed to be used in conjunction with front-end build tools such as Webpack or Vite for development. 4 | 5 | - @zephyr3d/base 6 | 7 | The basic module includes a math library and content commonly used in other modules. 8 | 9 | ```npm install --save @zephyr3d/base``` 10 | 11 | - @zephyr3d/device 12 | 13 | Includes the basic definitions and abstract interfaces of the rendering API. 14 | 15 | ```npm install --save @zephyr3d/device``` 16 | 17 | - @zephyr3d/backend-webgl 18 | 19 | WebGL backend, WebGL/WebGL2 rendering. 20 | 21 | ```npm install --save @zephyr3d/backend-webgl``` 22 | 23 | - @zephyr3d/backend-webgpu 24 | 25 | WebGPU backend. 26 | 27 | ```npm install --save @zephyr3d/backend-webgpu``` 28 | 29 | - @zephyr3d/scene 30 | 31 | The SceneAPI module, built on top of the DeviceAPI module, facilitates rapid development of rendering projects. 32 | 33 | ```npm install --save @zephyr3d/scene``` 34 | 35 | - @zephyr3d/imgui 36 | 37 | To render a GUI, you can install the ImGui binding module. 38 | 39 | ```npm install --save @zephyr3d/imgui``` 40 | 41 | -------------------------------------------------------------------------------- /site/web/en/lighting-intro.md: -------------------------------------------------------------------------------- 1 | # Lighting 2 | 3 | Lighting is an essential element in making scenes look more realistic. 4 | 5 | ## Direct lighting 6 | 7 | Direct lighting refers to objects being illuminated by specific light sources. Currently, we support directional, point, and spot lights. 8 | 9 | We utilize Clustered Lighting technology, supporting up to 255 light sources within the view frustum. For WebGL devices, each pixel can receive illumination from up to 8 lights, while for WebGL2 and WebGPU devices, each pixel can be illuminated by up to 16 lights. 10 | 11 | ## Indirect lighting 12 | 13 | Objects are not illuminated directly by a light source but by light reflected from other objects in the scene. This type of lighting is known as indirect illumination. The source of this illumination is referred to as ambient light. 14 | 15 | Currently, we support Image-Based Lighting (IBL) and hemispherical skylight for indirect illumination. 16 | -------------------------------------------------------------------------------- /site/web/en/multi-views.md: -------------------------------------------------------------------------------- 1 | # Multi-viewport Rendering 2 | 3 | Zephyr3d supports rendering multiple viewports on the screen, which can be used to 4 | achieve effects like triple views or picture-in-picture. 5 | 6 | You can do this by setting the [Camera.viewport](/doc/markdown/./scene.camera.viewport) 7 | property. When the Camera.render() method is called, the scene will be rendered within 8 | the area indicated by the viewport property. 9 | 10 | **Note that in Zephyr3d, the origin of the viewport is located at the bottom left corner.** 11 | 12 | The following code demonstrates how to render the scene twice using the same Camera to 13 | achieve a picture-in-picture effect. 14 | 15 |
-------------------------------------------------------------------------------- /site/web/en/posteffect-bloom.md: -------------------------------------------------------------------------------- 1 | # Bloom 2 | 3 | The bloom effect is designed to create a soft, glowing effect from the bright areas in rendered images and is also placed in the Transparent group. 4 | 5 | Applying the bloom effect to HDR images can result in noticeable highlight flickering. It is recommended to apply it after tone mapping. 6 | 7 | ```javascript 8 | 9 | // Create a Compostor instance 10 | const compositor = new Compositor(); 11 | // Create a post-processing instance for Bloom 12 | const bloom = new Bloom(); 13 | // The brightness threshold, the part below this value will not produce glow, default value is 0.8 14 | bloom.threshold = 0.85; 15 | // Intensity, the higher the value, the stronger the glow effect, the default value is 1 16 | bloom.intensity = 2; 17 | // Minimum texture size of the downsample, default value is 32 18 | bloom.downsampleLimit = 64; 19 | // Adds the effect to Compostor 20 | compositor.appendPostEffect(bloom); 21 | // ... 22 | // Render the scene 23 | camera.render(scene, compositor); 24 | 25 | ``` 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /site/web/en/posteffect-fxaa.md: -------------------------------------------------------------------------------- 1 | # FXAA 2 | 3 | Fast Approximate Anti-Aliasing (FXAA) is a screen-space anti-aliasing technique. It is in the Transparent group. 4 | 5 | ```javascript 6 | 7 | // Create a Compostor instance 8 | const compositor = new Compositor(); 9 | // Create a post-processing instance for SAO 10 | const fxaa = new FXAA(); 11 | // Adds the effect to Compostor 12 | compositor.appendPostEffect(fxaa); 13 | // ... 14 | // Render the scene 15 | camera.render(scene, compositor); 16 | 17 | ``` 18 | 19 |
20 | -------------------------------------------------------------------------------- /site/web/en/posteffect-intro.md: -------------------------------------------------------------------------------- 1 | # Post Processing 2 | 3 | Post-processing allows you to add 2D effects to images after the scene has been rendered. 4 | 5 | We manage post-processing effects using the [Compositor](/doc/markdown/./scene.compositor) object. The Compositor can add multiple post-processing effects, each taking the rendering result of the previous one as input, forming a chain of calls. During rendering, simply use the Compositor object as the second argument in the Camera.render() function. 6 | 7 | Our post-processing effects are divided into two groups: Opaque and Transparent. The Opaque group is called after rendering opaque objects but before rendering transparent objects. The Transparent group is called after both transparent and opaque objects have been rendered. Each post-processing effect is defaulted to either the Opaque or Transparent group based on its application. Within each group, the order of effect calls follows the order in which they were added. 8 | 9 | -------------------------------------------------------------------------------- /site/web/en/posteffect-sao.md: -------------------------------------------------------------------------------- 1 | # SAO 2 | 3 | SAO is a screen-space AO algorithm designed to approximate shadows from indirect light, enhancing the realism of rendered scenes. It is part of the Opacity group. 4 | 5 | ```javascript 6 | 7 | // Create a Compostor instance 8 | const compositor = new Compositor(); 9 | // Create a post-processing instance for SAO 10 | const ssao = new SAO(); 11 | // Depth detection range, default value is 100 12 | ssao.radius = 80; 13 | // Intensity, the higher the value, the stronger the shadow, the default value is 0.05 14 | ssao.intensity = 0.04; 15 | // Blur radius, default is 8 16 | ssao.blurKernelRadius = 10; 17 | // Adds the effect to Compostor 18 | compositor.appendPostEffect(ssao); 19 | // ... 20 | // Render the scene 21 | camera.render(scene, compositor); 22 | 23 | ``` 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /site/web/en/posteffect-tonemap.md: -------------------------------------------------------------------------------- 1 | # Tone mapping 2 | 3 | Tone mapping is a process used to convert HDR images to LDR ones, and it's categorized under the Transparent group. Our tone mapping utilizes the ACES encoding system. 4 | 5 | ```javascript 6 | 7 | // Create a Composto instance 8 | const compositor = new Compositor(); 9 | // Create a post-processing instance of tone mapping 10 | const tonemap = new Tonemap(); 11 | // Exposure, default is 1 12 | tonemap.exposure = 1.5; 13 | // Adds the effect to Compostor 14 | compositor.appendPostEffect(tonemap) 15 | // ... 16 | // Render the scene 17 | camera.render(scene, compositor); 18 | 19 | ``` 20 | 21 |
22 | 23 | -------------------------------------------------------------------------------- /site/web/en/renderstate.md: -------------------------------------------------------------------------------- 1 | # Rendering states 2 | 3 | We use the [RenderStateSet](/doc/markdown/./device.renderstateset) interface to manage rendering states. 4 | 5 | ```javascript 6 | 7 | // Creates an object that manage rendering states 8 | const renderStateSet = device.createRenderStateSet(); 9 | 10 | // Customize the AlphaBlending state, if not called, The default value will be used. 11 | const blendingState = renderStateSet.useBlendingState(); 12 | blendingState.enable(true).setBlendFunc('one', 'one'); 13 | 14 | // Customize the depth state. 15 | const depthState = renderStateSet.useDepthState(); 16 | depthState.enableTest(false).enableWrite(false); 17 | 18 | // Set to the current render state before rendering. 19 | device.setRenderStates(renderStateSet); 20 | 21 | ``` 22 | 23 | Note: We do not support setting the vertex winding order (CW/CCW) state. If reversal is needed, call [Device.reverseVertexWindingOrder()](/doc/markdown/./device.abstractdevice.reversevertexwindingorder). 24 | -------------------------------------------------------------------------------- /site/web/en/shadow-intro.md: -------------------------------------------------------------------------------- 1 | # Shadow 2 | 3 | Shadows add depth and realism to scenes. Currently, we support casting shadows with directional, point, and spotlight sources. 4 | 5 | ## Enable shadow 6 | 7 | Each light source can be individually configured to cast shadows or not, along with settings for shadow mode and quality parameters. 8 | 9 | ```javascript 10 | 11 | const light = new DirectionalLight(scene); 12 | // The castShadow property controls whether the light casts shadows 13 | light.castShadow = true; 14 | 15 | ``` 16 | 17 | ## Shadows of directional light： 18 | 19 |
20 | 21 | ## Shadows of point light： 22 | 23 |
24 | 25 | ## Shadows of spot light： 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /site/web/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/favicon.ico -------------------------------------------------------------------------------- /site/web/intro.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | 3 | Zephyr3d is a set of APIs for 3D rendering in the browser.
4 | It is a thin wrapper for WebGL and WebGPU and provides a unified interface to access these two APIs.
5 | The most important feature is that it allows you to write shaders in javascript without knowing GLSL and WGSL.
6 | In addition, Zephyr3d provides a built-in rendering framework powered by this set of APIs. 7 | 8 | ## Low level API features 9 | 10 | - Unified API interface for WebGL1/WebGL2/WebGPU device 11 | - GPU computing support for WebGPU device 12 | - Writing shaders directly using javascript without knowing the GLSL/WGSL language 13 | - Shaders are totally generated on the fly 14 | - Take care of the different coordinate systems of WebGL and WebGPU 15 | 16 | ## High level framework features 17 | 18 | - Physically based rendering with IBL support 19 | - Importing of GLTF models 20 | - Importing of JPG/PNG/DDS/HDR textures 21 | - Loose-octree based geometry culling and picking 22 | - Skeletal animation and keyframe animation 23 | - Automatically geometry instancing 24 | - ChunkedLOD based terrain rendering 25 | - Linear/Exp/Exp2 fogging 26 | - HDR rendering 27 | - Shadow maps with PCF/ESM/VSM support 28 | - Cascaded shadow maps 29 | - Built-in imgui integration 30 | 31 | ## Examples 32 | 33 | Check out the [Examples](/examples/index.html). 34 | 35 | -------------------------------------------------------------------------------- /site/web/media/commandbufferreuse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/commandbufferreuse.jpg -------------------------------------------------------------------------------- /site/web/media/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/favicon.ico -------------------------------------------------------------------------------- /site/web/media/gltf.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/gltf.jpg -------------------------------------------------------------------------------- /site/web/media/instancing.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/instancing.jpg -------------------------------------------------------------------------------- /site/web/media/lights.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/lights.jpg -------------------------------------------------------------------------------- /site/web/media/material.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/material.jpg -------------------------------------------------------------------------------- /site/web/media/oit.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/oit.jpg -------------------------------------------------------------------------------- /site/web/media/physics.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/physics.jpg -------------------------------------------------------------------------------- /site/web/media/terrain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/media/terrain.jpg -------------------------------------------------------------------------------- /site/web/showcase.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | zephyr3d showcase 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | 29 |
30 |
31 |
32 |
33 |
34 |
35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /site/web/showdemo.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | zephyr3d showcase 6 | 7 | 8 | 9 | 10 | 22 | 23 | 24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_QOW4Ep0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_QOW4Ep0.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_R-W4Ep0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_R-W4Ep0.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_ROW4.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_S-W4Ep0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_S-W4Ep0.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SeW4Ep0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SeW4Ep0.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SuW4Ep0.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vq_SuW4Ep0.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/jizaRExUiTo99u79D0-ExdGM.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/jizaRExUiTo99u79D0-ExdGM.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/jizaRExUiTo99u79D0KExQ.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/jizaRExUiTo99u79D0KExQ.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/jizaRExUiTo99u79D0aExdGM.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/jizaRExUiTo99u79D0aExdGM.woff2 -------------------------------------------------------------------------------- /site/web/vendor/themes/fonts/jizaRExUiTo99u79D0yExdGM.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/site/web/vendor/themes/fonts/jizaRExUiTo99u79D0yExdGM.woff2 -------------------------------------------------------------------------------- /site/web/zh-cn/README.md: -------------------------------------------------------------------------------- 1 | 5 | 6 | # 简介 7 | 8 | Zephyr3d是一组支持在浏览器中进行3D渲染的API接口，支持WebGL/WebGL2/WebGPU. 9 | 10 | 它主要包括两个部分：Device API 和 Scene API.
11 | 12 | ### Device API 13 | 14 | Device API通过抽象化的封装，允许用户使用一套统一的接口来一致的方法来调用WebGL和WebGPU渲染功能。
15 | 主要功能包括: 16 | 17 | - 全面支持WebGL，WebGL2和WebGPU。 18 | - 使用javascript编写shader，无需了解GLSL或WGSL。 19 | - 类似于WebGPU架构, 使用绑定组(Bind group)来管理着色器资源。 20 | 21 | Device API提供了跨底层API的能力，适合用于编写自己的渲染框架。 22 | 23 | ### Scene API 24 | 25 | Scene API是建立于Device API之上的一个高级渲染框架。
26 | 主要功能包括: 27 | 28 | - PBR渲染及IBL光照。 29 | - Clustered光照渲染器，支持WebGL/WebGL2/WebGPU。 30 | - 导入GLTF模型。 31 | - 基于Octree的裁剪与拾取。 32 | - 骨骼动画，帧动画 33 | - 基于ChunkedLOD的地形渲染 34 | - Linear/Exp/Exp2雾 35 | - HDR渲染 36 | - PCF/ESM/VSM Shadow Map 37 | - Cascaded Shadow Map 38 | - 集成ImGUI 39 | 40 | Scene API适合用于快速开发。 41 | 42 | [Examples](/examples/index.html). 43 | -------------------------------------------------------------------------------- /site/web/zh-cn/_coverpage.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | > Web平台的3D渲染API，全面支持WebGL/WebGL2/WebGPU 4 | 5 | - 易于使用 6 | - 无缝支持WebGL和WebGPU 7 | - 使用原生Javascript编写Shader，无需了解GLSL和WGSL。 8 | - 完善的底层API封装，方便用于开发自己的渲染框架。 9 | 10 | [GitHub](https://github.com/gavinyork/zephyr3d/) 11 | [API](doc/markdown/index.md) 12 | [快速开始](/zh-cn/intro) 13 | 14 | ![color](#308080) 15 | -------------------------------------------------------------------------------- /site/web/zh-cn/_navbar.md: -------------------------------------------------------------------------------- 1 | - 语言 ▾ 2 | - [English](/en/) 3 | - [简体中文](/zh-cn/) 4 | 5 | - [API](doc/markdown/index.md)     6 | -------------------------------------------------------------------------------- /site/web/zh-cn/animation-blending.md: -------------------------------------------------------------------------------- 1 | # 动画融合 2 | 3 | 当前我们支持所有种类动画的融合，使用方法也很简单只需要以特定的权重播放动画，当前正在播放的 4 | 所有动画会根据各自的权重通过加权平均进行融合。 5 | 6 | ## 权重融合 7 | 8 | 以下代码同时播放三个动画并令它们3:7:5融合 9 | 10 | ```javascript 11 | 12 | animationSet.playAnimation('animation-1', { 13 | weight: 3, // 权重 14 | }); 15 | 16 | animationSet.playAnimation('animation-2', { 17 | weight: 7, // 权重 18 | }); 19 | 20 | animationSet.playAnimation('animation-3', { 21 | weight: 5, // 权重 22 | }); 23 | 24 | ``` 25 | 26 | ## 动画衔接 27 | 28 | 动画衔接也是利用权重实现的，用于避免两个动画切换时产生跳变 29 | 30 | ```javascript 31 | 32 | // 假定动画A正在播放，我们此时需要切换到动画B 33 | 34 | // 停止动画A，给定淡出时间为0.3秒 35 | animationSet.stopAnimation('A', { 36 | fadeOut: 0.3 37 | }); 38 | 39 | // 播放动画B，给定淡入时间为0.3秒 40 | animationSet.playAnimation('B', { 41 | fadeIn: 0.3 42 | }); 43 | 44 | ``` 45 | 46 | 以上例子中，动画A的权重在0.3秒内逐渐减为0并停止播放，动画B的权重在0.3秒内从0逐渐变为1，实现了两个动画的无缝转换。 47 | 48 | -------------------------------------------------------------------------------- /site/web/zh-cn/animation-intro.md: -------------------------------------------------------------------------------- 1 | # 动画 2 | 3 | 当前我们支持骨骼动画(Skeletal Animation)和关键帧动画(Keyframe Animation)。 4 | 5 | 以下几个类和动画播放有关： 6 | 7 | - [AnimationClip](/doc/markdown/./scene.animationclip) 8 | 9 | AnimationClip是一个动画实例，内部包含了若干组动画轨道，每个轨道控制一个场景节点。 10 | 11 | - [AnimationSet](/doc/markdown/./scene.animationset) 12 | 13 | AnimationSet是一组AnimationClip的集合，用于控制集合中动画的播放和停止。 14 | 15 | - [AnimationTrack](/doc/markdown/./scene.animationtrack) 16 | 17 | AnimationTrack是所有动画轨道类型的抽象基类。 18 | 19 | - [TranslationTrack](/doc/markdown/./scene.translationtrack) 20 | 21 | 控制场景节点平移的动画轨道类 22 | 23 | - [RotationTrack](/doc/markdown/./scene.rotationtrack) 24 | 25 | 控制场景节点旋转的动画轨道类，以Quaternion类型存储关键帧。 26 | 27 | - [EulerRotationTrack](/doc/markdown/./scene.eulerrotationtrack) 28 | 29 | 控制场景节点旋转的动画轨道类，以欧拉角类型存储关键帧 30 | 31 | - [ScaleTrack](/doc/markdown/./scene.scaletrack) 32 | 33 | 控制场景节点缩放的动画轨道类 34 | 35 | - [UserTrack](/doc/markdown/./scene.usertrack) 36 | 37 | 用户自定义轨道类型，允许用户指定关键帧数据通过回调函数实现自定义动画。 38 | 39 | -------------------------------------------------------------------------------- /site/web/zh-cn/animation-keyframe.md: -------------------------------------------------------------------------------- 1 | # 关键帧动画 2 | 3 | 一个AnimationClip中包含若干动画轨道(AnimationTrack)。每个轨道包含一组关键帧数据以及该轨道控制的节点对象。 4 | 可以使用系统预先定义的轨道例如平移，旋转缩放等，也可以自定义轨道。 5 | 6 | ```javascript 7 | 8 | // 创建节点 9 | const box = new Mesh(scene, new BoxShape(), new LambertMaterial()); 10 | 11 | // 创建AnimationClip并指定动画名称 12 | const animation = new AnimationClip('Animation0'); 13 | 14 | // 动画内添加一个系统预定义的平移轨道(TranslationTrack)，关键帧数据包含时间（单位为秒）和平移位置，指定该轨道控制节点box 15 | // 第一个参数'linear'指定关键帧之间进行线性插值，参数可选值包括'linear','step','cubicspline' 16 | // 第二个参数是关键帧数组，关键帧对象time为该帧的时间，单位为秒，value对象为该帧的数值 17 | 18 | // 添加轨道令节点在2秒内从原点平移到(0, 3, 0)再回到原点 19 | animation.addTrack(box, new TranslationTrack('linear', [{ 20 | time: 0, 21 | value: new Vector3(0, 0, 0) 22 | }, { 23 | time: 1, 24 | value: new Vector3(0, 3, 0) 25 | }, { 26 | time: 2, 27 | value: new Vector3(0, 0, 0) 28 | }])); 29 | 30 | // 添加轨道令节点在2秒内从绕Y轴旋转4圈 31 | animation.addTrack(box, new EulerRotationTrack('linear', [{ 32 | time: 0, 33 | value: new Vector3(0, 0, 0, 'ZYX') 34 | }, { 35 | time: 2, 36 | value: new Vector3(0, 8 * Math.PI, 0, 'ZYX') 37 | }])); 38 | 39 | // 将动画添加到动画组 40 | const animationSet = new AnimationSet(scene); 41 | animationSet.add(animation); 42 | 43 | // 开始播放 44 | // 第二个参数指定循环播放次数，如果为0，则始终循环 45 | animationSet.playAnimation('animation0', 0); 46 | 47 | // 结束播放 48 | animationSet.stopAnimation('animation0'); 49 | 50 | ``` 51 | 52 |
53 | 54 | -------------------------------------------------------------------------------- /site/web/zh-cn/animation-skeleton.md: -------------------------------------------------------------------------------- 1 | # 骨骼动画 2 | 3 | 模型的每个顶点都受到若干关节(Joint)的影响而产生运动，这种动画称为骨骼动画。我们只支持从模型中载入骨骼动画， 不可以自己创建。 4 | 5 | ```javascript 6 | 7 | // 载入动画模型，fetchModel()返回的对象包含一个模型节点和一个AnimationSet对象，如果模型不包含动画，AnimationSet对象为null。 8 | const model = await assetManager.fetchModel(scene, 'assets/models/CesiumMan.glb'); 9 | // 如果模型包含动画 10 | if（model.animationSet) { 11 | // AnimationSet.getAnimationNames()方法用来获取所有动画名字 12 | const animationNames = model.animationSet ? model.animationSet.getAnimationNames() : []; 13 | // 播放其中一个动画 14 | model.animationSet.playAnimation(animationNames[0], { 15 | // 循环次数，0为无限循环。默认值为0 16 | repeat: 0, 17 | // 速度因子，绝对值越大速度越快，如果为负值则反向播放。默认值为1 18 | speedRatio: 1, 19 | // 融合权值，当多个动画同时播放时，所有动画通过这个权值做加权平均，默认为1 20 | weight: 1, 21 | // 动画需要多长时间权值从0增长到weight，默认为0，表示无淡入效果，通常和stopAnimation()的fadeOut参数配合用于两个动画无缝切换 22 | fadeIn: 0, 23 | }); 24 | // ... 25 | // 停止播放动画 26 | model.animationSet.stopAnimation(animationNames[0]); 27 | } 28 | 29 | ``` 30 | 31 |
32 | -------------------------------------------------------------------------------- /site/web/zh-cn/device.md: -------------------------------------------------------------------------------- 1 | # 渲染设备 2 | 3 | 渲染设备([Device](/doc/markdown/./device.abstractdevice))是一个抽象接口，提供了大多数底层图形API功能的封装，是DeviceAPI的核心。 4 | 5 | ## 创建设备 6 | 7 | 渲染设备是一个抽象的接口，目前我们实现了WebGL, WebGL2, WebGPU三个后端。要创建渲染设备实例，需要选择其中一个后端。 8 | 9 | ```javascript 10 | 11 | // 引入WebGL后端 12 | // import { backendWebGL } from '@zephyr3d/backend-webgl'; 13 | // 引入WebGL2后端 14 | // import { backendWebGL2 } from '@zephyr3d/backend-webgl'; 15 | // 引入WebGPU后端 16 | import { backendWebGPU } from '@zephyr3d/backend-webgpu'; 17 | 18 | // 用于创建设备的画布 19 | const canvas = document.querySelector('#canvas'); 20 | // 如果系统支持，创建设备 21 | if (backendWebGPU.supported()) { 22 | const device = await backendWebGPU.createDevice(canvas); 23 | // 24 | if (!device) { 25 | console.error('Create device failed'); 26 | } 27 | } 28 | 29 | ``` 30 | 31 | ## 渲染循环 32 | 33 | 使用Device渲染的每一帧必需包括在[device.beginFrame()](/doc/markdown/./device.abstractdevice.beginframe)和[device.endFrame()](/doc/markdown/./device.abstractdevice.endframe)之间，以下为实现渲染循环的方式 34 | 35 | ```javascript 36 | 37 | function frame() { 38 | if(device.beginFrame()) { 39 | // DoSomething 40 | device.endFrame(); 41 | } 42 | requestAnimationFrame(frame); 43 | } 44 | 45 | ``` 46 | 47 | 也可以使用[device.runLoop()](/doc/markdown/./device.abstractdevice.runloop)方法: 48 | 49 | ```javascript 50 | 51 | device.runLoop(device => { 52 | // DoSomething 53 | }); 54 | 55 | ``` 56 | 57 | 使用runLoop方法无需调用beginFrame()/endFrame()。 58 | -------------------------------------------------------------------------------- /site/web/zh-cn/devicesamples.md: -------------------------------------------------------------------------------- 1 | # 示例 2 | 3 | ## Triangle 4 | 5 |
6 | 7 | ## Cube 8 | 9 |
10 | 11 | ## Render to texture 12 | 13 |
14 | 15 | ## Instancing 16 | 17 |
18 | 19 | ## Compute shader 20 | 21 |
22 | -------------------------------------------------------------------------------- /site/web/zh-cn/fog.md: -------------------------------------------------------------------------------- 1 | # 大气和雾效 2 | 3 | 雾效用于模拟自然场景中物体距离越远越为模糊的效果，可以让渲染效果更加真实。我们支持基于真实大气散射算法实现的雾效，也支持传统的线性和指数算法的雾效。 4 | 5 | ## 大气散射雾效 6 | 7 | ```javascript 8 | 9 | // 设置为大气散射雾效（通常需要配合大气散射天空渲染模式) 10 | scene.env.sky.fogType = 'scatter'; 11 | // 使用大气散射雾效时，这个属性可以调节雾效的浓度，值越小，雾效浓度越小, 默认值为1 12 | scene.env.sky.aerialPerspectiveDensity = 10; 13 | 14 | ``` 15 | 16 |
17 | 18 | ## 线性雾效 19 | 20 | ```javascript 21 | 22 | // 设置为线性模式雾效 23 | scene.env.sky.fogType = 'linear'; 24 | // 雾效起始距离 25 | scene.env.sky.fogStart = 10; 26 | // 雾效达到最浓的距离 27 | scene.env.sky.fogEnd = 400; 28 | // 雾效高度 29 | scene.env.sky.fogTop = 120; 30 | 31 | // 设置 32 | ``` 33 | 34 |
35 | 36 | ## 指数雾效 37 | 38 | ```javascript 39 | 40 | // 设置为指数雾效(exp或exp2) 41 | scene.env.sky.fogType = 'exp'; 42 | // 雾效浓度 43 | scene.env.sky.fogDensity = 0.006; 44 | 45 | ``` 46 | 47 |
48 | -------------------------------------------------------------------------------- /site/web/zh-cn/installation.md: -------------------------------------------------------------------------------- 1 | # 安装 2 | 3 | Zephyr3d以ES6模块的形式发布，需要使用npm来安装，配合Webpack或vite等前端构建工具进行开发。 4 | 5 | - @zephyr3d/base模块 6 | 7 | 基础模块，包括数学库以及部分其他模块公用的内容。 8 | 9 | ```npm install --save @zephyr3d/base``` 10 | 11 | - @zephyr3d/device模块 12 | 13 | 包含了渲染底层API的基本定义和抽象接口。 14 | 15 | ```npm install --save @zephyr3d/device``` 16 | 17 | - @zephyr3d/backend-webgl 18 | 19 | WebGL渲染设备后端，支持WebGL/WebGL2渲染。 20 | 21 | ```npm install --save @zephyr3d/backend-webgl``` 22 | 23 | - @zephyr3d/backend-webgpu 24 | 25 | WebGPU渲染设备后端。 26 | 27 | ```npm install --save @zephyr3d/backend-webgpu``` 28 | 29 | - @zephyr3d/scene 30 | 31 | SceneAPI模块，基于DeviceAPI模块实现，支持快速开发渲染项目。 32 | 33 | ```npm install --save @zephyr3d/scene``` 34 | 35 | - @zephyr3d/imgui 36 | 37 | ImGui的绑定，如需在项目中渲染GUI，可安装此模块。 38 | 39 | ```npm install --save @zephyr3d/imgui``` 40 | 41 | -------------------------------------------------------------------------------- /site/web/zh-cn/intro.md: -------------------------------------------------------------------------------- 1 | # 概述 2 | 3 | Zephyr3d是一个面向浏览器的3D渲染框架，主要由两套API组成： 4 | 5 | ## Device API 6 | 7 | DeviceAPI提供了一组面向底层的抽象封装接口，允许用户使用完全相同的方式调用WebGL，WebGL2和WebGPU图形接口。这些接口覆盖了绝大多数的底层API能力，可以轻松支持跨API的图形渲染。 8 | 跨平台渲染的一个主要困难是Shader语言不同，WebGL和WebGL2使用GLSL而WebGPU使用WGSL，为了能够统一Shader的编写，我们实现了一套动态生成Shader的功能，用户可以使用原生Javascript 9 | 编写Shader，对于不同的后端，系统自动生成对应的Shader代码，不存在繁琐的字符串拼接，不存在大量的#ifdef，具有极高的灵活性。 10 | 11 | ## Scene API 12 | 13 | SceneAPI是建立在DeviceAPI基础上的一个上层渲染框架，既作为DeviceAPI的测试环境，也可直接用于图形开发。目前SceneAPI已实现的功能有： 14 | 15 | - Octree场景管理 16 | - Clustered光照剪裁 17 | - PBR/IBL 18 | - ShadowMap(PCF/ESM/VSM/CSM) 19 | - 骨骼动画及关键帧动画 20 | - GPU实例渲染 21 | - 导入GLTF/GLB模型 22 | - ChunkLod地形 23 | - 大气渲染，动态云层，支持日夜交替效果 24 | - FFT水面渲染 25 | - 后处理(Tonemap, Bloom, FXAA, SAO等) 26 | - ImGui绑定 27 | 28 | SceneAPI尚处于开发前期阶段，不推荐用于正式项目。 29 | -------------------------------------------------------------------------------- /site/web/zh-cn/lighting-direct.md: -------------------------------------------------------------------------------- 1 | # 直接光照 2 | 3 | 对于直接光照，我们需要创建光照类型的场景节点。我们可以为光源设置颜色和强度，光源的位置，方向由节点的位置和旋转来决定。 4 | 5 | **光源方向是朝向自身坐标系的负Z轴方向** 6 | 7 | ## 平行光 8 | 9 | 以下代码示范了平行光的使用方法 10 | 11 | ```javascript 12 | 13 | // 创建平行光对象 14 | const light = new DirectionalLight(scene); 15 | // 平行光方向 16 | light.rotation.fromEulerAngle(Math.PI/4, Math.PI/4, 0, 'ZYX'); 17 | // 平行光颜色 18 | light.color = new Vector4(1, 1, 0, 1); 19 | 20 | ``` 21 | 22 |
23 | 24 | ## 点光 25 | 26 | 以下代码示范了点光的使用方法 27 | 28 | ```javascript 29 | 30 | // 创建点光对象 31 | const light = new PointLight(scene); 32 | // 点光的照射范围 33 | light.range = 30; 34 | // 点光颜色 35 | light.color = new Vector4(1, 1, 1, 1); 36 | 37 | ``` 38 | 39 |
40 | 41 | ## 锥光 42 | 43 | 以下代码示范了锥形光的使用方法 44 | 45 | ```javascript 46 | 47 | // 创建锥形光对象 48 | const light = new SpotLight(scene); 49 | // 锥形光方向 50 | light.rotation.fromEulerAngle(-Math.PI/4, Math.PI/4, 0, 'ZYX'); 51 | // 锥形光颜色 52 | light.color = new Vector4(1, 1, 1, 1); 53 | // 光锥角度余弦 54 | light.cutoff = Math.cos(Math.PI * 0.25); 55 | // 锥形光范围 56 | light.range = 30; 57 | // 锥形光位置 58 | light.position.setXYZ(0, 15, 0); 59 | 60 | ``` 61 | 62 |
63 | 64 | -------------------------------------------------------------------------------- /site/web/zh-cn/lighting-intro.md: -------------------------------------------------------------------------------- 1 | # 光照 2 | 3 | 光照是使场景更具有真实感必不可少的部分。 4 | 5 | ## 直接光照 6 | 7 | 直接光照是指物体被具体的光源照亮。目前我们支持平行光，点光以及锥形光。 8 | 9 | 我们采用聚簇光照技术(Clustered Lighting)，支持视锥内最多255个光源，对于WebGL设备，每像素最多接受8盏灯照射，对于WebGL2和WebGPU设备，每像素最多接受16盏灯照射。 10 | 11 | ## 间接光照 12 | 13 | 物体不是被光源直接照亮，而是被场景中其他物体所反射光线照亮，这样的光照我们称之为间接光照。间接光照的光源我们称之为环境光。 14 | 15 | 间接光照目前我们支持IBL和半球形天光。 16 | -------------------------------------------------------------------------------- /site/web/zh-cn/multi-views.md: -------------------------------------------------------------------------------- 1 | # 多视口渲染 2 | 3 | Zephyr3d支持在屏幕上渲染多个视口，可用于实现三视图或画中画等效果。 4 | 5 | 你可以通过设置[Camera.viewport](/doc/markdown/./scene.camera.viewport)属性。当调用Camera.render() 6 | 方法时，场景会被渲染到viewport属性所指示的区域内。 7 | 8 | **注意，在zephyr3d中，viewport的原点位于左下角。** 9 | 10 | 以下代码利用相同的Camera渲染场景两次，实现类似画中画的效果。 11 | 12 |
-------------------------------------------------------------------------------- /site/web/zh-cn/oit.md: -------------------------------------------------------------------------------- 1 | # 顺序无关的透明度渲染 2 | 3 | 我们的引擎支持两种顺序无关的透明度渲染(Order-Independent Transparency, OIT)技术: 4 | Weighted Blended OIT和Per-Pixel Linked List OIT。 5 | 6 | ## Weighted Blended OIT 7 | 8 | Weighted Blended OIT是一种基于权重的透明度混合技术。它通过在片元着色器中计算每个片元 9 | 的颜色和透明度权重,然后在后期合成阶段对这些片元进行加权混合。 10 | 11 | 该技术的优点是实现相对简单,性能较好,且可以很好地处理复杂的透明场景。缺点是无法完全解决 12 | 所有的透明度排序问题,在某些情况下可能会产生视觉瑕疵。 13 | 14 | WebGL,WebGL2和WebGPU设备均支持Weighted Blended OIT。 15 | 16 | 以下代码允许使用Weigted Blended OIT进行透明物体渲染 17 | 18 | ```javascript 19 | 20 | // 为相机指定Weighted Blended渲染透明物体 21 | camera.oit = new WeightedBlendedOIT(); 22 | 23 | ``` 24 | 25 | ## Per-Pixel Linked List OIT 26 | 27 | Per-Pixel Linked List OIT是一种基于每像素链表的透明度渲染技术。它在片元着色器中为每个 28 | 片元构建一个链表,链表中存储了该片元的颜色和深度信息。 29 | 30 | 该技术的优点是能够准确地处理透明物体的渲染顺序,即使在复杂场景下也能够正确渲染。缺点是需 31 | 要更多的显存和计算资源。 32 | 33 | Per-Pixel Linked List OIT仅可用于WebGPU设备。 34 | 35 | 以下代码允许使用Per-Pixel Linked List进行透明物体渲染 36 | 37 | ```javascript 38 | 39 | // 为相机指定Per-Pixel Linked List渲染透明物体 40 | // 构造函数的参数是支持的透明层级数量，默认是16. 41 | camera.oit = new ABufferOIT(20); 42 | 43 | ``` 44 | 45 | ## 注意 46 | 47 | OIT对象在使用完毕以后必须释放以免资源泄露。 48 | 49 | ```javascript 50 | 51 | // 释放OIT对象 52 | camera.oit.dispose(); 53 | camera.oit = null; 54 | 55 | ``` 56 | 57 | -------------------------------------------------------------------------------- /site/web/zh-cn/posteffect-bloom.md: -------------------------------------------------------------------------------- 1 | # Bloom 辉光 2 | 3 | 辉光效果用来将渲染图像中高亮的部分溢出产生朦胧的效果，位于Transparent分组。 4 | 5 | 如果将Bloom效果应用于HDR图像可能产生明显的高光闪烁，建议放在ToneMap之后。 6 | 7 | ```javascript 8 | 9 | // 创建Compositor实例 10 | const compositor = new Compositor(); 11 | // 创建Bloom后处理实例 12 | const bloom = new Bloom(); 13 | // threshold属性为亮度阈值，亮度低于此值的部分将不产生辉光，默认值为0.8 14 | bloom.threshold = 0.85; 15 | // intensity属性为强度，值越大辉光效果越强烈，默认值为1 16 | bloom.intensity = 2; 17 | // downsampleLimit属性为downsample的最小贴图尺寸，默认值为32 18 | bloom.downsampleLimit = 64; 19 | // 添加该效果到compositor 20 | compositor.appendPostEffect(bloom); 21 | // ... 22 | // 渲染场景并应用效果 23 | camera.render(scene, compositor); 24 | 25 | ``` 26 | 27 |
28 | 29 | -------------------------------------------------------------------------------- /site/web/zh-cn/posteffect-fxaa.md: -------------------------------------------------------------------------------- 1 | # FXAA 2 | 3 | FXAA是一种屏幕空间的抗锯齿技术，位于Transparent组。 4 | 5 | ```javascript 6 | 7 | // 创建Compositor实例 8 | const compositor = new Compositor(); 9 | // 创建FXAA后处理实例 10 | const fxaa = new FXAA(); 11 | // 添加该效果到compositor 12 | compositor.appendPostEffect(fxaa); 13 | // ... 14 | // 渲染场景并应用效果 15 | camera.render(scene, compositor); 16 | 17 | ``` 18 | 19 |
20 | -------------------------------------------------------------------------------- /site/web/zh-cn/posteffect-intro.md: -------------------------------------------------------------------------------- 1 | # 后处理 2 | 3 | 后处理(PostProcess)允许你在场景渲染以后为图像添加2D效果。 4 | 5 | 我们使用Compositor对象管理后处理效果。Compositor可以添加多个后处理效果，每个都以前一个效果的渲染结果为输入形成链式调用。 6 | 渲染的时候只需要将Compositor对象作为Camera.render()的第二个参数即可。 7 | 8 | 我们的后处理效果分为Opaque和Transparent两组，Opaque组是在不透明物体渲染完成，不透明物体渲染之前调用，Transparent组在透明和不透明物体都渲染完成调用。 9 | 每种后处理效果根据应用不同默认处于Opaque组或Transparent组。后处理效果的调用次序分别在每个组内符合添加次序。 10 | 11 | -------------------------------------------------------------------------------- /site/web/zh-cn/posteffect-sao.md: -------------------------------------------------------------------------------- 1 | # 环境光遮挡 (SSAO) 2 | 3 | 环境光遮挡是一种屏幕空间的AO算法，旨在提供间接光的阴影近似，提高渲染的真实感，位于Opacity组 4 | 5 | ```javascript 6 | 7 | // 创建Compositor实例 8 | const compositor = new Compositor(); 9 | // 创建SAO后处理 10 | const ssao = new SAO(); 11 | // radius属性为深度检测范围，默认值为100 12 | ssao.radius = 80; 13 | // intensity属性为强度，值越大阴影越强烈，默认值为0.05 14 | ssao.intensity = 0.04; 15 | // blurKernelRadius属性为模糊半径，默认值为8 16 | ssao.blurKernelRadius = 10; 17 | // 添加该效果到compositor 18 | compositor.appendPostEffect(ssao); 19 | // ... 20 | // 渲染场景并应用效果 21 | camera.render(scene, compositor); 22 | 23 | ``` 24 | 25 |
26 | 27 | -------------------------------------------------------------------------------- /site/web/zh-cn/posteffect-tonemap.md: -------------------------------------------------------------------------------- 1 | # 色调映射 (Tonemap) 2 | 3 | 色调映射用来将HDR图像映射为LDR图像，位于Transparent分组。 4 | 我们的色调映射采用ACES编码实现。 5 | 6 | ```javascript 7 | 8 | // 创建Compositor实例 9 | const compositor = new Compositor(); 10 | // 创建色调映射后处理实例 11 | const tonemap = new Tonemap(); 12 | // exposure属性控制曝光度，默认值为1 13 | tonemap.exposure = 1.5; 14 | // 添加该效果到compositor 15 | compositor.appendPostEffect(tonemap) 16 | // ... 17 | // 渲染场景并应用效果 18 | camera.render(scene, compositor); 19 | 20 | ``` 21 | 22 |
23 | 24 | -------------------------------------------------------------------------------- /site/web/zh-cn/renderstate.md: -------------------------------------------------------------------------------- 1 | ## 渲染状态 2 | 3 | 我们使用[RenderStateSet](/doc/markdown/./device.renderstateset)接口来管理渲染状态。 4 | 5 | ```javascript 6 | 7 | // 创建渲染状态集合 8 | const renderStateSet = device.createRenderStateSet(); 9 | 10 | // 自定义AlphaBlending状态，如不调用，使用默认值 11 | const blendingState = renderStateSet.useBlendingState(); 12 | // 设置AlphaBlend参数 13 | blendingState.enable(true).setBlendFunc('one', 'one'); 14 | 15 | // 自定义DepthBuffer状态 16 | const depthState = renderStateSet.useDepthState(); 17 | depthState.enableTest(false).enableWrite(false); 18 | 19 | // 渲染前设置为当前渲染状态 20 | device.setRenderStates(renderStateSet); 21 | 22 | ``` 23 | 24 | 注意： 25 | 26 | 我们不支持设置顶点旋转方向(CW/CCW)状态，如需反转，调用[Device.reverseVertexWindingOrder()](/doc/markdown/./device.abstractdevice.reversevertexwindingorder)。 27 | -------------------------------------------------------------------------------- /site/web/zh-cn/shadow-intro.md: -------------------------------------------------------------------------------- 1 | # 阴影 2 | 3 | 阴影可以使场景更具立体感和真实感。目前我们支持对平行光，点光和锥光投射阴影。 4 | 5 | ## 开启阴影 6 | 7 | 每个光源可以单独配置是否投射阴影以及阴影模式，质量等参数。 8 | 9 | ```javascript 10 | 11 | const light = new DirectionalLight(scene); 12 | // castShadow属性控制灯光是否投射阴影 13 | light.castShadow = true; 14 | 15 | ``` 16 | 17 | 网格也可以配置是否投射阴影。 18 | 19 | ```javascript 20 | 21 | // 允许该网格投射阴影 22 | // 默认值为true 23 | mesh.castShadow = true; 24 | 25 | ``` 26 | 27 | ## 平行光投影： 28 | 29 |
30 | 31 | ## 点光源投影： 32 | 33 |
34 | 35 | ## 锥光投影 36 | 37 |
38 | 39 | -------------------------------------------------------------------------------- /site/web/zh-cn/water.md: -------------------------------------------------------------------------------- 1 | # 水面渲染 2 | 3 | 水面是一种常见的自然景观，目前我们提供了一种基于FFT的水面实现，最多支持3层波浪叠加。 4 | 5 | 目前我们的水面是作为后处理来实现的。 6 | 7 | ```javascript 8 | 9 | // 创建水面后处理 10 | const water = new PostWater(); 11 | s 12 | // 设置水面的范围为世界坐标系下(-100, -100)到(100, 100)的矩形范围,默认为(-1000, -1000)到(1000, 1000) 13 | water.boundary.setXYZW(-100, -100, 100, 100); 14 | // 设置水面高度为世界坐标系下Y轴20，默认为0 15 | water.elevation = 20; 16 | // 设置风向(2D空间的向量)，影响波浪的强度和传播方向，默认为(2, 2) 17 | water.wind.setXY(3, 5); 18 | // 设置反射折射的抖动强度，值越大抖动越强，默认值为16 19 | water.displace = 8; 20 | // 设置深度缩放系数，值越小水越显得清澈，默认值为0.1 21 | water.depthMulti = 0.2; 22 | // 设置折射强度，这个值用于修改菲涅尔系数，值越大折射越强，默认为0 23 | water.refractionStrength = 0.1; 24 | // 设置波浪传播方向和风向的对齐程度，值越大对齐程度越高，默认值为1 25 | water.alignment = 0.3; 26 | // 设置白沫的宽度，默认为1.2 27 | water.foamWidth = 0.8; 28 | // 设置白沫的对比度，值越小对比度越高，默认为7.2 29 | water.foamContrast = 8; 30 | // 设置第一层波浪的波长，默认为400 31 | water.waveLength0 = 400; 32 | // 设置第一层波浪的陡度，默认为-1.5 33 | water.waveCroppiness0 = -1; 34 | // 设置第一层波浪的强度，默认为0.4 35 | water.waveStrength0 = 0.4; 36 | // 设置第二层波浪的波长，默认为100 37 | water.waveLength1 = 100; 38 | // 设置第二层波浪的陡度，默认为-1.2 39 | water.waveCroppiness1 = -1; 40 | // 设置第二层波浪的强度，默认为0.2 41 | water.waveStrength1 = 0.2; 42 | // 设置第三层波浪的波长，默认为15 43 | water.waveLength2 = 20; 44 | // 设置第三层波浪的陡度，默认为-0.5 45 | water.waveCroppiness2 = -1; 46 | // 设置第三层波浪的强度，默认为0.2 47 | water.waveStrength2 = 0.2; 48 | 49 | // 添加水面后处理效果 50 | compositor.appendPostEffect(water); 51 | 52 | ``` 53 | 54 |
55 | -------------------------------------------------------------------------------- /test/README.md: -------------------------------------------------------------------------------- 1 | # `test` 2 | 3 | > TODO: description 4 | 5 | ## Usage 6 | 7 | ``` 8 | const test = require('test'); 9 | 10 | // TODO: DEMONSTRATE API 11 | ``` 12 | -------------------------------------------------------------------------------- /test/src/assets/images/Di-3d-bc6h.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/test/src/assets/images/Di-3d-bc6h.dds -------------------------------------------------------------------------------- /test/src/assets/images/Di-3d.dds: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/test/src/assets/images/Di-3d.dds -------------------------------------------------------------------------------- /test/src/assets/images/Di-3d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/test/src/assets/images/Di-3d.png -------------------------------------------------------------------------------- /test/src/assets/images/cloudy.hdr: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/test/src/assets/images/cloudy.hdr -------------------------------------------------------------------------------- /test/src/assets/stone1.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/test/src/assets/stone1.glb -------------------------------------------------------------------------------- /test/src/assets/stone2.glb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinyork/zephyr3d/76e548b155900e9a263d641540e0368756acfbef/test/src/assets/stone2.glb -------------------------------------------------------------------------------- /test/src/doc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | texture 6 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /test/src/instancing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | instancing 6 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /test/src/mathtest/common.ts: -------------------------------------------------------------------------------- 1 | // Common test utilities 2 | 3 | export interface TestCase { 4 | caseName: string; 5 | times: number; 6 | execute: () => void; 7 | } 8 | 9 | export function assert(exp, msg) { 10 | if (!exp) { 11 | throw new Error(msg); 12 | } 13 | } 14 | 15 | export function numberEquals(x: number, y: number, epsl?: number) { 16 | const e = epsl ?? 0.0001 * Math.max(1, Math.abs(x), Math.abs(y)); 17 | return Math.abs(x - y) <= e; 18 | } 19 | 20 | export function rand(minval = -10, maxval = 10): number { 21 | return Math.random() * (maxval - minval) + minval; 22 | } 23 | 24 | export function randInt(minval = -999999, maxval = 999999) { 25 | return Math.floor(Math.random() * (maxval - minval + 1) + minval); 26 | } 27 | 28 | export function randNonZero(minval = -10, maxval = 10) { 29 | while (true) { 30 | const r = rand(minval, maxval); 31 | if (Math.abs(r) > Number.EPSILON) { 32 | return r; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /test/src/mathtest/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | zephyr3d test 8 | 9 | 10 |
11 |

12 | 16 | 17 | 18 | 19 | 20 |
Test nameTest result
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /test/src/mathtest/plane.ts: -------------------------------------------------------------------------------- 1 | import { Plane, Vector3 } from '@zephyr3d/base'; 2 | import { assert, rand, numberEquals } from './common'; 3 | 4 | export function testPlane() { 5 | const x = rand(-1000, 1000); 6 | const y = rand(1, 100); 7 | const z = rand(-1000, 1000); 8 | const plane = new Plane(new Vector3(x, y, z), new Vector3(0, 1, 0)); 9 | const x1 = rand(-1000, 1000); 10 | const y1 = rand(y + rand(0, 100)); 11 | const z1 = rand(-1000, 1000); 12 | assert(numberEquals(plane.distanceToPoint(new Vector3(x1, y1, z1)), y1 - y), 'distanceToPoint test failed'); 13 | assert( 14 | plane.nearestPointToPoint(new Vector3(x1, y1, z1)).equalsTo(new Vector3(x1, y, z1)), 15 | 'nearestPointToPoint test failed' 16 | ); 17 | plane.inplaceFlip(); 18 | assert(numberEquals(plane.distanceToPoint(new Vector3(x1, y1, z1)), y - y1), 'distanceToPoint test failed'); 19 | assert( 20 | plane.nearestPointToPoint(new Vector3(x1, y1, z1)).equalsTo(new Vector3(x1, y, z1)), 21 | 'nearestPointToPoint test failed' 22 | ); 23 | } 24 | -------------------------------------------------------------------------------- /test/src/ssr/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SSR 6 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /test/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ES2015", 6 | "module": "ES2015", 7 | "lib": ["ES6", "ES2020", "DOM", "DOM.Iterable"], 8 | "strict": true, 9 | "noImplicitAny": false, 10 | "preserveConstEnums": false, 11 | "listEmittedFiles": true, 12 | "noUnusedLocals": true, 13 | "strictNullChecks": false, 14 | "allowSyntheticDefaultImports": true, 15 | "experimentalDecorators": false, 16 | "emitDecoratorMetadata": false, 17 | "sourceMap": true, 18 | "stripInternal": true, 19 | "typeRoots": ["./node_modules/@webgpu/types"] 20 | }, 21 | "exclude": ["node_modules", "**/*.spec.ts", "**/*.d.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /tsconfig.common.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": [ 8 | "es2020", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "strict": true, 13 | "noImplicitAny": false, 14 | "removeComments": false, 15 | "preserveConstEnums": false, 16 | "listEmittedFiles": true, 17 | "noUnusedLocals": false, 18 | "incremental": false, 19 | "strictNullChecks": false, 20 | "allowSyntheticDefaultImports": true, 21 | "experimentalDecorators": false, 22 | "emitDecoratorMetadata": false, 23 | "sourceMap": true, 24 | "stripInternal": true, 25 | "keyofStringsOnly": false, 26 | "typeRoots": [ 27 | "./node_modules/@types" 28 | ], 29 | }, 30 | "exclude": [ 31 | "node_modules", 32 | "**/*.spec.ts", 33 | "**/*.d.ts" 34 | ] 35 | } 36 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "downlevelIteration": true, 4 | "moduleResolution": "node", 5 | "target": "ESNext", 6 | "module": "ESNext", 7 | "lib": [ 8 | "es2020", 9 | "DOM", 10 | "DOM.Iterable" 11 | ], 12 | "strict": true, 13 | "noImplicitAny": false, 14 | "preserveConstEnums": false, 15 | "listEmittedFiles": true, 16 | "noUnusedLocals": false, 17 | "strictNullChecks": false, 18 | "allowSyntheticDefaultImports": true, 19 | "experimentalDecorators": false, 20 | "emitDecoratorMetadata": false, 21 | "sourceMap": true, 22 | "stripInternal": true, 23 | "keyofStringsOnly": false, 24 | "typeRoots": [ 25 | "./node_modules/@types" 26 | ], 27 | "baseUrl": ".", 28 | "paths": { 29 | "@zephyr3d/*": ["build/@zephyr3d/*"] 30 | } 31 | }, 32 | "exclude": [ 33 | "node_modules", 34 | "**/*.spec.ts", 35 | "**/*.d.ts" 36 | ] 37 | } 38 | --------------------------------------------------------------------------------