lzy
/
threepipe
關注 1
收藏 0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

Add importmap polyfill in examples for safari

master
Palash Bansal 3 年之前
父節點
177c305060
當前提交
6da430033a
沒有連結到貢獻者的電子郵件帳戶。
共有 16 個檔案被更改，包括 183 行新增 和 119 行删除
分割檢視 顯示文件統計
  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 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 7
- 3
examples/depth-buffer-plugin/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 18
- 14
examples/drc-load/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,28 +23,28 @@
overflow: hidden;
}
</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">
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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 17
- 13
examples/fbx-load/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,24 +23,24 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

+ 7
- 3
examples/glb-export/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 7
- 3
examples/gltf-load/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 13
- 9
examples/hdr-load/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,20 +23,20 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

+ 5
- 1
examples/import-test/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

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

+ 17
- 13
examples/obj-mtl-load/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,24 +23,24 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

+ 7
- 3
examples/obj-to-glb/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 7
- 3
examples/pmat-material-export/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 7
- 3
examples/render-target-preview/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,12 +23,12 @@
overflow: hidden;
}
</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>
</head>
<body>
<div id="canvas-container">
<canvas id="mcanvas"></canvas>
<canvas id="mcanvas"></canvas>
</div>

</body>

+ 14
- 10
examples/sphere-half-float-test/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,19 +23,19 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

+ 14
- 10
examples/sphere-msaa-test/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,19 +23,19 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

+ 14
- 10
examples/sphere-rgbm-test/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,19 +23,19 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

+ 22
- 18
examples/z-prepass/index.html 查看文件

@@ -3,13 +3,17 @@
<head>
<meta charset="UTF-8">
<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">
{
"imports": {
"threepipe": "./../../dist/index.mjs"
}
}

</script>
<style id="example-style">
html, body, #canvas-container, #mcanvas {
@@ -19,30 +23,30 @@
overflow: hidden;
}
</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">
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>
</head>
<body>

Write Preview
Loading…
取消
儲存