This is the place to go for the most amazing and complete SDK to develop web augmented reality (webAR) solutions with open source software.
https://join.slack.com/t/webarkit/shared_invite/zt-154zcqgpj-S0Dg0j4DgvvWlORI2PC1NQ
A rendering package for https://github.com/webarkit/ARnft
License: GNU General Public License v3.0
This is the place to go for the most amazing and complete SDK to develop web augmented reality (webAR) solutions with open source software.
https://join.slack.com/t/webarkit/shared_invite/zt-154zcqgpj-S0Dg0j4DgvvWlORI2PC1NQ
Instead of use the interpolation routine, maybe better try another algorithm: one euro filter
Hello I'm trying to create a 3D TEXT object which will replace the red cube.
I loaded a font and create a 3D Text and add into the scene but I got 2 issues.
Sample code
const fontLoader = nftAddTJS.getFontLoader();
fontLoader.load(`./fonts/${fontName}`, (font) => {
var material = new THREE.MeshStandardMaterial({ color: new THREE.Color(obj.color).convertSRGBToLinear(), side: THREE.DoubleSide })
material.transparent = true;
**// TextGeometry exported from nftAddTJS**
const geometry = nftAddTJS.createTextGeometry(obj.resource.title, {
font: font,
size: parseInt(obj.resource.size) * 0.000001, **//ISSUE: Size need to provide in decimal or else it create a large text**
height: 1,
curveSegments: 12
})
geometry.center()
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(obj.scale.x, obj.scale.y, obj.scale.z)
mesh.rotation.set(obj.rotation.x, obj.rotation.y, obj.rotation.z)
mesh.position.set(1000, 200, 90) **// If I change the position from (x:0, y:0, z:0) text is not visible on the canvas**
nftAddTJS.add(mesh, '3dText', false)
})
I'm certain I'm just missing it, but for some reason I can't seem to find (or generate) a non-minified version of the ARnftThree.js?
Does anyone know what the correct npm or yarn command would be to generate one?
Hi,
I tried this arNFT_video_example on multiple devices and the video seems to be black (or just stuck on 1st frame?). Here's a screenshot of what the video looks like:
The video work only on android chrome. On android firefox, iOS chrome, iOS safari - the video is black. I also tried using the library with other videos but same happens with other videos.
At present the plane geometry for a video has a fixed planeGeometry of [1,1,1,1] which just creates a very basic square or a 1:1 ratio video , this really isn't helpful as the vast majority of videos are 16:9. This makes any video of a video other than 16:9 display incorrectly.
I would propose that you expose these at as a argument when adding a video to a scene using ARnft, I would also expose the height and width segmentation too.
I came from the above thread. I was trying to use my own camera source. So I have the following script
navigator.mediaDevices.enumerateDevices()
.then(gotDevices)
.then(function(){
navigator.mediaDevices.getUserMedia({
video: constraints
})
.then(function(stream){
window.stream = stream;
video.srcObject = stream;
const entities = [
{ name: 'game1', markerUrl: "/markers/game1" },
{ name: 'game2', markerUrl: "/markers/game2" },
{ name: 'game3', markerUrl: "/markers/game3" },
];
ARnft.ARnft.initWithEntities(640, 480, entities, '/config.json', true)
.then((nft) => {
});
And I commented out navigator.mediaDevices code in ARnft.js. Then, the last console log is ARnftThreejs version: 0.2.0. It seems cannot keep loading the remaining library. Without anymore console log and error log.
<script src="/js/three.min.js"></script>
<script src="/js/ARnftThreejs.js"></script>
<script src="/js/ARnft.js"></script>
<script src="/js/main.js"></script>
I was using the above structure. ARnft ini function was wrapped inside my custom getUserMedia function in main.js. It causes the ARnftThreejs not keep load. However, there is no problem when I test in desktop and the latest Samsung phone. It has problem only in my old Android phone.
<script src="/js/three.min.js"></script>
<script src="/js/ARnftThreejs.js"></script>
<script src="/js/ARnft.js"></script>
<script src="/js/main.js"></script>
<script>
const entities = [
{ name: 'game1', markerUrl: "/markers/game1" },
{ name: 'game2', markerUrl: "/markers/game2" },
{ name: 'game3', markerUrl: "/markers/game3" },
];
ARnft.ARnft.initWithEntities(640, 480, entities, '/config.json', true)
.then((nft) => {})
lastly, when i move the function out. it works again. i am not sure the reason
I want to display a 3d model after scanned an image marker. I tried the example one but I want to try update the model with my own code.
May I know if it is possible for me to build my own three js 3d world and hide the models. Then I use the callback from ARnft to display the object and update its position to the marker?
Hi Guys,
is there any way to remove added model? I can only find these functions:
can someone help me please figure it out, any help will be appreciable.
Thank you
This toolkit is so awesome that I almost had no trouble to set things up :)
During my test, ideally we would love to cover the whole marker with media content. While under default setting, the height and width are almost identical even it is a 1024x480 or 360x720 media file.
@kalwalt Any input or code modification guidance would be appreciated. Thanks in advance!!
Also some heads up: the video is blacked out in iOS 14.6 (which never happened in previous iOS releases). I guess it is relevant with new privacy rules introduced.
I receive this warning i think it would be better to avoid it. I found this article in the Three.js forum https://discourse.threejs.org/t/warning-multiple-instances-of-three-js-being-imported/24191, not sure why it's happening.
Hello I'm add gltf model and play animation mixer, But ot not working.
I'm using GLTFLoader and Animation Mixer. then I add model by NFTaddTJS. After my tracking my models show but not play animation. Thank you
How do turn off the visibility of an added 3d model?
I tried this code for toggling visibility, but its not doing anything.
code:
nftAddTJS.objVisibility=false;
Any help is appreciated. Thank you.
Hi , can you explain how to change video size (height and weight) and it's position related to tracked image ? I want my video cover all image.
Hello I'm add gltf model and play animation mixer, But ot not working.
I'm using GLTFLoader and Animation Mixer. then I add model by NFTaddTJS. After my tracking my models show but not play animation. Thank you
I have two markers, each with their own image, with different configuration ...
It doesn't appear that the config/scale/etc is respected for each addImage -am I doing something wrong?
let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
nftAddTJS.oef = true;
// Set width, height and width and height number of segments of the PlaneGeometry.
let imgConfig = {
w: 1,
h: 0.3,
ws: 1,
hs: 1
};
nftAddTJS.addImage('Data/newspaper2_clean_hidden_small.png', 'newspaper2_clean', 0xdddddd, 660, imgConfig, false);
// Set width, height and width and height number of segments of the PlaneGeometry.
let imgConfig2 = {
w: 1,
h: 1,
ws: 1,
hs: 1
};
nftAddTJS.addImage('Data/puzzle.png', 'puzzle_bkgrnd', 0xbbbbff, 500, imgConfig2, false);
Hi guys,
I am trying to achieve an AR experience for the Restaurant menu, so multiple models involved in this project. How can I achieve toggling multiple models on a single NFT marker? Please guide me to achieve this.
My Suggestion:
ARnft is an awesome framework for image tracking compared to other frameworks like AR.js etc. The only thing lack in this project is documentation, if there is proper documentation then I think more people will choose this framework for WebAR. Kudos to the developer @kalwalt . ๐
The ratio setting https://github.com/webarkit/ARnft/blob/fd16f66908451c95174dacb4ee36c90c344304ff/examples/arNFT_example.html#L37 gives NaN. In some circumstances is very bad see for example this comment kalwalt/kalwalt-interactivity-AR#46 (comment) PR kalwalt/kalwalt-interactivity-AR#46 where the wrong setting and data may give unpredictable results. This should be fixed in all examples.
Hi,
is there a way to animate a model?
Best,
Stefan
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.