lzy
/
threepipe
Segui 1
Vota 0
Forka 0
Codice Problemi 0 Pull Requests 0 Rilasci 0 Wiki Attività
Sfoglia il codice sorgente

Add importmap polyfill in examples for safari

master
Palash Bansal 3 anni fa
parent
177c305060
commit
6da430033a
Nessun account collegato all'indirizzo email del committer
16 ha cambiato i file con 183 aggiunte e 119 eliminazioni
Visualizzazione unificata Mostra Diff Stats
  1. 7
    3
      examples/custom-pipeline/index.html
  2. 7
    3
      examples/depth-buffer-plugin/index.html
  3. 18
    14
      examples/drc-load/index.html
  4. 17
    13
      examples/fbx-load/index.html
  5. 7
    3
      examples/glb-export/index.html
  6. 7
    3
      examples/gltf-load/index.html
  7. 13
    9
      examples/hdr-load/index.html
  8. 5
    1
      examples/import-test/index.html
  9. 17
    13
      examples/obj-mtl-load/index.html
  10. 7
    3
      examples/obj-to-glb/index.html
  11. 7
    3
      examples/pmat-material-export/index.html
  12. 7
    3
      examples/render-target-preview/index.html
  13. 14
    10
      examples/sphere-half-float-test/index.html
  14. 14
    10
      examples/sphere-msaa-test/index.html
  15. 14
    10
      examples/sphere-rgbm-test/index.html
  16. 22
    18
      examples/z-prepass/index.html

+ 7
- 3
examples/custom-pipeline/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Custom Pipeline</title> <title>Custom Pipeline</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 7
- 3
examples/depth-buffer-plugin/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Depth Buffer Plugin</title> <title>Depth Buffer Plugin</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 18
- 14
examples/drc-load/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>DRACO(DRC) Load</title> <title>DRACO(DRC) Load</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, ThreeViewer} from 'threepipe'
import {_testFinish, ThreeViewer} from 'threepipe'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})


async function init() {
async function init() {


await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
const result = await viewer.load('https://threejs.org/examples/models/draco/bunny.drc', {
autoCenter: true,
autoScale: true,
})
console.log(result)
}
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
const result = await viewer.load('https://threejs.org/examples/models/draco/bunny.drc', {
autoCenter: true,
autoScale: true,
})
console.log(result)
}


init().then(_testFinish)
init().then(_testFinish)
</script> </script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 17
- 13
examples/fbx-load/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>FBX Load</title> <title>FBX Load</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, ThreeViewer, HemisphereLight} from 'threepipe'
import {_testFinish, HemisphereLight, ThreeViewer} from 'threepipe'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})


async function init() {
async function init() {


viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load('https://threejs.org/examples/models/fbx/Samba Dancing.fbx', {
autoCenter: true,
autoScale: true,
})
console.log(result)
viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load('https://threejs.org/examples/models/fbx/Samba Dancing.fbx', {
autoCenter: true,
autoScale: true,
})
console.log(result)


}
}


init().then(_testFinish)
init().then(_testFinish)
</script> </script>
</head> </head>
<body> <body>

+ 7
- 3
examples/glb-export/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>GLB Export</title> <title>GLB Export</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 7
- 3
examples/gltf-load/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>GLTF Load</title> <title>GLTF Load</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 13
- 9
examples/hdr-load/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>HDR Load</title> <title>HDR Load</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, ThreeViewer} from 'threepipe'
import {_testFinish, ThreeViewer} from 'threepipe'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})
const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas')})


async function init() {
async function init() {


await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
viewer.scene.background = viewer.scene.environment
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
viewer.scene.background = viewer.scene.environment


}
}


init().then(_testFinish)
init().then(_testFinish)
</script> </script>
</head> </head>
<body> <body>

+ 5
- 1
examples/import-test/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Basic Lib Import Test</title> <title>Basic Lib Import Test</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<script type="module" src="./script.js"></script> <script type="module" src="./script.js"></script>
</head> </head>

+ 17
- 13
examples/obj-mtl-load/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>OBJ MTL Load</title> <title>OBJ MTL Load</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, HemisphereLight, ThreeViewer} from 'threepipe'
import {_testFinish, HemisphereLight, ThreeViewer} from 'threepipe'


const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas'), msaa: true})
const viewer = new ThreeViewer({canvas: document.getElementById('mcanvas'), msaa: true})


async function init() {
async function init() {


viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load('https://threejs.org/examples/models/obj/male02/male02.obj', {
autoCenter: true,
autoScale: true,
})
console.log(result)
viewer.scene.addObject(new HemisphereLight(0xffffff, 0x444444, 10))
const result = await viewer.load('https://threejs.org/examples/models/obj/male02/male02.obj', {
autoCenter: true,
autoScale: true,
})
console.log(result)


}
}


init().then(_testFinish)
init().then(_testFinish)
</script> </script>
</head> </head>
<body> <body>

