Start Dimension: 2016

前言：
OpenCV 是 Computer Version的 Open 函式庫
有許多版本今天要來實際Run Android OpenCV Libs的環境設定

作業系統: Mac
OpenCV版本：OpenCV2.4.11(for Android)

ㄧ. 首先到OpenCV官網下載OpenCV Android Library：

這邊筆者是使用 OpenCV 2.4.11版本

二. 打開OpenCV library資料夾（ OpenCV-android-sdk >> sdk>> java）

複製整個 java 資料夾

三. 打開 Android Studio 新增一個專案：
接著 new 一個 Directory 並取名為 libs

四. 將整個 OpenCV 裡面的 Java資料夾複製進剛剛新增的
libs資料夾裡面，並且將Java改名為opencv

五. 對opencv 資料夾按右鍵 new file 並命名為 build.gradle

step1 . new file

step 2. 命名為 build.gradle

step 3 添加以下內容：
這邊需要注意 compille 版本與你的Android Studio版本是否一致

快速複製區：

apply plugin: 'android-library'
buildscript {
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:1.5.0'    }
}

android {
    compileSdkVersion 23    buildToolsVersion "23.0.3"
    defaultConfig {
        minSdkVersion 14        targetSdkVersion 23        versionCode 2411        versionName "2.4.11"    }

    sourceSets {
        main {
            manifest.srcFile 'AndroidManifest.xml'            java.srcDirs = ['src']
            resources.srcDirs = ['src']
            res.srcDirs = ['res']
            aidl.srcDirs = ['src']
        }
    }
}

step 4. 在 settings.gradle 裡面添加

include ':libs:opencv'

六. 在 app >> src >> main底下新增一個 Directory ，並命名為 jniLibs

七. 到從openCV官網下載的 Android OpenCV SDK裡

sdk >> native >> libs 複製裡面的四個檔案
裡面是包含不同位元的.so檔案

並將其複製回剛剛新增的 jniLibs資料夾裡面

八 .點選 File >> Project Structure >> app >> Dependencies（快結束了呦！！！）

按下 + ，並選擇 Module dependency 並選擇 :libs:opencv

*在底下圖片中已經將該 module添加完了

以上步驟就是在Android Studio 添加 Android OpenCV Libs 的步驟：
接著我們實際測試看看：

九. 在MainActivity 底下添加 OpenCV 的函式庫

OpenCVLoader.initDebug()

public class MainActivity extends AppCompatActivity {



    static {
        if (OpenCVLoader.initDebug()){
            Log.v("Raymond  Test OpenCV", "Library init  Sucessed");        }else{
            Log.v("Raymond  Test OpenCV ","Library init Error");        }
    }





    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        startActivity(new Intent(MainActivity.this , Activity_MarkerLess.class));
    }

測試結果：

前言：

在本篇章之中，我會介紹大家一些WebGL以及一些3D物件上的基礎知識以及實際寫一個基礎DEMO程式。

一. WebGL :

WebGL 是基於openGL ES2.0下的演示引擎，並且可透過 HTML5 的 Canvas元素當作DOM的訪問接口。

二. Three.js：

Three.js是一個3D javaScript 引擎base on WebGL的，使用他的好處是有現成強大的元件功能，即便遇到了three.js沒有現成元件，開發者也能透過WebGL引擎建立，且兩者之間不會有衝突。

官方網站上有許多的範例，有興趣的朋友可以點以下連結

http://threejs.org/

三.環境設定：如果您的環境已經設定好了可以跳過此步驟

1.下載 https://github.com/mrdoob/three.js/tree/master/build，解壓縮後會得到兩個lib檔案three.js、three.min.js，前者適用於開發階段，後者為壓縮檔適用於發佈後使用。

如果你覺得很麻煩也可以透過CDN import three.js lib:

四.主程式撰寫：

一個完整的Three.js專案中必定會有（如果有開發其他平台下的OpenGL專案，其邏輯是一樣的）：

1.渲染器：Renderer

2.攝影機：Camera

3.場景：Scene

4.場景內的物體：Content (ex. cube 、sphere、custom object等)

如果當專案run起來沒看到東西可以從這四個方向下手 Debug。
程式碼：

<!DOCTYPE html>
<html>
<head>
<title>Hello Three.js</title>
<div id="area"></div> 
<script src="http://threejs.org/build/three.min.js"></script>

</head>
<body>
<script>

var area = document.getElementById('area');//指定一個變數

var width = window.innerWidth,// 取得視窗的寬與高
  height = window.innerHeight;

var scene = new THREE.Scene(); //宣告場景

var renderer = new THREE.WebGLRenderer(); //宣告一個渲染器
renderer.setSize(width, height);

//宣告攝影機並設定位置，在此使用透視相機其原理會在後面章節講解
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 800);
camera.position.set(0, 0, 5);

//宣告一個 Cube的幾何圖形
var cube = new THREE.Mesh(new THREE.CubeGeometry(2, 2, 2),
new THREE.MeshBasicMaterial({
color: 0xff0000
})
);

scene.add(camera); //場景加載camera
scene.add(cube);   //場景加載 content ( 此範例是宣告一個 cube的幾何物件)
renderer.render( scene , camera );
area.appendChild(renderer.domElement);


</script>

</body>
</html>

秀出結果：

下一篇我們來實作添加動畫的 3D Project

Start Dimension

標籤

2016年8月23日星期二

Android Studio OpenCV Library 環境設定

2016年6月25日星期六

Three.js 範例教學 (一) 環境設定

一. WebGL :

二. Three.js：

三.環境設定：如果您的環境已經設定好了可以跳過此步驟

四.主程式撰寫：

標籤

2016年8月23日 星期二

Android Studio OpenCV Library 環境設定

2016年6月25日 星期六

Three.js 範例教學 (一) 環境設定

一. WebGL :

二. Three.js：

三.環境設定：如果您的環境已經設定好了可以跳過此步驟

四.主程式撰寫：

2016年8月23日星期二

2016年6月25日星期六