webgl_dog_simulation/motioncapture.html at main · 2024-webgl-dog-simulation/webgl_dog_simulation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<html>

<head>
    <link rel="stylesheet" type="text/css" href="motioncapture.css">
</head>

<script id="vertex-shader" type="x-shader/x-vertex">

attribute  vec4 vPosition;            // 정점 위치
attribute  vec3 vNormal;              // 정점 노말
varying vec4 fColor;                  // 최종 색상 (프래그먼트 셰이더로 전달됨)

uniform vec4 ambientProduct, diffuseProduct, specularProduct; // 조명 색상
uniform mat4 modelViewMatrix;         // 모델 뷰 행렬
uniform mat4 projectionMatrix;        // 투영 행렬
uniform vec4 lightPosition;           // 조명 위치
uniform float shininess;              // 광택도
uniform vec4 uColor; // 색상 정보

uniform float attenuation;              // 추가된 조명 변수

void main()
{
    vec3 pos = -(modelViewMatrix * vPosition).xyz;  // 정점의 눈 좌표계 위치

    vec3 light = lightPosition.xyz;  // 조명 위치

    vec3 L = normalize( light - pos );  // 빛의 방향

    vec3 E = normalize( -pos );         // 카메라 방향
    vec3 H = normalize( L + E );        // 반사 벡터

    vec4 NN = vec4(vNormal,0);

    // 정점 노말을 눈 좌표계로 변환
    vec3 N = normalize( (modelViewMatrix*NN).xyz);

    // 조명 방정식의 항들을 계산
    vec4 ambient = ambientProduct;

    float Kd = max( dot(L, N), 0.0 ) * attenuation;
    vec4  diffuse = Kd * diffuseProduct;

    float Ks = pow( max(dot(N, H), 0.0), shininess ) * attenuation;
    vec4  specular = Ks * specularProduct;

    if( dot(L, N) < 0.0 ) {
        specular = vec4(0.0, 0.0, 0.0, 1.0);
    }

    gl_Position = projectionMatrix * modelViewMatrix * vPosition;

    fColor = uColor * (ambient + diffuse + specular);// 최종 색상
    fColor.a = 1.0;
}

</script>

<!-- 프래그먼트 셰이더 정의 -->
<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying  vec4 fColor; // 버텍스 셰이더로부터 전달받은 색상

void main()
{
    gl_FragColor = fColor; // 최종 출력 색상
}
</script>

<!-- 외부 스크립트 파일 로드 -->
<script type="text/javascript" src="./Common/webgl-utils.js"></script>
<script type="text/javascript" src="./Common/initShaders.js"></script>
<script type="text/javascript" src="./Common/MV.js"></script>
<script type="text/javascript" src="./motioncapture.js"></script>

<body>
    <div class="container">
        <!-- 캔버스 요소 정의 -->
        <div class="canvas-container">
            <canvas id="gl-canvas" width="512" height="512">
                Oops ... your browser doesn't support the HTML5 canvas element
            </canvas>
            <ul>
                <li>1. Press the "motioncapture start" button to begin recording the motion capture.</li>
                <li>2. Use the sliders or buttons to create movements for the dog.</li>
                <li>3. Press the "motioncapture stop" button to stop the recording.</li>
                <li>4. Press the "motioncapture play" button to replay the recorded motion.</li>
                <li>5. Press the "motioncapture print" button to output the recorded motion data to the console for use.</li>
            </ul>
        </div>
        <!-- 동작 버튼들 -->
        <div class="controls-container">
            <div class="sliders">
                <div>
                    make delay (슬라이더 움직일 때마다 시간이 흐름) <input id="delayDummy" type="range" min="-120" max="120" step="1" value="-120" />
                </div><br />

                <div>
                    head2 angle <input id="head2" type="range" min="-120" max="90" step="1" value="-90" />

                </div><br />

                <div>
                    head1 angle <input id="head1" type="range" min="-180" max="180" step="1" value="" />

                </div><br />

                <div>
                    torso angle <input id="torso" type="range" min="45" max="405" step="1" value="225" />

                </div><br />

                <div>
                    torso2 angle <input id="torso2" type="range" min="-180" max="180" step="1" value="0" />

                </div><br />

                <div>
                    left upper arm angle <input id="left_upper_arm" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />
                <div>
                    left lower arm angle <input id="left_lower_arm" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />
                <div>
                    right upper arm angle <input id="right_upper_arm" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />
                <div>
                    right lower arm angle <input id="right_lower_arm" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />
                <div>
                    left upper leg angle <input id="left_upper_leg" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />
                <div>
                    left upper leg angle2 <input id="left_upper_leg2" type="range" min="-180" max="180" step="10"
                        value="0" />

                </div><br />
                <div>
                    left lower leg angle <input id="left_lower_leg" type="range" min="-180" max="180" step="10"
                        value="0" />

                </div><br />
                <div>
                    right upper leg angle <input id="right_upper_leg" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />

                <div>
                    right lower leg angle <input id="right_lower_leg" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />

                <div>
                    tail angle <input id="tail" type="range" min="-180" max="180" step="1"
                        value="0" />

                </div><br />

            </div>
        </div>
        <div class="controls-container">
            <div class="buttons">
                <button id="motioncapture_start">motioncapture start</button>
                <button id="motioncapture_stop">motioncapture stop</button>
                <button id="reset_all" onclick="location.reload()">reset all</button>
                <button id="motioncapture_print">motioncapture print</button>
                <button id="motioncapture_play">motioncapture play</button>
                <button id="walkButton">Walk</button>
                <button id="runButton">Run</button>
                <button id="lieDownButton">Lie Down</button>
                <button id="eatButton">Eat</button>
                <button id="peeButton">Pee</button>
                <button id="shakeButton">Shake</button>
                <button id="wagTailButton">Wag Tail</button>
                <button id="stopButton">Stop</button>
            </div>
            <div class="buttons">
                <a href="./index.html">Return to main page.</a>
            </div>
        </div>
    </div>
</body>

</html>