Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
cqiang1993
AR.js
提交
cb1d2a8a
A
AR.js
项目概览
cqiang1993
/
AR.js
与 Fork 源项目一致
从无法访问的项目Fork
通知
2
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
A
AR.js
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
cb1d2a8a
编写于
6月 07, 2017
作者:
J
Jerome Etienne
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
more experimentation on jsaruco + wasm
上级
3808b99f
变更
20
隐藏空白更改
内联
并排
Showing
20 changed file
with
123 addition
and
18 deletion
+123
-18
README.md
README.md
+2
-0
three.js/examples/imageProcessing.wasm/TODO.md
three.js/examples/imageProcessing.wasm/TODO.md
+31
-3
three.js/examples/imageProcessing.wasm/examples/c_sample_module/Makefile
...es/imageProcessing.wasm/examples/c_sample_module/Makefile
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_module/canvas.c
...es/imageProcessing.wasm/examples/c_sample_module/canvas.c
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_module/canvas.html
...imageProcessing.wasm/examples/c_sample_module/canvas.html
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_module/module.js
...s/imageProcessing.wasm/examples/c_sample_module/module.js
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_module/module.wasm
...imageProcessing.wasm/examples/c_sample_module/module.wasm
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_side/Makefile
...ples/imageProcessing.wasm/examples/c_sample_side/Makefile
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_side/hello_world.c
...imageProcessing.wasm/examples/c_sample_side/hello_world.c
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_side/hello_world.html
...geProcessing.wasm/examples/c_sample_side/hello_world.html
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_side/hello_world.wasm
...geProcessing.wasm/examples/c_sample_side/hello_world.wasm
+0
-0
three.js/examples/imageProcessing.wasm/examples/c_sample_side/readme.markdown
...ageProcessing.wasm/examples/c_sample_side/readme.markdown
+0
-0
three.js/examples/imageProcessing.wasm/examples/cpp_sample/Makefile
...xamples/imageProcessing.wasm/examples/cpp_sample/Makefile
+0
-0
three.js/examples/imageProcessing.wasm/examples/cpp_sample/myclass.cpp
...ples/imageProcessing.wasm/examples/cpp_sample/myclass.cpp
+0
-0
three.js/examples/imageProcessing.wasm/examples/cpp_sample/myclass.html
...les/imageProcessing.wasm/examples/cpp_sample/myclass.html
+0
-0
three.js/examples/imageProcessing.wasm/examples/cpp_sample/myclass.js
...mples/imageProcessing.wasm/examples/cpp_sample/myclass.js
+0
-0
three.js/examples/imageProcessing.wasm/examples/processing.html
...js/examples/imageProcessing.wasm/examples/processing.html
+61
-0
three.js/examples/js-aruco/TODO.md
three.js/examples/js-aruco/TODO.md
+15
-0
three.js/examples/js-aruco/examples/performance.html
three.js/examples/js-aruco/examples/performance.html
+2
-2
three.js/examples/js-aruco/threex-arucodebug.js
three.js/examples/js-aruco/threex-arucodebug.js
+12
-13
未找到文件。
README.md
浏览文件 @
cb1d2a8a
...
...
@@ -335,6 +335,8 @@ Demo tested on the following browser setups:
Credits: @HelloDeadline, @sorianog
# Ideas
-
play with camera parameters to optimize it for AR - available in mediastreamtrack
-
https://www.oberhofer.co/mediastreamtrack-and-its-capabilities/
-
AR Gaming - https://www.youtube.com/watch?v=EmGGGzibGok
-
AR Business Card - https://vimeo.com/4979525
-
ar cube visu - real nice for 360 AR https://twitter.com/jerome_etienne/status/869765239356747776
...
...
three.js/examples/imageProcessing.wasm/TODO.md
浏览文件 @
cb1d2a8a
-
start with a convert in gray convmertion
-
plus thresholding
-
then bench webassembly vs js
# GOAL
-
filtering : convert2Grey + adaptativeThresholding
-
code this in multiple versions : webworkers - webassembly - gpu
-
mix them together - which combinasion
# Step1 Basic Demo
-
read the webcam
-
display the origianl image
-
filter the image - use jsaruco function
-
display the filtered image
# Step2 Implement webworkers + jsaruco
-
aka all normal javascript - no webassembly so more stable
# Step3 Implement webassembly
-
code in C the convert2Grey yourself first
-
see about getting a horintal/vertical blur in C
-
then do a adaptative thresholding
-
result must be the same as the jsaruco version
# Step4 Implement a gpu version
-
convert2Grey may be done in shader
-
horizontal/vertical blur may be done in shader
-
which resolution for the texture ?
-
how many passes ? 4 different shaders or larger ones ?
# Step5 Mix them together
-
what is possible ? what is buggy ?
-
if all is running as expected, any combinaison would work.
-
it is a matter of picking the fastest
-
so try and measure :)
three.js/examples/imageProcessing.wasm/c_sample_module/Makefile
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_module/Makefile
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_module/canvas.c
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_module/canvas.c
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_module/canvas.html
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_module/canvas.html
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_module/module.js
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_module/module.js
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_module/module.wasm
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_module/module.wasm
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_side/Makefile
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_side/Makefile
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_side/hello_world.c
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_side/hello_world.c
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_side/hello_world.html
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_side/hello_world.html
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_side/hello_world.wasm
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_side/hello_world.wasm
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/c_sample_side/readme.markdown
→
three.js/examples/imageProcessing.wasm/
examples/
c_sample_side/readme.markdown
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/cpp_sample/Makefile
→
three.js/examples/imageProcessing.wasm/
examples/
cpp_sample/Makefile
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/cpp_sample/myclass.cpp
→
three.js/examples/imageProcessing.wasm/
examples/
cpp_sample/myclass.cpp
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/cpp_sample/myclass.html
→
three.js/examples/imageProcessing.wasm/
examples/
cpp_sample/myclass.html
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/cpp_sample/myclass.js
→
three.js/examples/imageProcessing.wasm/
examples/
cpp_sample/myclass.js
浏览文件 @
cb1d2a8a
文件已移动
three.js/examples/imageProcessing.wasm/examples/processing.html
0 → 100644
浏览文件 @
cb1d2a8a
<script
src=
'../../js-aruco/vendor/js-aruco/src/svd.js'
></script>
<script
src=
'../../js-aruco/vendor/js-aruco/src/posit1.js'
></script>
<script
src=
'../../js-aruco/vendor/js-aruco/src/cv.js'
></script>
<script
src=
'../../js-aruco/vendor/js-aruco/src/aruco.js'
></script>
<body><script>
var
videoElement
=
document
.
createElement
(
'
video
'
)
// document.body.appendChild(videoElement)
videoElement
.
autoplay
=
true
navigator
.
mediaDevices
.
getUserMedia
({
video
:
true
}).
then
(
function
(
stream
){
videoElement
.
src
=
window
.
URL
.
createObjectURL
(
stream
);
}).
catch
(
function
(
error
){
console
.
assert
(
false
)
console
.
dir
(
error
)
})
var
canvas
=
document
.
createElement
(
'
canvas
'
)
canvas
.
width
=
640
canvas
.
height
=
480
document
.
body
.
appendChild
(
canvas
)
var
context
=
canvas
.
getContext
(
'
2d
'
)
var
greyCVImage
=
new
CV
.
Image
();
var
thresCVImage
=
new
CV
.
Image
();
requestAnimationFrame
(
function
callback
(){
context
.
drawImage
(
videoElement
,
0
,
0
)
var
imageData
=
context
.
getImageData
(
0
,
0
,
canvas
.
width
,
canvas
.
height
)
CV
.
grayscale
(
imageData
,
greyCVImage
)
CV
.
adaptiveThreshold
(
greyCVImage
,
thresCVImage
,
2
,
7
);
var
imageData
=
context
.
createImageData
(
canvas
.
width
,
canvas
.
height
);
copyCVImage2ImageData
(
thresCVImage
,
imageData
)
context
.
putImageData
(
imageData
,
0
,
0
);
requestAnimationFrame
(
callback
)
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
function
copyCVImage2ImageData
(
cvImage
,
imageData
){
var
i
=
cvImage
.
data
.
length
,
j
=
(
i
*
4
)
+
3
;
while
(
i
--
){
imageData
.
data
[
j
-=
4
]
=
255
;
imageData
.
data
[
j
-
1
]
=
imageData
.
data
[
j
-
2
]
=
imageData
.
data
[
j
-
3
]
=
cvImage
.
data
[
i
];
}
return
imageData
;
};
</script></body>
three.js/examples/js-aruco/TODO.md
浏览文件 @
cb1d2a8a
...
...
@@ -4,7 +4,22 @@
-
how to use webworker ?
-
split the processing of the original image
-
so gray scale + adatative threshold - splitted in 4 zones for 4 cpu
- https://github.com/andrei-markeev/ts2c
---
# webworker usage
-
in 640x480, it take 18.3ms for context.detect
-
13.84ms for greyscale + adaptative threshold - 75% of the whole!
-
it is doable on GPU too
-
greyscale is per pixel
-
adaptative threshold needs a local average blur and then it is per pixel
-
there is a pool of workers
-
and add task to it
-
doing the greyscale
-
doing the horizontal blur
-
doing the vertical blur
-
demo where you read the webcam and filter it with this
---
-
see how to include it in ar.js
...
...
three.js/examples/js-aruco/examples/performance.html
浏览文件 @
cb1d2a8a
...
...
@@ -105,9 +105,9 @@
// if( videoElement.readyState >= videoElement.HAVE_CURRENT_DATA ){
// detect markers in imageData
console
.
time
(
'
detect
'
);
//
console.time('detect');
var
detectedMarkers
=
arucoContext
.
detect
(
videoElement
)
console
.
timeEnd
(
'
detect
'
);
//
console.timeEnd('detect');
if
(
detectedMarkers
.
length
>
0
){
var
detectedMarker
=
detectedMarkers
[
0
]
...
...
three.js/examples/js-aruco/threex-arucodebug.js
浏览文件 @
cb1d2a8a
...
...
@@ -87,23 +87,22 @@ THREEx.ArucoDebug.prototype.drawCVImage = function(cvImage){
var
context
=
canvas
.
getContext
(
'
2d
'
);
var
imageData
=
context
.
createImageData
(
canvas
.
width
,
canvas
.
height
);
copyImage
(
cvImage
,
imageData
)
this
.
copyCVImage2ImageData
(
cvImage
,
imageData
)
context
.
putImageData
(
imageData
,
0
,
0
);
return
function
copyImage
(
src
,
dst
){
var
i
=
src
.
data
.
length
,
j
=
(
i
*
4
)
+
3
;
while
(
i
--
){
dst
.
data
[
j
-=
4
]
=
255
;
dst
.
data
[
j
-
1
]
=
dst
.
data
[
j
-
2
]
=
dst
.
data
[
j
-
3
]
=
src
.
data
[
i
];
}
return
dst
;
};
}
THREEx
.
ArucoDebug
.
prototype
.
copyCVImage2ImageData
=
function
(
cvImage
,
imageData
){
var
i
=
cvImage
.
data
.
length
,
j
=
(
i
*
4
)
+
3
;
while
(
i
--
){
imageData
.
data
[
j
-=
4
]
=
255
;
imageData
.
data
[
j
-
1
]
=
imageData
.
data
[
j
-
2
]
=
imageData
.
data
[
j
-
3
]
=
cvImage
.
data
[
i
];
}
return
imageData
;
};
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录