딩굴딩굴고양이

Flutter roadmap

kyoun — Wed, 20 Sep 2023 10:41:42 +0900

flutter 첫 프로젝트 만들기

kyoun — Mon, 18 Sep 2023 15:29:56 +0900

1-1. 안드로이드 스튜디오 설치

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com

1-2. flutter 다운로드

https://docs.flutter.dev/get-started/install

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and ChromeOS operating systems.

docs.flutter.dev

1-3 해당 패키지 압축 풀기 (경로는 마음대로)

1-4. flutter\bin (1-3) 해당 환경변수 경로 추가하기

2. flutter doctor 로 이상 없는지 체크 (CMD)

2-1. cmdline - tools 설치 (toolchain 오류 시)

2-2. 라이센스 업데이트 (cmd : flutter doctor --android-licenses)

2-3 오류 항목 전부 진행

3. 플러그인 설치?

4. 프로젝트 생성

4. 기본 프로젝트 생성 완료

막힌 부분들

[1] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.7.4)
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK

-> C++를 사용한 데스트톱 개발 워크로드 설치

[2] flutter 생성 하면서 오류가 발생하고, 프로젝트 생성이 안됨.

Error: Unable to find git in your PATH. 오류

-> 다음항목 환경변수 path 등록
C:\Program Files\Git\bin
C:\Program Files\Git\cmd
C:\Program Files\Git\bin\git.exe
C:\Windows\System32

언리얼 메타휴먼 애니메이터

kyoun — Tue, 29 Aug 2023 16:58:58 +0900

[1] 메타휴먼 애니메이터 소개
- 아이폰과 PC로 금방 제작 가능
- 페이셜 릭 셋업 시간 단축
- 미표한 표정, 감정을 캡처
- 음성데이터로 혀 애니메이션 생성
- 어떤 메타휴먼이든 바로 적용 가능

[2] 메타휴먼 사용준비
- 아이폰 12이상 추천 (or 스테레오 카메라) 뎁스맵 12<14<sc
- 언리얼 엔진 - 메타휴먼 플러그인
- IIS Live Link Face
- 고정식 vs 헤드 마운트식

[3] 캡처 가이드
- 적당한 거리 유지 (뎁스)
- 머리 각도 일관성 유기
- 너무 강한 그림자 생기지 않게 주의

[4] 워크플로 (아이폰)
- 아이폰 촬영
- 캡처소스 가져오기(언리얼 캡처매니저 )
- 메타휴먼 아이덴티티 (언리얼)
- 메타휴먼 퍼포먼스
- 애니메이션 출력

[5] 주요에셋
- 캡처 소스
1) LiveLinkFaceConnection
2) LiveLinkFaceArchives
3) Stereo HMC Archives
- 캡처 데이터
- 메타휴먼 아이덴티티
- 메타휴먼 퍼포먼스

0~1 사이를 넘어가는 색상의 연산결과

kyoun — Mon, 3 Jan 2022 12:06:20 +0900

예를 들어 float3(1,0,0) + float3(1,0,0)을 더하면 float(2,0,0) 이 되는 데 보이는 색상은 크케 차이가 없어 보인다

좌 : float(1,0,0) / 우 : float (2,0,0)

2개의 색상은 비교해봐도 아무런 차이가 없는 거 같다.

모니터에서는 0 이하 색상과 1이상의 색상은 전부 0이나 1로 보이기 떄문에, float3 (2,0,0) 이라도
모니터에서는 float(1,0,0)처럼 보이는 것이다.
그래도 실제 데이터는 float3(2,0,0) 으로 저장되어 있다.

단지 모니터가 표현을 하지 못할 뿐이다.
- 이런 색상이 존재하는 상태 즉 1보다 밝고 0보나 어두운 색이 있어서

그것이 존재하고 계산되는 상태를 HDR (High Dynamic Range) 이라고 한다

연산 규칙

kyoun — Mon, 3 Jan 2022 11:57:08 +0900

1. 연산의 같은 자릿수끼리 가능하다

float + float : 연산 O
float3 + float3 : 연산 O
float4 + float4 : 연산 O
float4 + float2 : 연산 X - 에러 발생

2. 연산은 같은 자리수끼리만 가능하지만, 예외적으로 한자리와는 언제나 가능하다

float3은 float3과 연산해야 하지만, 예외적으로 float와 float은 연산이 가능하다.
float3(1,0,0) + 1 같은 공식이 가능하다는 의미
그래서 이렇게 한 자리 숫자와 연산할 때에는 한자리 숫자가 같이 연산하는 숫자의 모든 자릿수에 대응됨
float3(1,0,0) + 1 은 float3(1,0,0) + float(1,1,1) 로 대응이 된다

