Skip to content

Commit 6f68622

Browse files
kalwaltkalwalt
authored
Merge pull request #32 from webarkit/jsartoolkitNFT-example
updating examples and new JsartoolkitNFT example
2 parents 96ddbd9 + c812bfd commit 6f68622

23 files changed

+894
-15
lines changed

‎CODE_OF_CONDUCT.md

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# Contributor Covenant Code of Conduct
2+
3+
## Our Pledge
4+
5+
In the interest of fostering an open and welcoming environment, we as
6+
contributors and maintainers pledge to making participation in our project and
7+
our community a harassment-free experience for everyone, regardless of age, body
8+
size, disability, ethnicity, sex characteristics, gender identity and expression,
9+
level of experience, education, socio-economic status, nationality, personal
10+
appearance, race, religion, or sexual identity and orientation.
11+
12+
## Our Standards
13+
14+
Examples of behavior that contributes to creating a positive environment
15+
include:
16+
17+
* Using welcoming and inclusive language
18+
* Being respectful of differing viewpoints and experiences
19+
* Gracefully accepting constructive criticism
20+
* Focusing on what is best for the community
21+
* Showing empathy towards other community members
22+
23+
Examples of unacceptable behavior by participants include:
24+
25+
* The use of sexualized language or imagery and unwelcome sexual attention or
26+
advances
27+
* Trolling, insulting/derogatory comments, and personal or political attacks
28+
* Public or private harassment
29+
* Publishing others' private information, such as a physical or electronic
30+
address, without explicit permission
31+
* Other conduct which could reasonably be considered inappropriate in a
32+
professional setting
33+
34+
## Our Responsibilities
35+
36+
Project maintainers are responsible for clarifying the standards of acceptable
37+
behavior and are expected to take appropriate and fair corrective action in
38+
response to any instances of unacceptable behavior.
39+
40+
Project maintainers have the right and responsibility to remove, edit, or
41+
reject comments, commits, code, wiki edits, issues, and other contributions
42+
that are not aligned to this Code of Conduct, or to ban temporarily or
43+
permanently any contributor for other behaviors that they deem inappropriate,
44+
threatening, offensive, or harmful.
45+
46+
## Scope
47+
48+
This Code of Conduct applies both within project spaces and in public spaces
49+
when an individual is representing the project or its community. Examples of
50+
representing a project or community include using an official project e-mail
51+
address, posting via an official social media account, or acting as an appointed
52+
representative at an online or offline event. Representation of a project may be
53+
further defined and clarified by project maintainers.
54+
55+
## Enforcement
56+
57+
Instances of abusive, harassing, or otherwise unacceptable behavior may be
58+
reported by contacting the project team at [email protected]. All
59+
complaints will be reviewed and investigated and will result in a response that
60+
is deemed necessary and appropriate to the circumstances. The project team is
61+
obligated to maintain confidentiality with regard to the reporter of an incident.
62+
Further details of specific enforcement policies may be posted separately.
63+
64+
Project maintainers who do not follow or enforce the Code of Conduct in good
65+
faith may face temporary or permanent repercussions as determined by other
66+
members of the project's leadership.
67+
68+
## Attribution
69+
70+
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71+
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72+
73+
[homepage]: https://www.contributor-covenant.org
74+
75+
For answers to common questions about this code of conduct, see
76+
https://www.contributor-covenant.org/faq

‎Gemfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ gem "jekyll", "~> 3.9.0"
1111
# This is the default theme for new Jekyll sites. You may change this to anything you like.
1212
gem "bulma-clean-theme"
1313
group :jekyll_plugins do
14-
gem 'jekyll-pwa-plugin'
14+
gem "jekyll-pwa-plugin", "2.2.3"
1515
end
1616
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
1717
# uncomment the line below. To upgrade, run `bundle update github-pages`.

‎LICENSE

+339
Large diffs are not rendered by default.

‎_includes/head-scripts.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,4 +7,4 @@
77

88
gtag('config', 'G-S3HVPJX68V');
99
</script>
10-
<link rel="manifest" href="manifest.json">
10+
<link rel="manifest" href="/manifest.json">

