forked from mikocml/jsartoolkit5
-
Notifications
You must be signed in to change notification settings - Fork 19
Dimensions of the NFT marker in the NFTMarkerInfo to fix marker position #42
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
kalwalt
wants to merge
32
commits into
develop
Choose a base branch
from
dimensions-NFT-feature
base: develop
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from 31 commits
Commits
Show all changes
32 commits
Select commit
Hold shift + click to select a range
735b091
display in the log console the number of ImageSet, width, height and …
kalwalt 0013322
added new width, height and dpi data members to arController struct
kalwalt d32573f
passing data to the Event listener (NFTMarkerInfo)
kalwalt 50719ce
prettify inside getNFTMarker
kalwalt 032c26a
trying to set the position of the model with the BoundingBox size
kalwalt a695e97
added calculation of position for flamingo, need more tests
nicolocarpignoli 13b810e
trying calculation of position with the sphere, not works as expected
kalwalt 1d2e4fb
new Duck and CesiumMan examples, in the scene but can not be viewed
kalwalt 181d21f
Duck now is displayed, but without the re-positioning stuff
kalwalt 7a2abb3
console log for 3d model size
nicolocarpignoli cf3bddb
Duck is displayed now!
kalwalt 6162b55
Merge branch 'dimensions-NFT-feature' of https://github.com/kalwalt/j…
kalwalt 052954d
CesiumMan visible now
kalwalt 4566f63
sphere is not needed
kalwalt 0c05e43
Alterra NFT marker
kalwalt 0834fc4
re adding the console.log for 3d model size
kalwalt 2046641
added new example for Alterra image
kalwalt e848235
an example with a cone and transform Matrix
kalwalt f80d1d3
Duck and CesiumMan examples for Alterra image
kalwalt c140785
added example main_center_worker.html
kalwalt 41bbed1
using another algorithm for Flamingo model
kalwalt b44a407
adding matrixUtils.js and example
kalwalt ac9881d
some improvements in the algorithm
kalwalt 348a8c7
added z value ( not sure that is correct)
kalwalt 86a1980
positioning works: algo with size and dpi calculation
kalwalt 8616afe
removing matrixUtils.js
kalwalt c5e89ea
cone is displayed in the center, to be improved
kalwalt eabcef5
removing findPosition example from the index
kalwalt 6fcd90a
enabling animations in CesiumMan examples
kalwalt 09101d1
better handling for animations, and better display for Mobile
kalwalt 295b82c
fix for wasm_worker
kalwalt cabe736
updateWorldMatrix inside orientationchange Event listener
kalwalt File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| <html> | ||
| <head> | ||
| <title>NFT_test</title> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=1"> | ||
| <style> | ||
| html, body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <div style="position:absolute; color:white; top:0;left:0" id="stats1"><div>Main</div></div> | ||
| <div style="position:absolute; color:white; top:80px;left:0" id="stats2"><div>Worker</div></div> | ||
| <div id="container"> | ||
| <video id="video"></video> | ||
| <canvas style="position: absolute; left:0; top:0" id="canvas_draw"></canvas> | ||
| </div> | ||
|
|
||
| <script src="../js/third_party/three.js/stats.min.js"></script> | ||
| <script src="main_center_worker.js"></script> | ||
|
|
||
| <script> | ||
| var statsMain = new Stats(); | ||
| statsMain.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom | ||
| statsMain.domElement.style.position = 'relative'; | ||
| statsMain.domElement.style.left = '0px'; | ||
| statsMain.domElement.style.top = '0px'; | ||
| document.getElementById("stats1").appendChild(statsMain.dom); | ||
|
|
||
| var statsWorker = new Stats(); | ||
| statsWorker.showPanel(1); // 0: fps, 1: ms, 2: mb, 3+: custom | ||
| statsWorker.domElement.style.position = 'relative'; | ||
| statsWorker.domElement.style.left = '0px'; | ||
| statsWorker.domElement.style.top = '0px'; | ||
| document.getElementById("stats2").appendChild(statsWorker.dom); | ||
|
|
||
| var container = document.getElementById('container'); | ||
| var video = document.getElementById('video'); | ||
| var canvas_draw = document.getElementById('canvas_draw'); | ||
|
|
||
| if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { | ||
| var hint = {}; | ||
| if (isMobile()) { | ||
| hint = { | ||
| facingMode: {"ideal": "environment"}, | ||
| audio: false, | ||
| video: { | ||
| width: { ideal: 480 }, | ||
| height: { ideal: 640 }, | ||
| }, | ||
| }; | ||
| } | ||
|
|
||
| navigator.mediaDevices.getUserMedia({video: hint}).then(function (stream) { | ||
| video.srcObject = stream; | ||
| video.play(); | ||
| video.addEventListener("loadedmetadata", function() { | ||
| start(container, markers["pinball"], video, video.videoWidth, video.videoHeight, canvas_draw, function() {statsMain.update()}, function() {statsWorker.update()}); | ||
| }); | ||
| }); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,212 @@ | ||
| function multiplyMatrices(a, b) { | ||
| var ae = a; | ||
| var be = b; | ||
| var te = new Float64Array(16); | ||
|
|
||
| var a11 = ae[0], a12 = ae[4], a13 = ae[8], a14 = ae[12]; | ||
| var a21 = ae[1], a22 = ae[5], a23 = ae[9], a24 = ae[13]; | ||
| var a31 = ae[2], a32 = ae[6], a33 = ae[10], a34 = ae[14]; | ||
| var a41 = ae[3], a42 = ae[7], a43 = ae[11], a44 = ae[15]; | ||
|
|
||
| var b11 = be[0], b12 = be[4], b13 = be[8], b14 = be[12]; | ||
| var b21 = be[1], b22 = be[5], b23 = be[9], b24 = be[13]; | ||
| var b31 = be[2], b32 = be[6], b33 = be[10], b34 = be[14]; | ||
| var b41 = be[3], b42 = be[7], b43 = be[11], b44 = be[15]; | ||
|
|
||
| te[0] = a11 * b11 + a12 * b21 + a13 * b31 + a14 * b41; | ||
| te[4] = a11 * b12 + a12 * b22 + a13 * b32 + a14 * b42; | ||
| te[8] = a11 * b13 + a12 * b23 + a13 * b33 + a14 * b43; | ||
| te[12] = a11 * b14 + a12 * b24 + a13 * b34 + a14 * b44; | ||
|
|
||
| te[1] = a21 * b11 + a22 * b21 + a23 * b31 + a24 * b41; | ||
| te[5] = a21 * b12 + a22 * b22 + a23 * b32 + a24 * b42; | ||
| te[9] = a21 * b13 + a22 * b23 + a23 * b33 + a24 * b43; | ||
| te[13] = a21 * b14 + a22 * b24 + a23 * b34 + a24 * b44; | ||
|
|
||
| te[2] = a31 * b11 + a32 * b21 + a33 * b31 + a34 * b41; | ||
| te[6] = a31 * b12 + a32 * b22 + a33 * b32 + a34 * b42; | ||
| te[10] = a31 * b13 + a32 * b23 + a33 * b33 + a34 * b43; | ||
| te[14] = a31 * b14 + a32 * b24 + a33 * b34 + a34 * b44; | ||
|
|
||
| te[3] = a41 * b11 + a42 * b21 + a43 * b31 + a44 * b41; | ||
| te[7] = a41 * b12 + a42 * b22 + a43 * b32 + a44 * b42; | ||
| te[11] = a41 * b13 + a42 * b23 + a43 * b33 + a44 * b43; | ||
| te[15] = a41 * b14 + a42 * b24 + a43 * b34 + a44 * b44; | ||
|
|
||
| return te; | ||
| } | ||
|
|
||
| function transformPoint(m, xyz) { | ||
| var x = xyz.x, y = xyz.y, z = xyz.z; | ||
| var e = m; | ||
|
|
||
| var w = 1 / (e[3] * x + e[7] * y + e[11] * z + e[15]); | ||
|
|
||
| var r = {}; | ||
| r.x = (e[0] * x + e[4] * y + e[8] * z + e[12]) * w; | ||
| r.y = (e[1] * x + e[5] * y + e[9] * z + e[13]) * w; | ||
| r.z = (e[2] * x + e[6] * y + e[10] * z + e[14]) * w; | ||
|
|
||
| return r; | ||
| } | ||
|
|
||
| function isMobile() { | ||
| return /Android|mobile|iPad|iPhone/i.test(navigator.userAgent); | ||
| } | ||
|
|
||
| var markers = { | ||
| "pinball": { | ||
| width: 1637, | ||
| height: 2048, | ||
| dpi: 215, | ||
| url: "./examples/DataNFT/pinball", | ||
| }, | ||
| }; | ||
|
|
||
| function start(container, marker, video, input_width, input_height, canvas_draw, render_update, track_update) { | ||
| var vw, vh; | ||
| var sw, sh; | ||
| var pscale, sscale; | ||
| var w, h; | ||
| var pw, ph; | ||
| var ox, oy; | ||
| var worker; | ||
| var camera_para = './../examples/Data/camera_para-iPhone 5 rear 640x480 1.0m.dat' | ||
|
|
||
| var canvas_process = document.createElement('canvas'); | ||
| var context_draw = canvas_draw.getContext('2d'); | ||
| var context_process = canvas_process.getContext('2d'); | ||
|
|
||
| var load = function() { | ||
| vw = input_width; | ||
| vh = input_height; | ||
|
|
||
| pscale = 320 / Math.max(vw, vh / 3 * 4); | ||
| sscale = isMobile() ? window.outerWidth / input_width : 1; | ||
|
|
||
| sw = vw * sscale; | ||
| sh = vh * sscale; | ||
| video.style.width = sw + "px"; | ||
| video.style.height = sh + "px"; | ||
| container.style.width = sw + "px"; | ||
| container.style.height = sh + "px"; | ||
| canvas_draw.style.clientWidth = sw + "px"; | ||
| canvas_draw.style.clientHeight = sh + "px"; | ||
| canvas_draw.width = sw; | ||
| canvas_draw.height = sh; | ||
| w = vw * pscale; | ||
| h = vh * pscale; | ||
| pw = Math.max(w, h / 3 * 4); | ||
| ph = Math.max(h, w / 4 * 3); | ||
| ox = (pw - w) / 2; | ||
| oy = (ph - h) / 2; | ||
| canvas_process.style.clientWidth = pw + "px"; | ||
| canvas_process.style.clientHeight = ph + "px"; | ||
| canvas_process.width = pw; | ||
| canvas_process.height = ph; | ||
|
|
||
| worker = new Worker('../../js/artoolkit.worker.js'); | ||
|
|
||
| worker.postMessage({type: "load", pw: pw, ph: ph, camera_para: camera_para, marker: '../' + marker.url}); | ||
|
|
||
| worker.onmessage = function(ev) { | ||
| var msg = ev.data; | ||
| switch (msg.type) { | ||
| case "found": { | ||
| found(msg); | ||
| break; | ||
| } | ||
| case "not found": { | ||
| found(null); | ||
| break; | ||
| } | ||
| } | ||
| track_update(); | ||
| process(); | ||
| }; | ||
| }; | ||
|
|
||
| var lastmsg = null; | ||
| var found = function(msg) { | ||
| lastmsg = msg; | ||
| }; | ||
|
|
||
| var lasttime = Date.now(); | ||
| var time = 0; | ||
|
|
||
| var x = 0; | ||
|
|
||
| var draw = function() { | ||
| context_draw.clearRect(0, 0, vw, vh); | ||
| render_update(); | ||
| var now = Date.now(); | ||
| var dt = now - lasttime; | ||
| time += dt; | ||
| lasttime = now; | ||
|
|
||
| x += dt; | ||
| x %= sw; | ||
| context_draw.fillStyle = "#FFF"; | ||
| context_draw.fillRect(x, 0, 5, 10); | ||
|
|
||
| if (!lastmsg) return; | ||
| var proj = JSON.parse(lastmsg.proj); | ||
| var world = JSON.parse(lastmsg.matrixGL_RH); | ||
|
|
||
| var mat = multiplyMatrices(proj, world); | ||
|
|
||
| function glpointToCanvas(xyz) { | ||
| return { | ||
| x: (xyz.x + 1) * 0.5 * pw / pscale * sscale - ox / pscale * sscale, | ||
| y: (1 - xyz.y) * 0.5 * ph / pscale * sscale - oy / pscale * sscale, | ||
| } | ||
| } | ||
| function drawpoint(x, y, z) { | ||
| var r = transformPoint(mat, {x: x, y: y, z: z}); | ||
| var c = glpointToCanvas(r); | ||
| return c; | ||
| } | ||
|
|
||
| var width = marker.width; | ||
| var height = marker.height; | ||
| var dpi = marker.dpi; | ||
|
|
||
| var w = width / dpi * 2.54 * 10; | ||
| var h = height / dpi * 2.54 * 10; | ||
|
|
||
| var p1 = drawpoint(0, 0, 0); | ||
| var p2 = drawpoint(w, 0, 0); | ||
| var p3 = drawpoint(w, h, 0); | ||
| var p4 = drawpoint(0, h, 0); | ||
| var pos = drawpoint(w/2, h/2, 0); | ||
| context_draw.beginPath() | ||
| context_draw.arc(pos.x, pos.y, 8, 0, Math.PI * 2) | ||
| context_draw.fillStyle = 'green' | ||
| context_draw.fill() | ||
| context_draw.beginPath(); | ||
| context_draw.moveTo(p1.x, p1.y); | ||
| context_draw.lineTo(p2.x, p2.y); | ||
| context_draw.lineTo(p3.x, p3.y); | ||
| context_draw.lineTo(p4.x, p4.y); | ||
| context_draw.closePath(); | ||
| context_draw.strokeStyle = "red"; | ||
| context_draw.stroke(); | ||
| }; | ||
|
|
||
| function process() { | ||
| context_process.fillStyle = "black"; | ||
| context_process.fillRect(0, 0, pw, ph); | ||
| context_process.drawImage(video, 0, 0, vw, vh, ox, oy, w, h); | ||
|
|
||
| var imageData = context_process.getImageData(0, 0, pw, ph); | ||
| worker.postMessage({type: "process", imagedata: imageData}, [imageData.data.buffer]); | ||
| } | ||
| var tick = function() { | ||
| draw(); | ||
| requestAnimationFrame(tick); | ||
| }; | ||
|
|
||
| load(); | ||
| tick(); | ||
| process(); | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
That should be 'NFT marker height' ;)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i will fix it. Thank you!