R3F(React + Three.js / Typescript)로 인터렉티브 포트폴리오 만들기
안녕하세요. 영광스러운 첫 질문이군요! 다름이 아니라 원하는 프레임에 곰이 꿀에 도착하게 하기 위해서 단위 벡터에 다시 dist를 곱해주잖아요. 거리는 변수 이름 그대로 distBearToHoneyVec이니까, 곰에서 꿀까지의 거리인 것 같은데 distanceTo() 함수를 호출하실 때 원점(0, 0, 0) 기준으로 하셨더라고요. 제가 잘못 이해한 건지 실수하신 건지 궁금합니다~
아무도 질문을 안남긴것으로보아 이 강의는 인기가 없나보네요.. 저는 강의 출시하시자마자 구매해놓고 묵혀놨다가 이제야 조금씩 꺼내보고있는데요 궁금한게있습니다. cursor에게 시키면서 코드를 짜고계신데, 제가 솔직히 이해를 못하겠는 코드라면 어떻게해야하나요? 취미로 하는거라면 괜찮은데 이걸로 밥벌어먹고 살고있다면요?..ㅠㅠ 앞으로의 공부방향과 중점을 어디에 둬야하는지를 잘 모르겠습니다. 그리고 저는 애플클론코딩 강의도 들었던 학생인데요, framer-motion이라는 아무 강력한 css 라이브러리가있잖아요? 이걸 사용하면 애플클론코딩에서했던 그런것들을 간소화시키고 더 쉽게 구현할 수 있는거같습니다. 선생님도 framer-motion 자주 사용하시나요? 또 유튜브는 안하시나요? 리액트+framer-motion으로 인터랙티브효과 주는것도 한번쯤 보여주셨으면 좋겠습니다.
안녕하세요 선생님. material까지 강의를 들으면서 두 가지 궁금한 점이 생겼습니다. 로컬 서버에서 ctrl+s 하면 자동으로 핫로딩되어 코드 변경사항이 화면에 반영되는 것으로 알고 있습니다. (리액트의 경우는 root부터 리렌더링) 그런데 핫로딩을 했을 때 바로 반영되는 코드가 있고, 직접 브라우저에서 새로고침해줘야 반영되는 코드가 있었습니다. <핫로딩 시 안변함 (only 새로고침으로만 변경사항 반영됨)> material wireframe 적용 camera fov, far 속성 그 외 등등 <핫로딩 시 변함> Geometry 종류 변경 transform 속성 변경 (position, scale, rotation) mesh color 변경 materal 종류 변경 그 외 등등 위와 같은 차이가 발생하는 이유를 잘 모르겠습니다. 내부 동작면에서 뭔가 다른게 있는 걸까요? (three.js 코드를 까보면 좀 명확해지려나요...) Mesh의 정의를 어떻게 내려야할지 잘 모르겠습니다. 아래 두 가지 중 어느 쪽이 더 맞는 설명일까요? Geometry와 material을 감싼 껍데기 Geometry와 material로 이루어진 하나의 물체 또, 종종 3D 모델링에서 정육면체, 삼각형 등을 오브젝트라고 부르는 걸 들은 적 있는 것 같은데, 해당 오브젝트라는 명칭이 맞는 명칭인가요? 그렇다면, Mesh = 오브젝트 라고 부를 수 있을까요? 감사합니다.
섹션3- 3D 구성요소 알아보기 강의 에서 설명주신것중 강의에서는 fov와 zoom의 수치를 감소시키거나 증가시켰을때, 선이라고 해야하나요? Cam이 찍고있는 좁아지고 넓어지는 그 선의 범위가 fov와 zoom이 같은 것 같아서 헷갈립니다! 혹시 어떤 차이가 있는지 알려주실 수 있으실까요?
안녕하세요 선생님. 무료보기 시청 후 바로 결제해서 달리고 있습니다. 하루 1강씩 뚫어보려고 합니다 😋 다름이아니라 DOM, SVG, Canvas를 비교해서 설명해주신 부분에서 의견을 여쭙고 싶은 내용이 있었습니다. Canvas의 2D Context보다 3D Context(WebGL)가 더 빠른 이유 이전에 2D Context를 공부하면서, 3D Context는 하드웨어 가속이 가능하기 때문에 더 빠르다는 글을 읽은 적이 있었습니다. 그런데 렌더링 자체는 Canvas 2D도 하드웨어 가속으로 처리되는 걸로 알고 있어서요. (간단한 작업은 CPU에서 처리한다는 글도 읽은 적 있었는데 어느 쪽이 맞는 말인지 사실 잘 모르겠습니다...) 아래 두 가지 중 어느 쪽이 WebGL Context가 2D Context보다 더 빠른 이유에 더 적합할까요? 2D Context는 일부 CPU에서 렌더링하기도 하지만, WebGL은 전부 GPU에서 렌더링한다. WebGL은 셰이더를 GPU에서 실행시키기 때문에 2D Context보다 CPU 처리량이 적다. 수많은 개체를 애니메이션 할 때 더 적합한 쪽 : WebGL API vs DOM(or SVG) + transform 속성 DOM 계산은 기본적으로 비용이 많이 발생하니, 수많은 개체를 '렌더링' 할 때에는 WebGL이 훨씬 유리할 것 같았는데, 위치를 옮긴다던가, 크기를 변경하는 애니메이션을 적용할 때에는 강사님께서는 WebGL과 transform 속성 중 어느 쪽을 더 선호하시나요? WebGL도 transform 속성도 레이아웃 재계산을 발생시키지 않지만, 전자는 JS로 조작해야하고, 후자는 조작은 css로 하지만 브라우저 레이어를 활용하는 것으로 알고 있어서요. 어느 쪽이 더 효율적일까요...? 강의 중 보여주신 아래 그림에서, SVG의 사각형과 텍스트만 테두리가 좀 흐리게 보이고 있는데 이런 현상이 왜 발생하는걸까요? 이론 적으로는 SVG가 가장 깔끔해야할 것 같은데 픽셀이 깨질 정도로 확대하지 않는 이상은 SVG 쪽이 더 흐릿하게 보이는 것 같아 여쭤봅니다. 사실 강의도 강의지만, 평소에 고민하던 것을 여쭤본 것이기도 해서 가볍게 답변해주시더라도 너무 감사할 것 같습니다. 힘내서 완강해보겠습니다..! 감사합니다.
OpenGL 쉐이더 (7) shader 3D 그래픽스 - 텍스처 매핑, 큐브 맵, 환경 매핑, 범프 매핑
이전에 part8 강의 오픈 일정에 대해 문의 드렸었는데 그때 주신 답변이 아래와 같았습니다. 'part 8 은 9월 중순경에 릴리즈 될 것으로 보이고, vulkan 은 10월 말까지 완결될 것으로 보입니다.' 강의를 기다렸는데 늦어지시는 것 같아 재차 질문 드리게 되었습니다. part8 과 vulkan 강의 오픈 일정을 알 수 있을까요?
OpenGL 쉐이더 (7) shader 3D 그래픽스 - 텍스처 매핑, 큐브 맵, 환경 매핑, 범프 매핑
먼저 좋은 강의 감사드립니다. Multi Texture 강의를 듣고 다음과 같은 사항을 렌더링 하는 가장 좋은 방법이 궁금하여 질문 남깁니다. 복수개의 서로 다른 동영상을 다음 그림과 같이 화면에 표출한다고 할 때, Multi Texture 개념을 통한 Rendering이 가능할까요? 현재는 5번의 Draw를 호출하는 형태로 진행하고 있는데, 좀더 효율적인 방법이 있는지 궁금하여 질문 올립니다. 감사합니다.
