| }) | }) | ||||
| viewer.renderManager.autoBuildPipeline = false | viewer.renderManager.autoBuildPipeline = false | ||||
| viewer.renderManager.pipeline = ['render', 'screen'] | |||||
| viewer.renderManager.pipeline = ['depth', 'render', 'screen'] | |||||
| const targetPreview = viewer.addPluginSync(RenderTargetPreviewPlugin) | const targetPreview = viewer.addPluginSync(RenderTargetPreviewPlugin) | ||||
| targetPreview.addTarget(()=>depth.target, 'depth', false, true) | targetPreview.addTarget(()=>depth.target, 'depth', false, true) |
| viewer.scene.setBackgroundColor('#555555') | viewer.scene.setBackgroundColor('#555555') | ||||
| const urls = [ | const urls = [ | ||||
| 'https://threejs.org/examples/textures/sprite0.png', | |||||
| 'https://threejs.org/examples/textures/uv_grid_opengl.jpg', | |||||
| 'https://threejs.org/examples/models/svg/style-css-inside-defs.svg', | |||||
| 'https://threejs.org/examples/textures/tiltbrush/Light.webp', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/textures/sprite0.png', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/textures/uv_grid_opengl.jpg', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/models/svg/style-css-inside-defs.svg', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/textures/tiltbrush/Light.webp', | |||||
| // todo: avif | // todo: avif | ||||
| 'https://threejs.org/favicon.ico', | |||||
| 'https://threepipe.org/favicon.ico', | |||||
| ] | ] | ||||
| const geometry = new PlaneGeometry(1, 1) | const geometry = new PlaneGeometry(1, 1) |
| viewer.scene.setBackgroundColor('#555555') | viewer.scene.setBackgroundColor('#555555') | ||||
| const urls = [ | const urls = [ | ||||
| 'https://threejs.org/examples/textures/compressed/sample_etc1s.ktx2', | |||||
| 'https://threejs.org/examples/textures/compressed/sample_uastc.ktx2', | |||||
| 'https://threejs.org/examples/textures/compressed/sample_uastc_zstd.ktx2', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.153.1001/examples/textures/compressed/sample_etc1s.ktx2', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.153.1001/examples/textures/compressed/sample_uastc.ktx2', | |||||
| 'https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.153.1001/examples/textures/compressed/sample_uastc_zstd.ktx2', | |||||
| ] | ] | ||||
| // PlaneGeometry UVs assume flipY=true, which compressed textures don't support. | // PlaneGeometry UVs assume flipY=true, which compressed textures don't support. |
| { | { | ||||
| "imports": { | "imports": { | ||||
| "three": "./../../dist/index.mjs", | "three": "./../../dist/index.mjs", | ||||
| "three/examples/jsm/modifiers/SimplifyModifier.js": "https://cdn.jsdelivr.net/gh/repalash/three.js-modded/examples/jsm/modifiers/SimplifyModifier.js", | |||||
| "three/examples/jsm/modifiers/SimplifyModifier.js": "https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/jsm/modifiers/SimplifyModifier.js", | |||||
| "threepipe": "./../../dist/index.mjs", | "threepipe": "./../../dist/index.mjs", | ||||
| "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs" | "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs" | ||||
| } | } |
| await viewer.setEnvironmentMap('https://hdrihaven.r2cache.com/hdr/1k/empty_warehouse_01_1k.hdr', { | await viewer.setEnvironmentMap('https://hdrihaven.r2cache.com/hdr/1k/empty_warehouse_01_1k.hdr', { | ||||
| setBackground: true, | setBackground: true, | ||||
| }) | }) | ||||
| await viewer.load<IObject3D>('https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Sponza/glTF/Sponza.gltf', { | |||||
| await viewer.load<IObject3D>('https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/d7a3cc8e51d7c573771ae77a57f16b0662a905c6/2.0/Sponza/glTF/Sponza.gltf', { | |||||
| autoCenter: false, | autoCenter: false, | ||||
| autoScale: true, | autoScale: true, | ||||
| autoScaleRadius: 30, | autoScaleRadius: 30, |
| { | { | ||||
| "imports": { | "imports": { | ||||
| "three": "./../../dist/index.mjs", | "three": "./../../dist/index.mjs", | ||||
| "three/examples/jsm/postprocessing/UnrealBloomPass.js": "https://cdn.jsdelivr.net/gh/repalash/three.js-modded/examples/jsm/postprocessing/UnrealBloomPass.js", | |||||
| "three/examples/jsm/postprocessing/UnrealBloomPass.js": "https://cdn.jsdelivr.net/gh/repalash/three.js-modded@v0.157.1004/examples/jsm/postprocessing/UnrealBloomPass.js", | |||||
| "threepipe": "./../../dist/index.mjs", | "threepipe": "./../../dist/index.mjs", | ||||
| "@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs", | "@threepipe/webgi-plugins": "https://unpkg.com/@threepipe/webgi-plugins@0.2.0/dist/index.mjs", | ||||
| "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs" | "@threepipe/plugin-tweakpane": "./../../plugins/tweakpane/dist/index.mjs" |
| PerspectiveCamera2, | PerspectiveCamera2, | ||||
| PlaneGeometry, | PlaneGeometry, | ||||
| PopmotionPlugin, | PopmotionPlugin, | ||||
| ProgressivePlugin, | |||||
| ProgressivePlugin, shaderReplaceString, | |||||
| Texture, | Texture, | ||||
| ThreeViewer, | ThreeViewer, | ||||
| ToneMapping, | ToneMapping, | ||||
| TonemapPlugin, | TonemapPlugin, | ||||
| UnlitMaterial, | UnlitMaterial, | ||||
| VirtualCamerasPlugin, | VirtualCamerasPlugin, | ||||
| ShaderChunk, | |||||
| } from 'threepipe' | } from 'threepipe' | ||||
| async function init() { | async function init() { | ||||
| const viewer = new ThreeViewer({ | const viewer = new ThreeViewer({ | ||||
| canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | canvas: document.getElementById('mcanvas') as HTMLCanvasElement, | ||||
| debug: true, | debug: true, | ||||
| rgbm: true, | |||||
| msaa: true, | |||||
| plugins: [new ProgressivePlugin(16), LoadingScreenPlugin], | plugins: [new ProgressivePlugin(16), LoadingScreenPlugin], | ||||
| }) | }) | ||||
| const virtualCameras = viewer.addPluginSync(VirtualCamerasPlugin) | const virtualCameras = viewer.addPluginSync(VirtualCamerasPlugin) | ||||
| tonemap.toneMapping = lastTonemapping | tonemap.toneMapping = lastTonemapping | ||||
| }) | }) | ||||
| // (Extra optional) extension decoding rgbm render target when using rgbm | |||||
| if (viewer.renderManager.rgbm) { | |||||
| plane.material.registerMaterialExtensions([{ | |||||
| shaderExtender: (shader, material) => { | |||||
| if (material.map?.colorSpace !== 'rgbm-16') return | |||||
| shader.fragmentShader = shaderReplaceString(shader.fragmentShader, '#include <map_fragment>', ShaderChunk.map_fragment) | |||||
| shader.fragmentShader = shaderReplaceString(shader.fragmentShader, 'texture2D( map, vMapUv )', 'RGBM16ToLinear(texture2D( map, vMapUv ))', {replaceAll: true}) | |||||
| }, | |||||
| computeCacheKey: (material) => material.map?.colorSpace === 'rgbm-16' ? 'rgbm' : '', | |||||
| }]) | |||||
| } | |||||
| } | } | ||||
| init().finally(_testFinish) | init().finally(_testFinish) |
| } | } | ||||
| }, | }, | ||||
| "../../node_modules/three": { | "../../node_modules/three": { | ||||
| "version": "0.153.1006", | |||||
| "version": "0.157.1004", | |||||
| "dev": true, | "dev": true, | ||||
| "license": "MIT", | "license": "MIT", | ||||
| "devDependencies": { | "devDependencies": { | ||||
| "@puppeteer/browsers": "^1.4.1", | |||||
| "@rollup/plugin-node-resolve": "^15.0.1", | "@rollup/plugin-node-resolve": "^15.0.1", | ||||
| "@rollup/plugin-terser": "^0.4.0", | "@rollup/plugin-terser": "^0.4.0", | ||||
| "chalk": "^5.2.0", | "chalk": "^5.2.0", | ||||
| "rollup": "^3.20.2", | "rollup": "^3.20.2", | ||||
| "rollup-plugin-filesize": "^10.0.0", | "rollup-plugin-filesize": "^10.0.0", | ||||
| "rollup-plugin-visualizer": "^5.9.0", | "rollup-plugin-visualizer": "^5.9.0", | ||||
| "servez": "^1.14.2" | |||||
| "servez": "^2.0.0" | |||||
| } | } | ||||
| }, | }, | ||||
| "../../src": {}, | "../../src": {}, |