‎_posts/2020-12-26-new-webarkit-netlify-open-source-team.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
layout: post
3+
slug: New WebARKit Netlify Open Source team
4+
title: WebARKit has obtained the Netlify Open Source Team plan
5+
subtitle: Latest news around WebARKit,Jsartoolkit5 and ARnft development
6+
description: We obtained a nice gitft for Christhmas, the upgrade to the
7+
OpenSource Team plan for our Netlify account We added a new jsartoolkit5
8+
example and we are discussing the future development of ARnft and WebARKit.
9+
author: Walter Perdan
10+
date: 2020-12-26 17:12
11+
lang: en
12+
seo:
13+
datePublished: 2020-12-26
14+
type: NewsArticle
15+
author: Walter Perdan
16+
image: /resources/webarkit-logo-social.jpg
17+
intro_paragraph: WebARKit is evolving to a more robust Open Source community,
18+
read the article for more...
19+
---
20+
# We are now a Netlify Open Source Team!
21+
22+
![Webarkit Netlify Open Source Team](/assets/images/uploads/webar_kit_netlify_open_source_team.jpg "Screenshot fo the board for the WebARKit Netlify Open Source Team.")
23+
24+
That is the most important news, our request was accepted some days before Christhmas, what better gift! [Netlify](https://www.netlify.com/) is a well known web service. Another important news: we have also our **OpenCollective** profile: [WebArKit](https://opencollective.com/webarkit); we have just started this journey, so wait until we have finish the setup.
25+
26+
A lot of discussions and sharing of ideas about the future of **WebARKit** and **ARnft**, for sure in the next weeks , month we will release a new improved version of ARnft and probably the first WebAR Kit version. We don't set up a milestone or a releasing date, but we are working on this.
27+
28+
Recently i have also relased a new ARnft version with some nice features see this [PR](https://github.com/webarkit/ARnft/pull/154), this is about Threejs rendering system. I added some important event listeners that let you built more advanced stuff. I also removed the Ofscreencanvas that was causing an issue.
29+
30+
About Arnft: our idea is to make ARnft more agnostic in rispect to every rendering engine. Our plan is to evolve it to a modular system in which the developer may choose his preferred render engine (Three.js, Babylonjs....) without any constrictions. For doing this we will switch to a typed script version of the library, that will let us more freedom and will add more flexibility.
31+
32+
If you want partecipate to the discussion, join us on the discussions board see this topic: [The Future of ARnft and WebARKit](https://github.com/webarkit/ARnft/discussions/156) 
33+
34+
More to come...

‎_posts/2021-04-07-jsartoolkitnft-typescript-version.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
---
2+
layout: post
3+
slug: "jsartoolkitnft typescript version "
4+
title: The new jsartoolkitNFT with Typescript support
5+
subtitle: New feature added for a better development experience
6+
description: jsartoolkitNFT was converted to the typesrcipt language, in this
7+
flash article we illustrate this feature and what's the next plans.
8+
author: Walter Perdan
9+
date: 2021-04-07 12:04
10+
lang: en
11+
seo:
12+
datePublished: 2021-04-07
13+
type: NewsArticle
14+
author: Walter Perdan
15+
image: ../examples/Data/JsartoolkitNFT-logo.gif
16+
intro_paragraph: We developed a new jsartolkitNFT for a better development
17+
phase, easy integration and our upcoming new ARnft library.
18+
---
19+
We started to develop a **Typescript** version of [jsartoolkitNFT](https://github.com/webarkit/jsartoolkitNFT) because we plan to transcode our libraries with this language. That was the first step, the next one will be transcoding [ARnft](https://github.com/webarkit/ARnft), the process is on the way see the [PR](https://github.com/webarkit/ARnft/pull/158), but this wasn't possible without before porting jsartoolkitNFT.
20+
21+
**JsartoolkitNFT** our small libraries for **WebAR** has arrived to [0.9.1](https://github.com/webarkit/jsartoolkitNFT/releases/tag/0.9.1) version, and you can install as a module with npm:
22+
23+
`npm install @kalwalt/jsartoolkit-nft`
24+
25+
We will publish in the webarkit scoped name when it will be almost stable. We will advise you in our blog with all the informations.
26+
27+
We didn't make any improve apart the Typescript langauage conversion, there are still some little refinements to do in the code, that is planned to realize.
28+
29+
In regards of the new Typescript feature, you don't need to download any other typed library, `types` folder is present in the root folder, so everything you need to do is to install the package and import it in you project:
30+
31+
`import AR from "@kalwalt/jsartoolkit-nft"`
32+
33+
If you are developing on a Javascript or Typescript ambient this does the same. But in a Typescript environnment you will get all of the advantages, let say intellisense support and type checking.
34+
35+
We are sure that you will develop many interesting projects with it. Let us know on what are you working!
36+
37+
See you in a next Blog article!

‎admin/config.yml

+3-2
Original file line numberDiff line numberDiff line change
@@ -31,13 +31,14 @@ collections: # A list of collections the CMS should be able to edit
3131
- {label: "Layout", name: "layout", widget: "hidden", default: "post"}
3232
- {label: "Slug", name: "slug", widget: "string"}
3333
- {label: "Title", name: "title", widget: "string", tagname: "h1"}
34+
- {label: "SubTitle", name: "subtitle", widget: "string", tagname: "h2"}
3435
- {label: "Description", name: "description", widget: "text"}
3536
- label: "Author"
3637
name: "author"
3738
widget: "select"
3839
options:
3940
- { label: "Walter Perdan", value: "Walter Perdan" }
40-
- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:MM:SS"}
41+
- {label: "Publish Date", name: "date", widget: "datetime", format: "YYYY-MM-DD HH:MM"}
4142
- {label: "Language", name: "lang", widget: "text", default: "en"}
4243
- label: "Seo"
4344
name: "seo"
@@ -57,4 +58,4 @@ collections: # A list of collections the CMS should be able to edit
5758
- {label: "Date_Published", name: "datePublished", widget: "date", format: "YYYY-MM-DD"}
5859
- {label: "Image_path", name: "image", widget: "string"}
5960
- {label: "Intro Paragraph", name: "intro_paragraph", widget: "markdown", required: false}
60-
- {label: "Body", name: "body", widget: "markdown", required: false}
61+
- {label: "Body", name: "body", widget: "markdown", required: false}

‎assets/images/uploads/webar_kit_netlify_open_source_team.jpg

109 KB
Loading

‎assets/images/uploads/webarkit-logo-social.jpg

121 KB
Loading

‎dist/ARToolkitNFT.js

+2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/ARnft.js

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/ARToolkitNFT_ES6_example.html

+92
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>ARToolkitNFT_ES6 example</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1">
7+
<link rel="stylesheet" href="css/nft-style.css">
8+
</head>
9+
<body>
10+
<div id="loading" >
11+
<img src="Data/JsartoolkitNFT-logo.gif"/>
12+
<span class="loading-text">Loading, please wait</span>
13+
</div>
14+
<!--
15+
==================
16+
STATS
17+
==================
18+
-->
19+
<div id="stats" class="ui stats">
20+
<div id="stats1" class="stats-item">
21+
<p class="stats-item-title">
22+
Main
23+
</p>
24+
</div>
25+
26+
<div id="stats2" class="stats-item">
27+
<p class="stats-item-title">
28+
Worker
29+
</p>
30+
</div>
31+
</div>
32+
33+
<div id="app">
34+
<video
35+
loop
36+
autoplay
37+
muted
38+
playsinline
39+
id="video">
40+
</video>
41+
<canvas id="canvas"></canvas>
42+
</div>
43+
<script src="../dist/ARToolkitNFT.js"></script>
44+
<script src="Data/js/third_party/three.js/stats.min.js"></script>
45+
<script src="Data/js/third_party/three.js/three.min.js"></script>
46+
<script src="index.js"></script>
47+
<script src="threejs_worker_ES6.js"></script>
48+
49+
<script>
50+
/**
51+
* STATS
52+
*/
53+
var statsMain = new Stats();
54+
statsMain.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
55+
document.getElementById( 'stats1' ).appendChild( statsMain.dom );
56+
57+
var statsWorker = new Stats();
58+
statsWorker.showPanel( 0 ); // 0: fps, 1: ms, 2: mb, 3+: custom
59+
document.getElementById( 'stats2' ).appendChild( statsWorker.dom );
60+
61+
window.addEventListener('load', () => {
62+
console.log('init ARToolkitNFT...');
63+
initCamera()
64+
.then(video => {
65+
66+
// start camera playback
67+
sourceVideo = video;
68+
sourceVideo.width = 640;
69+
sourceVideo.height = 480;
70+
sourceVideo.play();
71+
72+
// init target canvas
73+
initTargetCanvas();
74+
75+
return new Promise(resolve => {
76+
sourceVideo.addEventListener("loadeddata", event => {
77+
console.log("Camera is ready");
78+
resolve();
79+
});
80+
});
81+
})
82+
.then(_ => {
83+
84+
start('../examples/DataNFT/pinball', video, video.videoWidth, video.videoHeight, function() { statsMain.update() }, function() { statsWorker.update() })
85+
86+
});
87+
})
88+
</script>
89+
90+
</body>
91+
92+
</html>

‎examples/Data/JsartoolkitNFT-logo.gif

29.8 KB
Loading

‎examples/Data/js/third_party/three.js/three.min.js

+6-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/arNFT_example.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
ARnft.ARnft.init(640, 480, "examples/DataNFT/pinball", 'config.json', true)
2323
.then((nft) => {
2424
let mat = new THREE.MeshLambertMaterial({color: 0xff0000});
25-
let cubeGeom = new THREE.CubeGeometry(1,1,1);
26-
let cube = new THREE.Mesh(cubeGeom, mat);
25+
let boxGeom = new THREE.BoxGeometry(1,1,1);
26+
let cube = new THREE.Mesh(boxGeom, mat);
2727
cube.position.z = 90;
2828
cube.scale.set(180,180,180);
2929
nft.add(cube);

‎examples/config.json

+11-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
{
22
"addPath": "",
33
"cameraPara": "examples/Data/camera_para.dat",
4+
"container": {
5+
"create": true,
6+
"containerName": "",
7+
"canvasName": ""
8+
},
49
"videoSettings": {
510
"width": {
611
"min": 640,
@@ -13,6 +18,7 @@
1318
"facingMode": "environment"
1419
},
1520
"loading": {
21+
"create": true,
1622
"logo": {
1723
"src": "Data/arNFT-logo.gif",
1824
"alt": "arNFT.js logo"
@@ -23,6 +29,10 @@
2329
"type": "three",
2430
"alpha": true,
2531
"antialias": true,
26-
"precision": "mediump"
32+
"precision": "mediump",
33+
"objVisibility": false
34+
},
35+
"stats": {
36+
"createHtml": true
2737
}
2838
}

‎examples/index.html

+4
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@
99
<a href="/examples/simple_2d_tracking.html"><h2>ArtoolkitX.js example with 2d tracking</h2></a>
1010
<p>A simple example that display a cube and a grid. You need the <a href="/examples/Data/Alterra_Postcard_2.jpg">Alterra image</a>
1111
</div>
12+
<div class='box'>
13+
<a href="/examples/ARToolkitNFT_ES6_example.html"><h2>JsartoolkitNFT example with NFT tracking</h2></a>
14+
<p>A simple example that display a simple sphere. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>
15+
</div>
1216
<div class='box'>
1317
<a href="/examples/arNFT_example.html"><h2>ARnft example with NFT tracking</h2></a>
1418
<p>A simple example that display a red cube. You need the <a href="/examples/Data/pinball.jpg">Pinball image</a>

‎examples/index.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
let sourceVideo;
2+
let targetCanvas;
3+
4+
async function initCamera() {
5+
6+
const constraints = {
7+
audio: false,
8+
video: {
9+
// using the "environment" rear camera
10+
facingMode: "environment",
11+
// using the "user" front camera
12+
// facingMode: "user",
13+
width: 640,
14+
height: 480
15+
}
16+
};
17+
18+
// initialize video source
19+
const video = document.querySelector("#video");
20+
const stream = await navigator.mediaDevices.getUserMedia(constraints);
21+
video.srcObject = stream;
22+
23+
return new Promise(resolve => {
24+
video.onloadedmetadata = () => {
25+
resolve(video);
26+
};
27+
});
28+
};
29+
30+
function initTargetCanvas() {
31+
// target canvas should overlap source video
32+
targetCanvas = document.querySelector("#canvas");
33+
targetCanvas.width = sourceVideo.width;
34+
targetCanvas.height = sourceVideo.height;
35+
}

0 commit comments

Comments
 (0)