Canvas9 [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. [GLSL] 사각형 그리기 안녕하세요 :) 오늘은 The book of shaders를 정독하다가 아래와 같은 문제를 풀어보았습니다. Make another function that just draws the outline of a rectangle. 하루종일 업무를 보다가 쉬엄쉬엄 휴식할 겸 틀었는데 생각보다 쉽진 않을 듯합니다. ㅠㅠ 특히나 glsl은 디버깅이 쉽지 않아서 안에 들어가는 값을 머리속에 생각해야 하는 점이 더욱 진입장벽을 높이는 듯합니다. 각설하고 제가 만든 코드는 아래와 같습니다. vec3 rect( float borderWidth, vec2 blposition, vec2 trposition, vec2 st) { vec2 bl = (1.0-step(blposition, st) * step(blposition.y.. 2023. 7. 24. [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. [Canvas] 유용한 삼각함수 정리 두 지점사이 거리구하기 const getDistance = (p1, p2) => { const dx = p2.x - p1.x const dy = p2.y - p1.y return Math.sqrt(dx*dx + dy*dy) } 두 지점사이 각도구하기 export const getAngle = (p1, p2) => { const dx = p2.x - p1.x const dy = p2.y - p1.y return Math.atan2(dy, dx) } 두 지점사이의 거리를 알 때 X 좌표 거리 구하기 x = distance x cosθ 두 지점사이의 거리를 알 때 Y 좌표 거리 구하기 y = distance x sinθ 2023. 5. 16. [Canvas] window.requestAnimationFrame이란 안녕하세요, 개발자 Sean입니다. 본격적으로 3D관련 기술 공부를 시작했는데 window.requestAnimationFame이란 메서드를 보고 정리해 두면 좋겠다 생각되어 정리해 올려봅니다. MDN의 정의에 따르면 아래와 같습니다. **window.requestAnimationFrame()**은 브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출하게 합니다. 이 메서드는 리페인트 이전에 실행할 콜백을 인자로 받습니다. const animate = () => { window.requestAnimationFrame(animate); ctx.clearRect(0,0,canvasWidth, canvasHeight); particle.dr.. 2023. 2. 15. [OpenGL] OpenGL이란 무엇인가 - 1 안녕하세요, 개발자 Sean입니다. 오늘부터 본격적으로 OpenGL과 WebGL에 대해 공부를 시작해보려 하는데요, API 공부에 앞서 OpenGL의 역사에 대해 알 수 있는 좋은 책이 있어 번역해 옮겨보려고 합니다. Preface: What is OpenGL? OpenGL이란 무엇일까요? 가장 기초적인 설명을 드리자면, OpenGL은 개발자가 그래픽 하드웨어와 소통할 수 있도록 도와주는 소프트웨어 인터페이스라고 할 수 있습니다. 물론 이것보다 더 많은 설명이 필요합니다. 그래서 이 책에서는 독자들을 위해 OpenGL의 디테일한 부분까지 설명하고 있습니다. 두 손으로 직접 코딩하기에 앞서 독자 여러분들은 컴퓨터 그래픽과 OpenGL의 역사에 대해 조금 알고 갈 필요가 있습니다. 서문에서는 다음과 같은 주.. 2022. 12. 16. 이전 1 다음
