Skip to content
Snippets Groups Projects
Commit bfcb3ab2 authored by pyjong1999's avatar pyjong1999
Browse files

save2

parent 5291b4e6
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
example/img.jpg 0 → 100644
+ 0
− 0
View file @ bfcb3ab2
example/img.jpg

5.52 MiB

example/img2.jpg 0 → 100644
+ 0
− 0
View file @ bfcb3ab2
example/img2.jpg

396 KiB

example/project.html
+ 9
− 1
View file @ bfcb3ab2
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
......@@ -45,6 +46,8 @@ void main()
precision mediump float;
varying vec4 fColor;
void main()
{
gl_FragColor = fColor;
......@@ -63,6 +66,10 @@ void main()
<button id="button2">handshigh</button>
<button id="button3">taptap</button>
<button id="button4">walk</button>
<div>
torso angle -180 <input id="slider0" type="range"
min="-180" max="180" step="10" value="0"
......@@ -149,8 +156,9 @@ lightY -20 <input id="slider12" type="range"
<body>
<canvas id="gl-canvas" width="512"" height="512"
<canvas id="gl-canvas" width="1280" height="1021"
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
example/project.js
+ 247
− 25
View file @ bfcb3ab2
......@@ -22,7 +22,7 @@ var vertices = [
vec4( 0.5, -0.5, -0.5, 1.0 )
];
var lightposVector = [0.0, 50, 0.0];
var lightposVector = [20, 20, 20];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
......@@ -70,7 +70,7 @@ var numAngles = 15;
var angle = 0;
var posVec = [0, 0, 0];
var theta = [0, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
var theta = [70, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
var directionVec = [0, 0, 0];
function degreesToRadians(degrees) {
......@@ -420,28 +420,76 @@ function cube(color)
gl.enableVertexAttribArray(vNormal);
}
/// 백그라운드 이미지용
var texture;
function configureTexture(image) {
texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
}
function initTexture() {
var image = new Image();
image.onload = function() {
configureTexture(image);
}
image.src = 'D:\\vscode\\computergraphics\\example\\img.jpg'; // 배경 이미지 파일 경로
}
function renderBackground() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// 배경 텍스처를 렌더링하는 코드 추가
gl.bindTexture(gl.TEXTURE_2D, texture);
// 사각형을 그려서 배경으로 사용
var vertices = new Float32Array([
-1, -1, 0, 0,
1, -1, 1, 0,
1, 1, 1, 1,
-1, 1, 0, 1
]);
var vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 2, gl.FLOAT, false, 4 * 4, 0);
gl.enableVertexAttribArray(vPosition);
var vTexCoord = gl.getAttribLocation(program, "vTexCoord");
gl.vertexAttribPointer(vTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
gl.enableVertexAttribArray(vTexCoord);
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
}
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
// WebGL 컨텍스트 설정
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }
// 뷰포트와 기본 설정
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
gl.enable(gl.DEPTH_TEST);
//
// Load shaders and initialize attribute buffers
//
// 셰이더 프로그램 설정
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
initTexture();
instanceMatrix = mat4();
......@@ -474,10 +522,10 @@ window.onload = function init() {
var near = 0.1;
var far = 100.0;
projectionMatrix = perspective(fovy, aspect, near, far);
// projectionMatrix = ortho(-10.0,10.0,-10.0, 10.0,-10.0,10.0);
//projectionMatrix = ortho(-20.0,20.0,-20.0, 20.0,-20.0,20.0);
var eye = vec3(0, 10, 20);
var at = vec3(0, 0, 0);
var eye = vec3(0, 10, 30);
var at = vec3(0, 5, 0);
var up = vec3(0, 1, 0);
modelViewMatrix = lookAt(eye, at, up);
//modelViewMatrix = mat4();
......@@ -564,6 +612,19 @@ window.onload = function init() {
}
};
document.getElementById("button3").onclick = function() {
if (animationState === 0) {
animationState = 8; // Start animation
}
};
document.getElementById("button4").onclick = function() {
if (animationState === 0) {
animationState = 18; // Start animation
}
};
for(i=0; i<numNodes; i++) initNodes(i);
......@@ -599,10 +660,11 @@ function greeting(){
const tstate1 = [70, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
const pstate1 = [0, 0, 0];
const tstate2 = [70, 0, 235, -80, 190, -75, 210, -60, 210, -60, 10, 130, 30, 0, 6];
const pstate2 = pstate1.map((value, index) => value + directionVec[index] * 3);
const tstate3 = [70, 0, 245, -90, 180, -80, 210, -60, 210, -60, 30, 120, 40, 0, 8];
const tstate2 = [70, 0, 235, -80, 190, -75, 210, -60, 210, -60, 10, 130, 30, 0, 15];
const pstate2 = pstate1.map((value, index) => value + directionVec[index] * 1);
const tstate3 = [70, 0, 245, -90, 180, -80, 210, -60, 210, -60, 30, 120, 40, 0, 20];
const tstate4 = tstate3;
const pstate4 = pstate2.map((value, index) => value + directionVec[index] * -1);
const tstate5 = tstate1;
const frame1 = 60;
......@@ -614,6 +676,7 @@ function greeting(){
const parray1 = divideArrays(pstate2, pstate1, frame1);
const tarray2 = divideArrays(tstate3, tstate2, frame2);
const tarray3 = divideArrays(tstate4, tstate3, frame3);
const parray3 = divideArrays(pstate4, pstate2, frame4);
const tarray4 = divideArrays(tstate5, tstate4, frame4);
if (animationState === 1) {
......@@ -624,6 +687,7 @@ function greeting(){
} else if (animationState === 3) {
({ theta, frameCount } = updateTheta(theta, tarray3, frameCount, frame3, 4));
} else if (animationState === 4) {
posVec = updatepos(posVec, parray3);
({ theta, frameCount } = updateTheta(theta, tarray4, frameCount, frame4, 0));
}
......@@ -638,13 +702,13 @@ function handshigh(){
return;
const tstate1 = [70, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
const tstate2 = [70, 0, 180, -90, 180, -90, 220, -60, 220, -60, -50, 130, 0, 0, -10];
const tstate2 = [70, 0, 180, -90, 180, -90, 200, -50, 200, -50, -50, 160, 0, 0, -20];
const tstate3 = tstate2;
const tstate4 = tstate1;
const frame1 = 20;
const frame2 = 60;
const frame2 = 100;
const frame3 = 20;
const tarray1 = divideArrays(tstate2, tstate1, frame1);
......@@ -664,6 +728,161 @@ function handshigh(){
}
}
var tap = 0;
function taptap(){
// 8~12
if(animationState < 8 || animationState > 17)
return;
const tstate1 = [90, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];//시작
const tstate2 = [90, 0, 230, -100, 210, -60, 210, -60, 230, -100, -60, 150, 0, 0, 0];//준비
const pstate1 = [0, 0, 0];
const tstate3 = [90, 0, 230, -100, 220, -80, 220, -80, 230, -100, -60, 152, 4, 0, 0];//콩
const pstate2 = [0, -0.1, 0];
const tstate4 = tstate3;
const pstate3 = [0, 0.0, 0];
const tstate5 = tstate2;
const tstate6 = tstate1;
const tstate7 = [90, 0, 210, -60, 230, -100, 230, -100, 210, -60, -60, 150, 0, 0, 0];//준비
const tstate8 = [90, 0, 220, -80, 230, -100, 230, -100, 220, -80, -60, 152, 4, 0, 0];//콩
const tstate9 = tstate8;
const tstate10 = tstate7;
const tstate11 = tstate1;
const frame1 = 100;
const frame2 = 20;
const frame3 = 10;
const frame4 = 20;
const frame5 = 100;
const frame6 = 100;
const frame7 = 20;
const frame8 = 10;
const frame9 = 20;
const frame10 = 100;
const tarray1 = divideArrays(tstate2, tstate1, frame1);
const parray1 = divideArrays(pstate2, pstate1, frame2);
const tarray2 = divideArrays(tstate3, tstate2, frame2);
const tarray3 = divideArrays(tstate4, tstate3, frame3);
const tarray4 = divideArrays(tstate5, tstate4, frame4);
const parray2 = divideArrays(pstate3, pstate2, frame4);
const tarray5 = divideArrays(tstate6, tstate5, frame5);
const tarray6 = divideArrays(tstate7, tstate6, frame6);
const tarray7 = divideArrays(tstate8, tstate7, frame7);
const tarray8 = divideArrays(tstate9, tstate8, frame8);
const tarray9 = divideArrays(tstate10, tstate9, frame9);
const tarray10 = divideArrays(tstate11, tstate10, frame10);
if (animationState === 8) {
({ theta, frameCount } = updateTheta(theta, tarray1, frameCount, frame1, 9));
} else if (animationState === 9) {
posVec = updatepos(posVec, parray1);
({ theta, frameCount } = updateTheta(theta, tarray2, frameCount, frame2, 10));
} else if (animationState === 10) {
({ theta, frameCount } = updateTheta(theta, tarray3, frameCount, frame3, 11));
} else if (animationState === 11) {
posVec = updatepos(posVec, parray2);
if(tap < 10){
({ theta, frameCount } = updateTheta(theta, tarray4, frameCount, frame4, 9));
tap++;
}
else{
({ theta, frameCount } = updateTheta(theta, tarray4, frameCount, frame4, 12));
tap = 0;
}
} else if (animationState === 12) {
({ theta, frameCount } = updateTheta(theta, tarray5, frameCount, frame5, 13)); // 돌아오기
}
else if (animationState === 13) {
({ theta, frameCount } = updateTheta(theta, tarray6, frameCount, frame6, 14)); // 준비자세
}
else if (animationState === 14) {
posVec = updatepos(posVec, parray1);
({ theta, frameCount } = updateTheta(theta, tarray7, frameCount, frame7, 15)); //콩
}
else if (animationState === 15) {
({ theta, frameCount } = updateTheta(theta, tarray8, frameCount, frame8, 16)); // 기달림
}
else if (animationState === 16) {
posVec = updatepos(posVec, parray2);
if(tap<10){
({ theta, frameCount } = updateTheta(theta, tarray9, frameCount, frame9, 14)); // 내려옴
tap++;
}
else{
({ theta, frameCount } = updateTheta(theta, tarray9, frameCount, frame9, 17));
tap=0;
}
}
else if (animationState === 17) {
({ theta, frameCount } = updateTheta(theta, tarray10, frameCount, frame10, 0));
}
for (let i = 0; i < numNodes; i++) {
initNodes(i);
}
}
// theta = [90, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0]; //기본
// theta = [90, 0, 230, -110, 210, -60, 210, -60, 230, -110, -60, 150, 0, 0, 0]; //오른발 들기
// theta = [90, 0, 190, -70, 230, -60, 230, -60, 190, -70, -60, 150, 0, 0, 0]; //오른발 딛기
// theta = [90, 0, 210, -60, 230, -110, 230, -110, 210, -60, -60, 150, 0, 0, 0]; //왼발 들기
// theta = [90, 0, 230, -60, 190, -70, 190, -70, 230, -60, -60, 150, 0, 0, 0]; //왼발 딛기
var walking = 0;
function walk(){
// 18 ~
if(animationState < 18 || animationState > 26)
return;
const tstate1 = [90, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
const tstate2 = [95, 0, 230, -110, 210, -60, 210, -60, 230, -110, -60, 151, 1, 0, 2];
const tstate3 = [100, 0, 190, -70, 230, -60, 230, -60, 190, -70, -60, 149, -1, 0, 0];
const tstate4 = [105, 0, 210, -60, 230, -110, 230, -110, 210, -60, -60, 150, 1, 0, -2];
const tstate5 = [110, 0, 230, -60, 190, -70, 190, -70, 230, -60, -60, 150, 0, 0, 0];
const tstate6 = [115, 0, 230, -110, 210, -60, 210, -60, 230, -110, -60, 151, 1, 0, 2];
const tstate7 = [115, 0, 210, -60, 210, -60, 210, -60, 210, -60, -60, 150, 0, 0, 0];
const frame1 = 20;
const frame2 = 20;
const frame3 = 20;
const frame4 = 20;
const frame5 = 20;
const frame6 = 100;
const tarray1 = divideArrays(tstate2, tstate1, frame1);
const tarray2 = divideArrays(tstate3, tstate2, frame2);
const tarray3 = divideArrays(tstate4, tstate3, frame3);
const tarray4 = divideArrays(tstate5, tstate4, frame4);
const tarray5 = divideArrays(tstate6, tstate5, frame5);
const tarray6 = divideArrays(tstate7, tstate6, frame6);
if (animationState === 18) {
({ theta, frameCount } = updateTheta(theta, tarray1, frameCount, frame1, 19));
} else if (animationState === 19) {
({ theta, frameCount } = updateTheta(theta, tarray2, frameCount, frame2, 20));
} else if (animationState === 20) {
({ theta, frameCount } = updateTheta(theta, tarray3, frameCount, frame3, 21));
} else if (animationState === 21) {
({ theta, frameCount } = updateTheta(theta, tarray4, frameCount, frame4, 22));
} else if (animationState === 22) {
if(walking < 50){
({ theta, frameCount } = updateTheta(theta, tarray5, frameCount, frame5, 19));
walking++;
}else{
({ theta, frameCount } = updateTheta(theta, tarray5, frameCount, frame5, 23));
walking = 0;
}
} else if (animationState === 23) {
({ theta, frameCount } = updateTheta(theta, tarray6, frameCount, frame6, 0));
}
for (let i = 0; i < numNodes; i++) {
initNodes(i);
}
}
var render = function() {
gl.clear( gl.COLOR_BUFFER_BIT );
......@@ -671,8 +890,11 @@ var render = function() {
if (animationState !== 0) {
greeting();
handshigh();
taptap();
walk();
//headmove();
}
renderBackground();
traverse(torsoId);
requestAnimFrame(render);
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

feedback to tooltime@ajou.ac.kr or hwan@ajou.ac.kr