diff --git a/.prettierignore b/.prettierignore index 1e7d9e61..bba67557 100644 --- a/.prettierignore +++ b/.prettierignore @@ -2,9 +2,7 @@ dist docs node_modules -examples types -*.html *.json *.js *.lock diff --git a/README.md b/README.md index dd6a1944..e49422a3 100644 --- a/README.md +++ b/README.md @@ -5,8 +5,8 @@ ![Dependabot Badge](https://flat.badgen.net/dependabot/thepracticaldev/dev.to?icon=dependabot) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![CI](https://github.com/webarkit/ARnft/actions/workflows/CI.yml/badge.svg)](https://github.com/webarkit/ARnft/actions/workflows/CI.yml) -[![Build ARnft CI](https://github.com/webarkit/ARnft/actions/workflows/main.yml/badge.svg)](https://github.com/webarkit/ARnft/actions/workflows/main.yml) -![twitter](https://flat.badgen.net/twitter/follow/WebarkitO) +[![Build ARnft CI](https://github.com/webarkit/ARnft/actions/workflows/build.yml/badge.svg)](https://github.com/webarkit/ARnft/actions/workflows/main.yml) +![twitter](https://flat.badgen.net/badge/twitter/WebarkitO/follow) # ARnft - WebAR with NFT diff --git a/examples/arNFT_autoupdate_example.html b/examples/arNFT_autoupdate_example.html index a80a52f6..cd882fcb 100644 --- a/examples/arNFT_autoupdate_example.html +++ b/examples/arNFT_autoupdate_example.html @@ -1,101 +1,107 @@ - + - - - ARnft example showing a simple red cube - - - + + + ARnft example showing a simple red cube + + + - - - 🖼 Marker Image - + + + 🖼 Marker Image + - + - - + const fpsInterval = 1000 / 30; + let now = Date.now(), + elapsed = 0, + then = now; + const tick = () => { + now = Date.now(); + elapsed = now - then; + sceneThreejs.draw(); + if (elapsed > fpsInterval) { + then = now - (elapsed % fpsInterval); + nft.update(); + } + window.requestAnimationFrame(tick); + }; + tick(); + }); + }) + .catch((error) => { + console.log(error); + }); + + diff --git a/examples/arNFT_container_example.html b/examples/arNFT_container_example.html index 093d3575..9df75517 100644 --- a/examples/arNFT_container_example.html +++ b/examples/arNFT_container_example.html @@ -1,112 +1,110 @@ - + - - - - ARnft example showing a simple red cube - - - - - - - - 🖼 Marker Image - - - - - + + - -
-
-

Main

-
-
-

Worker

+ .catch((error) => { + console.log(error); + }); + + +
+
+

Main

+
+
+

Worker

+
-
- -
- arNFT.js logo - Loading, please wait... -
-
- - -
- +
+ arNFT.js logo + Loading, please wait... +
- \ No newline at end of file +
+ + +
+ + diff --git a/examples/arNFT_event_example.html b/examples/arNFT_event_example.html index fc9373d2..1f575f84 100644 --- a/examples/arNFT_event_example.html +++ b/examples/arNFT_event_example.html @@ -1,100 +1,103 @@ - + + + + ARnft event example showing a simple red cube + + + - - - ARnft event example showing a simple red cube - - - + + + 🖼 Marker Image + +
+ Dispose ARnft +
- - - - 🖼 Marker Image - -
Dispose ARnft
- - - - - window.addEventListener('initARnft', function (e) { - console.log("ARnft is starting!"); - }) - let nftOut; - let width = 640; - let height = 480; - ARnft.init(width, height, [["examples/DataNFT/pinball"]], [['pinball']], 'config-event.json', true) - .then((nft) => { - let mat = new THREE.MeshLambertMaterial({ - color: 0xff0000 - }); - let boxGeom = new THREE.BoxGeometry(1, 1, 1); - let cube = new THREE.Mesh(boxGeom, mat); - cube.position.z = 90; - cube.scale.set(180, 180, 180); + - - + }; + + diff --git a/examples/arNFT_example.html b/examples/arNFT_example.html index a0dbf685..467e4bfe 100644 --- a/examples/arNFT_example.html +++ b/examples/arNFT_example.html @@ -1,92 +1,89 @@ - + + + + ARnft example showing a simple red cube + + + - - - ARnft example showing a simple red cube - - - + + + 🖼 Marker Image + - + - - 🖼 Marker Image - + + let width = 640; + let height = 480; + ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config.json", true) + .then((nft) => { + let mat = new THREE.MeshLambertMaterial({ + color: 0xff0000, + }); + let boxGeom = new THREE.BoxGeometry(1, 1, 1); + let cube = new THREE.Mesh(boxGeom, mat); + cube.position.z = 90; + cube.scale.set(180, 180, 180); - - - - + .catch((error) => { + console.log(error); + }); + + diff --git a/examples/arNFT_gltf_brave_robot_example.html b/examples/arNFT_gltf_brave_robot_example.html index 0f4ff452..315f4339 100644 --- a/examples/arNFT_gltf_brave_robot_example.html +++ b/examples/arNFT_gltf_brave_robot_example.html @@ -1,95 +1,94 @@ - + + + + ARnft example with a gltf model + + + - - - ARnft example with a gltf model - - - + + + 🖼 Marker Image + - + - - 🖼 Marker Image - + + let width = 640; + let height = 480; + ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config_brave_robot.json", true) + .then((nft) => { + document.addEventListener("containerEvent", function (ev) { + let canvas = document.getElementById("canvas"); + let fov = (0.8 * 180) / Math.PI; + let ratio = width / height; + let config = { + renderer: { + alpha: true, + antialias: true, + context: null, + precision: "mediump", + premultipliedAlpha: true, + stencil: true, + depth: true, + logarithmicDepthBuffer: true, + }, + camera: { + fov: fov, + ratio: ratio, + near: 0.01, + far: 1000, + }, + }; - - - + + diff --git a/examples/arNFT_gltf_example.html b/examples/arNFT_gltf_example.html index 6276b349..5f6ee0f0 100644 --- a/examples/arNFT_gltf_example.html +++ b/examples/arNFT_gltf_example.html @@ -1,89 +1,88 @@ - + + + + ARnft example with a gltf model + + + - - - ARnft example with a gltf model - - - + + + 🖼 Marker Image + - + - - 🖼 Marker Image - + + let width = 640; + let height = 480; + ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config.json", true) + .then((nft) => { + document.addEventListener("containerEvent", function (ev) { + let canvas = document.getElementById("canvas"); + let fov = (0.8 * 180) / Math.PI; + let ratio = window.clientWidth / window.clientHeight; + let config = { + renderer: { + alpha: true, + antialias: true, + context: null, + precision: "mediump", + premultipliedAlpha: true, + stencil: true, + depth: true, + logarithmicDepthBuffer: true, + }, + camera: { + fov: fov, + ratio: ratio, + near: 0.01, + far: 1000, + }, + }; - - - + .catch((error) => { + console.log(error); + }); + + diff --git a/examples/arNFT_gltf_flamingo_example.html b/examples/arNFT_gltf_flamingo_example.html index b300934e..87fb84ce 100644 --- a/examples/arNFT_gltf_flamingo_example.html +++ b/examples/arNFT_gltf_flamingo_example.html @@ -1,4 +1,4 @@ - + @@ -18,19 +18,19 @@ - - 🖼 Marker Image - + + let width = 640; + let height = 480; + ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config.json", true) + .then((nft) => { + document.addEventListener("containerEvent", function (ev) { + let canvas = document.getElementById("canvas"); + let fov = (0.8 * 180) / Math.PI; + let ratio = width / height; + let config = { + renderer: { + alpha: true, + antialias: true, + context: null, + precision: "mediump", + premultipliedAlpha: true, + stencil: true, + depth: true, + logarithmicDepthBuffer: true, + }, + camera: { + fov: fov, + ratio: ratio, + near: 0.01, + far: 1000, + }, + }; - - - - \ No newline at end of file + .catch((error) => { + console.log(error); + }); + + + diff --git a/examples/arNFT_initialize_raw_example.html b/examples/arNFT_initialize_raw_example.html index 6fa8e651..55fa9b0d 100644 --- a/examples/arNFT_initialize_raw_example.html +++ b/examples/arNFT_initialize_raw_example.html @@ -1,115 +1,107 @@ - + - - - - ARnft example showing a simple red cube - - - - - - - -
- - - -
- - 🖼 Marker Image - - - - + + - - - - - \ No newline at end of file + .catch((error) => { + console.log(error); + }); + } + // init the app... + init(video); + + + diff --git a/examples/arNFT_multi_dispose_example.html b/examples/arNFT_multi_dispose_example.html index 75dd4c5a..580e7aa2 100644 --- a/examples/arNFT_multi_dispose_example.html +++ b/examples/arNFT_multi_dispose_example.html @@ -1,158 +1,155 @@ - + - - - - ARnft multi example showing some simple meshes - - - - - - - - 🖼 Marker Image - -
-
- Dispose ARnft
-
- Dispose Pinball
-
- - - + + - - - - \ No newline at end of file + }; + + + diff --git a/examples/arNFT_multi_example.html b/examples/arNFT_multi_example.html index b8f0686a..9f5593a1 100644 --- a/examples/arNFT_multi_example.html +++ b/examples/arNFT_multi_example.html @@ -1,137 +1,134 @@ - + - - - - ARnft multi example showing some simple meshes - - - - - - - - 🖼 Marker Image - - - - - + + - - - - \ No newline at end of file + .catch((error) => { + console.log(error); + }); + + + diff --git a/examples/arNFT_multi_one_worker_example.html b/examples/arNFT_multi_one_worker_example.html index c3b3ce85..236122c3 100644 --- a/examples/arNFT_multi_one_worker_example.html +++ b/examples/arNFT_multi_one_worker_example.html @@ -1,92 +1,96 @@ - + + + + ARnft example showing a simple red cube + + + - - - ARnft example showing a simple red cube - - - + + + 🖼 Marker Image + - + - - 🖼 Marker Image - + + let width = 640; + let height = 480; + ARnft.init( + width, + height, + [["examples/DataNFT/pinball", "examples/DataNFT/kuva", "examples/DataNFT/chalk_multi"]], + [["pinball", "kuva"]], + "config.json", + true + ) + .then((nft) => { + let mat = new THREE.MeshLambertMaterial({ + color: 0xff0000, + }); + let boxGeom = new THREE.BoxGeometry(1, 1, 1); + let cube = new THREE.Mesh(boxGeom, mat); + cube.position.z = 90; + cube.scale.set(180, 180, 180); - - - - + .catch((error) => { + console.log(error); + }); + + diff --git a/examples/arNFT_video_example.html b/examples/arNFT_video_example.html index cd39b6a2..5bf50f24 100644 --- a/examples/arNFT_video_example.html +++ b/examples/arNFT_video_example.html @@ -1,87 +1,86 @@ - + + + + ARnft example showing a video + + + - - - ARnft example showing a video - - - + + + 🖼 Marker Image + + - + - - 🖼 Marker Image - - + + let width = 640; + let height = 480; + ARnft.init(width, height, [["examples/DataNFT/pinball"]], [["pinball"]], "config.json", true) + .then((nft) => { + document.addEventListener("containerEvent", function (ev) { + let canvas = document.getElementById("canvas"); + let fov = (0.8 * 180) / Math.PI; + let ratio = width / height; + let config = { + renderer: { + alpha: true, + antialias: true, + context: null, + precision: "mediump", + premultipliedAlpha: true, + stencil: true, + depth: true, + logarithmicDepthBuffer: true, + }, + camera: { + fov: fov, + ratio: ratio, + near: 0.01, + far: 1000, + }, + }; - - - - \ No newline at end of file + .catch((error) => { + console.log(error); + }); + + + diff --git a/examples/css/nft-style.css b/examples/css/nft-style.css index 6f76e6be..a3b90c26 100644 --- a/examples/css/nft-style.css +++ b/examples/css/nft-style.css @@ -1,150 +1,148 @@ html, body { - margin: 0; - overflow: hidden; + margin: 0; + overflow: hidden; } html { - font-family: sans-serif; + font-family: sans-serif; } #loading { - width: 100%; - position: absolute; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.45); - z-index: 9999999; + width: 100%; + position: absolute; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.45); + z-index: 9999999; } #loading img { height: 5em; } -#loading span{ - color: black; - font-weight: bold; +#loading span { + color: black; + font-weight: bold; } .ui { - position: fixed; + position: fixed; - margin: 0.5rem; + margin: 0.5rem; - background-color: rgba( 255,255,255,0.6 ); - border-radius: 6px; + background-color: rgba(255, 255, 255, 0.6); + border-radius: 6px; } .stats { - top: 0; - left: 0; - z-index: 200; - margin: 0.5rem; - padding: 0.5rem 0.5rem 0; + top: 0; + left: 0; + z-index: 200; + margin: 0.5rem; + padding: 0.5rem 0.5rem 0; } .stats-item { - margin: 0 0 0.5rem; - + margin: 0 0 0.5rem; } .stats-item-title { - margin: 0 0 0.25rem; + margin: 0 0 0.25rem; - font-size: 0.75rem; + font-size: 0.75rem; } #stats div { - position: relative !important; + position: relative !important; } .marker { - right: 0; - bottom: 0; - z-index: 200; - margin: 0.5rem; - padding: 0.25rem 0.5rem; + right: 0; + bottom: 0; + z-index: 200; + margin: 0.5rem; + padding: 0.25rem 0.5rem; - font-size: 0.75rem; - color: inherit; - text-decoration: none; + font-size: 0.75rem; + color: inherit; + text-decoration: none; } .flex-container { - left: 12rem; - display: flex; - flex-direction: column; + left: 12rem; + display: flex; + flex-direction: column; } .flex-container > div { - color: red; - background-color: rgba( 255,255,255,0.6 ); - border-radius: 6px; - z-index: 200; - width: 100px; - margin: 10px; - margin-left: auto; - text-align: center; - line-height: 75px; - font-size: .8em; - - text-decoration: none; - - cursor: pointer; + color: red; + background-color: rgba(255, 255, 255, 0.6); + border-radius: 6px; + z-index: 200; + width: 100px; + margin: 10px; + margin-left: auto; + text-align: center; + line-height: 75px; + font-size: 0.8em; + + text-decoration: none; + + cursor: pointer; } #dispose { - right: 25rem; - bottom: 0; - z-index: 200; - margin: 0.5rem; - padding: 0.25rem 0.5rem; + right: 25rem; + bottom: 0; + z-index: 200; + margin: 0.5rem; + padding: 0.25rem 0.5rem; - font-size: 0.75rem; - color: red; - background-color: rgba(210, 30,0,0); - text-decoration: none; + font-size: 0.75rem; + color: red; + background-color: rgba(210, 30, 0, 0); + text-decoration: none; - cursor: pointer; + cursor: pointer; } #app { - position: fixed; - top: 0; - left: 0; + position: fixed; + top: 0; + left: 0; - width: 100%; - height: 100%; + width: 100%; + height: 100%; } #video { - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; - display: block; - width: 100% !important; - height: 100% !important; - object-fit: cover; + display: block; + width: 100% !important; + height: 100% !important; + object-fit: cover; } #canvas { - position: absolute; - left: 0; - top: 0; - z-index: 100; + position: absolute; + left: 0; + top: 0; + z-index: 100; - display: block; - width: 100% !important; - height: 100% !important; - object-fit: cover; + display: block; + width: 100% !important; + height: 100% !important; + object-fit: cover; } - #arvideo { - display: none; + display: none; }