한자리 숫자 float은 어떤 자리의 숫자와도 연산 할수 있다.

float / half / fixed

kyoun — Mon, 3 Jan 2022 11:29:12 +0900

float의 1/2 크기가 half 이며, half보다 더 작은 크기가 fixed

컬러나 벡터 길이는 fixed로 충분하며, 범위나 정밀도가 필요한 것은 half, 나머지는 float 을 쓰는 것이 좋음.

이 책에선 혼동을 피하기 위해, float로 통일해서 사용

Function

kyoun — Mon, 3 Jan 2022 11:19:24 +0900

일반적으로 함수는 다음과 같은 형식의 구성됨

형식 이름 ( 입력값 ) { }
void surf (Input IN, inout SurfaceOutputStandard o) { }

1. void : return 값이 없는 함수 형식을 의미

2. surf : 함수의 이름

3. (Input IN, inout SurfaceOutputStandard o)
함수에서 () 안에 있는 부분은 보통 이 함수에 값을 넣는 입력값의 영역이고 이 부분은 다음과 같이 해석할수 있다.
'input 구조체를 IN이란 이름으로 이 함수 안에 받아들이고, SurfaceOutputStandard라는 구조체를 o 라는 이름으로
이 함수 안에 받기도 하고 집어 넣기도 (input) 하겠다'

4. SurfaceOutputStandard 구조체는 유니티 내부의 다른 include 파일에 정의되어 있음

struct SurfaceOutputStandard
{
    fixed3 Albedo;  // diffuse color
    fixed3 Normal;  // tangent space normal, if written
    fixed3 Emission;
    half Specular;  // specular power in 0..1 range
    fixed Gloss;    // specular intensity
    fixed Alpha;    // alpha for transparencies
};

좌: Albedo (1,0,0) // 우 emission (1,0,0)

Albedo 에 넣으면 조명연산을 추가로 받게되고, Emission에 넣으면 조명 연산을 받지 않아서
'조명과 상관없는 순수한 색상만이 출력 됨'

그래서 순수한 결과물을 보고 싶을 때는 Emission을 사용함

SubShader

kyoun — Mon, 3 Jan 2022 10:50:24 +0900

이전까진 Properties 영역(인터페이스 를 제작하는 영역) 이고, 진짜 쉐이더를 제작하는 영역에 대해서 알아볼 부분임

CGPROGRAM ~ ENDCG로 끝나는 부분은 유니티 스크립트가 아닌 CG 언어를 이용해서 쉐이더를 직접 짜야함

////*주석 : 전처리기(=스니핏)
////**주석 : 구조체
////***주석 : 함수

SubShader   
    {
        Tags { "RenderType"="Opaque" }
        LOD 200

        CGPROGRAM
        ////*전처리라고 할수도 있고, 스니핏이라고 부르기도함, 쉐이더의 조명계산 설정이나, 
        ////세부적인 분기를 정해주는 부분
        #pragma surface surf Standard fullforwardshadows

        #pragma target 3.0
        ////*

        sampler2D _MainTex;

        ////** Input이라는 이름을 가진 구조체, 이 안에 넣는 내용은 엔진으로부터 받아와야 할 데이터들임
        ////{ } 안에 들어 있고, { } 의 끝에 ; 있다는 점을 주의 
        struct Input
        {
            float2 uv_MainTex;
        };
        ////**


        half _Glossiness;
        half _Metallic;
        fixed4 _Color;
    
        ////*** sur라는 이름을 가진 '함수' 영역, 색상이나 이지미가 출력되는 부분을 말수가 있음
        ////{ } 안에 들어 있고, { } 의 끝에 ; 있다는 점을 주의 
        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ////***
        ENDCG
    }

Properties

kyoun — Fri, 24 Dec 2021 12:04:27 +0900

    Properties                          //쉐이더 인터페이스 구간
    {   //괄호시작
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
    }   //괄호끝

[위 프로퍼티로 보이는 인스펙터창]

Properties 인터페이스

// Float을 받는 인터페이스
{
    _Name("display name", Range(min, max)) = number     //1. Range
    _Name("display name", Float) = number               //2. Float
    _Name("display name", int) = number                 //3. int
}

//Float4을 받는 인터페이스
{
    _Name("display name", Color) = (number, number, number, number)     //1. Color
    _Name("display name", Vector) = (number, number, number, number)    //2. Vector     
}

//기타 Sampler을 받는 인터페이스
{
    _Name("display name", 2D) = "name" { option }       //1. 2D
    _Name("display name", Rect) = "name" { option }     //2. Rect
    _Name("display name", Cube) = "name" { option }     //3. Cube
    _Name("display name", 3D) = "name" { option }       //4. 3D
}