+ 7
- 3
examples/obj-to-glb/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>OBJ To GLB</title> <title>OBJ To GLB</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 7
- 3
examples/pmat-material-export/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>PMAT(Physical) Material export</title> <title>PMAT(Physical) Material export</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 7
- 3
examples/render-target-preview/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Render Target Preview</title> <title>Render Target Preview</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script> <script id="example-script" type="module" src="./script.js" data-scripts="./script.ts;./script.js"></script>
</head> </head>
<body> <body>
<div id="canvas-container"> <div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div> </div>


</body> </body>

+ 14
- 10
examples/sphere-half-float-test/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Half float render pipeline test</title> <title>Half float render pipeline test</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, Mesh, SphereGeometry, UnlitMaterial, ThreeViewer} from 'threepipe'
import {_testFinish, Mesh, SphereGeometry, ThreeViewer, UnlitMaterial} from 'threepipe'


const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
rgbm: true,
})
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
rgbm: true,
})


const sphere = new Mesh(new SphereGeometry(1, 32, 32), new UnlitMaterial({color: '#ff0000'}))
viewer.scene.addObject(sphere)
const sphere = new Mesh(new SphereGeometry(1, 32, 32), new UnlitMaterial({color: '#ff0000'}))
viewer.scene.addObject(sphere)


_testFinish()
_testFinish()
</script> </script>
</head> </head>
<body> <body>

+ 14
- 10
examples/sphere-msaa-test/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>MSAA Test</title> <title>MSAA Test</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, Mesh, SphereGeometry, UnlitMaterial, ThreeViewer} from 'threepipe'
import {_testFinish, Mesh, SphereGeometry, ThreeViewer, UnlitMaterial} from 'threepipe'


const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
})
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
})


const sphere = new Mesh(new SphereGeometry(1, 32, 32), new UnlitMaterial({color: '#ff0000'}))
viewer.scene.addObject(sphere)
const sphere = new Mesh(new SphereGeometry(1, 32, 32), new UnlitMaterial({color: '#ff0000'}))
viewer.scene.addObject(sphere)


_testFinish()
_testFinish()
</script> </script>
</head> </head>
<body> <body>

+ 14
- 10
examples/sphere-rgbm-test/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>RGBM Render pipeline test</title> <title>RGBM Render pipeline test</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, Mesh, SphereGeometry, UnlitMaterial, ThreeViewer} from 'threepipe'
import {_testFinish, Mesh, SphereGeometry, ThreeViewer, UnlitMaterial} from 'threepipe'


const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
rgbm: true,
})
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
rgbm: true,
})


const sphere = new Mesh(new SphereGeometry(1, 32, 32), new UnlitMaterial({color: '#ff0000'}))
viewer.scene.addObject(sphere)
const sphere = new Mesh(new SphereGeometry(1, 32, 32), new UnlitMaterial({color: '#ff0000'}))
viewer.scene.addObject(sphere)


_testFinish()
_testFinish()
</script> </script>
</head> </head>
<body> <body>

+ 22
- 18
examples/z-prepass/index.html Vedi File

<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Z-Prepass test</title> <title>Z-Prepass test</title>
<!-- Import map -->
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap"> <script type="importmap">
{ {
"imports": { "imports": {
"threepipe": "./../../dist/index.mjs" "threepipe": "./../../dist/index.mjs"
} }
} }

</script> </script>
<style id="example-style"> <style id="example-style">
html, body, #canvas-container, #mcanvas { html, body, #canvas-container, #mcanvas {
overflow: hidden; overflow: hidden;
} }
</style> </style>
<script type="module" src="../js-utils/simple-code-preview.mjs"> </script>
<script type="module" src="../js-utils/simple-code-preview.mjs"></script>
<script id="example-script" type="module"> <script id="example-script" type="module">
import {_testFinish, DepthBufferPlugin, UnsignedByteType, ThreeViewer} from 'threepipe'
import {_testFinish, DepthBufferPlugin, ThreeViewer, UnsignedByteType} from 'threepipe'


async function init() {
async function init() {


const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
rgbm: true,
zPrepass: true,
})
const viewer = new ThreeViewer({
canvas: document.getElementById('mcanvas'),
msaa: true,
rgbm: true,
zPrepass: true,
})


viewer.addPluginSync(new DepthBufferPlugin(UnsignedByteType, true))
viewer.addPluginSync(new DepthBufferPlugin(UnsignedByteType, true))


await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
await viewer.load('https://threejs.org/examples/models/gltf/kira.glb', {
autoCenter: true,
autoScale: true,
})
await viewer.setEnvironmentMap('https://threejs.org/examples/textures/equirectangular/venice_sunset_1k.hdr')
await viewer.load('https://threejs.org/examples/models/gltf/kira.glb', {
autoCenter: true,
autoScale: true,
})


}
}


init().then(_testFinish)
init().then(_testFinish)
</script> </script>
</head> </head>
<body> <body>

Write Preview
Loading…
Annulla
Salva