Canvas/Three.js5 [Three] Curious about the mind of AI Hello guys :) Today, I tried an interesting experiment. Recently, I've been studying AI and I've become interested in "embeddings". Here, embeddings refer to the artificial intelligence interpreting characters, images, or videos according to its own criteria and representing them as vectors. For example, when reading the character "Love," it transforms into numerous vectors like the following: [.. 2024. 1. 19. [Three] AI의 머릿속이 궁금하다 안녕하세요 :) 오늘은 재밌는 실험을 해보았습니다. 최근 AI를 공부하면서 임베딩에 관심이 생겼습니다. 여기서 임베딩이란 어떤 문자나 사진 영상을 인공지능이 나름의 기준으로 해석해 벡터로 표현하는 것을 의미합니다. 예를 들어 "Love"라는 글자를 읽으면, 아래와 같이 무수히 많은 벡터로 변형하게 됩니다. [1.2472897123532, -2.1258931740124, 0.02148483, ...] 이 숫자가 무엇을 의미하는지 그리고 왜 이렇게 만들었는지는 그 누구도 알지 못합니다. 말로만 듣던 인공지능의 블랙박스인 것이죠. 따라서 인공지능 A 모델이 임베딩한 벡터는 다른 인공지능이 이해할 수 없습니다. 오로지 같은 모델만이 위의 벡터를 읽고 의미가 "Love"인 것을 알게 됩니다. 여기서 재미있는 생각.. 2024. 1. 19. [Three.js] requestAnimationFrame 사용시 브라우저별 속도 일정하게 맞추기 안녕하세요 :) 개인 프로젝트로 블랙홀을 만들고 있는데요, 재미있는 gltf 오브젝트가 있어서 추가해 보았습니다. 저는 보통 작업할 때 크롬을 사용하기 때문에, 크롬 환경에서 시간에 따른 액션 변화를 설정했는데요, 이게 웬걸 사파리나 파이어폭스에서는 액션이 엉뚱한 타이밍에 트리거 되는 것이었습니다. 왜 이런 문제가 발생하는지 찾아보니 브라우저별 성능차이로 인한 문제였습니다. Three.js에서 움직임을 표현할 때 자바스크립트 내장 함수인 requestanimationFrame을 많이 이용합니다. 이 함수는 한 차례 랜더링이 끝나면 이어서 다음 랜더링이 시작되기 때문에 기기와 브라우저의 프레임 차이에도 최적화된 움직임을 표현할 수 있습니다. 문제는 저는 requestanimationFrame안에서 인스턴스.. 2023. 10. 6. [Three.js] 텍스처가 깜빡이는 문제 안녕하세요 :) 오늘은 아래와 같이 구름 텍스쳐를 실험하다가 각도가 변경되면 텍스처가 깜빡거리거나 부분이 잘려 보이는 문제가 발생했습니다. 위에 보시면 어색하게 잘려있는 구름이 보이실 겁니다. 위 원인은 각 객체가 가지고 있는 depth 정보 때문인데요, 객체들은 depth 정보를 이용해 해당 객체를 그릴지 말지를 결정한다고 합니다. 렌더링 최적화에는 도움이 되겠지만 위처럼 겹겹이 쌓여있는 형태의 객체에선 오히려 나타나야할 부분이 잘려버리는 문제가 발생하네요. 해결방법은 간단합니다. material을 생성할때 depthWrite 키값으로 false를 넘겨주면 됩니다. const material = new THREE.MeshLambertMaterial({ map: textureMap, transparent.. 2023. 8. 18. [Three.js] renderer와 scene 백그라운드 차이 안녕하세요 :) 최근 유니티 게임과 더불어 3D 렌더링 공부에 푹 빠져 즐거운 나날을 보내고 있습니다. 오늘은 Three.js 공부 중에 canvas의 백그라운드를 설정할 수 있는 방법이 두 가지가 있다는 사실을 알고 그 차이가 무엇인지 공부해 보았습니다. Three.js에서는 아래와 같이 "scene"과 "renderer" 두가지 인스턴스의 백그라운드를 설정할 수 있도록 해놓았습니다. // Set the background of the scene to red. scene.background = new THREE.Color(0xff0000); // Set the background of the renderer to transparent. renderer.setClearColor(0, 0, 0, 0); 언.. 2023. 6. 7. 이전 1 다음