◇ _Name
이 기능의 <변수명>
_을 부이는 건 외부에서 입력받았다는 것을 표시하기 위해 쓰임

변수명은
한글 X
띄어쓰기 X
숫자로 시작 X
_이외의 특수문자 X
예약어(color flooat 처럼 미리 시스템에 정의된 명칭) 이용해도 안됨

◇ "display name"
큰 따옴표 안에 글은 순수하게 '화면에 나타나는 글자'이고, 엔진에서는 이 안의 내용을 순순한 글씨로 인식함.
유일하게 한글을 입력도 가동되는 곳이지만, 한글을 권하지 않음.

◇ number
이 쉐이더가 처음 만들어졌을 떄 초기값을 의미함
사용자가 값을 조금이라도 조절한다면 이 값은 이제부터 무시하게됨.

Properties - Range (min, max)

 _Name("display name", Range(min, max)) = number

- Range의 의미는 슬라이더 바를 만들겠다는 뜻이고, min, max는 각각 슬라이더 바의 최소 최대값을 의미함.

Properties - Float

 _Name("display name", Float) = number

- float은 한자리의 소수점을 입력받는 인터페이스를 만들어 줌.
- Range와 동일하게 한자리의 소수점을 입력받지만, 슬라이더 방식이 아닌 직접 값을 입력하는 인터페이스가 생김.
- 범위에 제한이 없기 떄문에 입력값의 자유도를 주고 싶거나 결과값 예측이 어려운떄 사용이 좋음

Properties - Color

_Name("display name", Color) = (number, number, number, number)

- Color는 R G B A라는 4자리 숫자을 입력 받을 수 있으므로, float4을 받게 됨
- 흔히 알고 있는 일반적인 컬러픽커를 만들 수가 있음

Properties - Vector

_Name("display name", Vector) = (number, number, number, number)

- flaot4를 직접 숫자로 이벽 받을 수 있는 인터페이스을 만들 수 있음
- Color와 같은 float4 데이터 이지만, 색상이 아닌 값으로 입력을 받음

Properties - text2D

_Name("display name", 2D) = "name" { option }

- float 계열로 분류되지 않는 sampler 들
- 텍스처 UV 좌표와 함께 계산되어야 float4로 출력될 수 있기 떄문에, 아직 UV와 계산되지 않은 텍스쳐는
색상(float4)으로 나타날 수 없으므로, 이때까지는 sampler 라고 부름

기본 쉐이더 형태

kyoun — Fri, 24 Dec 2021 11:06:55 +0900

Shader "Custom/NewSurfaceShader01"      //쉐이더이름 
{
    Properties                          //쉐이더 인터페이스 구간
    {   //괄호시작
        _Color ("Color", Color) = (1,1,1,1)
        _MainTex ("Albedo (RGB)", 2D) = "white" {}
        _Glossiness ("Smoothness", Range(0,1)) = 0.5
        _Metallic ("Metallic", Range(0,1)) = 0.0
    }   //괄호끝

    SubShader   
    {
        Tags { "RenderType"="Opaque" }
        LOD 200
		/////여기서 ENDCG 까지 유니티 스크립트아 아닌 CG언어를 사용해서 쉐이더를 직접 짜는 부분
        CGPROGRAM
        // Physically based Standard lighting model, and enable shadows on all light types
        #pragma surface surf Standard fullforwardshadows

        // Use shader model 3.0 target, to get nicer looking lighting
        #pragma target 3.0

        sampler2D _MainTex;

        struct Input
        {
            float2 uv_MainTex;
        };

        half _Glossiness;
        half _Metallic;
        fixed4 _Color;
    
    /* GPU 인스턴싱 주석함
        // Add instancing support for this shader. You need to check 'Enable Instancing' on materials that use the shader.
        // See https://docs.unity3d.com/Manual/GPUInstancing.html for more information about instancing.
        // #pragma instancing_options assumeuniformscaling
        UNITY_INSTANCING_BUFFER_START(Props)
            // put more per-instance properties here
        UNITY_INSTANCING_BUFFER_END(Props)
    */

        void surf (Input IN, inout SurfaceOutputStandard o)
        {
            // Albedo comes from a texture tinted by color
            fixed4 c = tex2D (_MainTex, IN.uv_MainTex) * _Color;
            o.Albedo = c.rgb;
            // Metallic and smoothness come from slider variables
            o.Metallic = _Metallic;
            o.Smoothness = _Glossiness;
            o.Alpha = c.a;
        }
        ENDCG
    }
    FallBack "Diffuse"
}