material 파트까지 들은 후 생긴 궁금증

안녕하세요. dbjoung님 질문주셔서 감사드립니다. ㅎㅎ1.R3F의 three.js객체들 중에 React lifecycle과 독립적으로 동작하는 부분은 hot reload시에는 변경되지 않을 수 있습니다. 예를들어 useRef로 mesh, material, geometry를 직접 수정한경우 hot reload시에 반영되지 않을 수 있습니다. 그리고 useLoader, useGLTF, useTexture를 사용하는 부분도 메모리에 캐싱되기 때문에 변경 후 hot reload될때 변경되지 않을 수 있습니다. 그리고 말씀 주신것처럼 material wireframe 적용이나 camera fov, far 속성등은 material객체와 camera객체를 인스턴스화 해서 사용하기때문에 바로 적용되지 않습니다. 예전 three.js버젼에서는 자동으로 material같은 속성들을 자동으로 업데이트해줬는데, 최근 three.js버젼에서는 퍼포먼스 이슈로 자동으로 업데이트 하지 않고 명시적으로 업데이트 해야하는 경우도 있습니다. 실제 프로젝트에서도 원하는 타이밍에 업데이트하는 코드를 넣고는 합니다. 예를들어 material속성을 바꾸고 material.needsUpdate = true, camera속성을 바꾸고 camera.updateProjectionMatrix() 이런 코드를 명시적으로 추가해야합니다. three.js도 r3f도 버젼이 계속 갱신되고 있으니 또 개선될수도 있을 것 같습니다. 자세한 부분은 아래 부분을 살펴보시면 좋을것 같아요. https://inf.run/DQQHK 2. 이질문에 대한 제 생각은 b.Geometry와 material로 이루어진 하나의 물체가 좀더 맞는 표현인것 같습니다. 껍데기라고 함은 아무런 기능이 없겠지만 mesh는 geometry와 material이 합쳐진 하나의 어떤 실체가 있는 오브젝트이기 떄문입니다. 그리고 강의에서 반복적으로 설명드리는 내용인데요, object3D를 객체가 있습니다. scene, camera, mesh, group다 obejct3D입니다. 그래서 'mesh = 오브젝트' 라기 보다는 오브젝트가 좀 더 큰 개념이라고 생각하시면 좋을것 같습니다. 답이 되었는지 모르겠네요. 또 추가적인 궁금증이나 질문있으시면 남겨주세요 ㅎㅎ 감사합니다!

zoom과 fov의 차이점이 잘 이해가 안됩니다.

안녕하세요, 주현님 질문주셔서 감사합니다.강의 영상에서는 cameraHelper를 사용해서 보여주기 때문에 fov와 zoom이 비슷하게 동작하는 것처럼 보여서 헷갈리실 수 있을 것 같아요. 둘다 카메라의 프러스텀(Frustum) 영역을 조정하기 때문에 cameraHelper에서는 비슷하게 보일 수 있습니다. 하지만 실제로 동작하고 사용하는것은 다른데요. 대부분의 실제 프로젝트에서는 fov는 처음에 세팅하고 바꾸지 않습니다. 카메라의 시야각으로서 원근감을 나타내는 값이예요. 그래서 값을 높게 주면 화면이 왜곡되어 보이므로 적당한 값(default 50)을 주고 프로젝트를 시작하시면 됩니다. 대부분 프로젝트에서는 저 값을 중간에 바꾸지 않습니다.zoom은 사용자의 액션에 따라 바꿀수도 있습니다. zoom 값을 변경하면 카메라의 원근감은 변하지 않고 카메라의 뷰 확대/축소만 동작하기때문에 왜곡되지 않습니다. 그래서 확대/축소시에는 fov가 아닌 zoom을 사용해서 인터렉션을 많이 할 수 있어요 다른 질문있으시면 편하게 남겨주세요. 감사합니다 :)

1강 관련하여 의견을 여쭙고 싶은 게 있습니다.

안녕하세요. dbjoung님 질문주셔서 감사드립니다.굉장히 고차원?적인 질문이라서 저도 좀 찾아봤는데요 제가 이해한 내용만 간단히 답변드릴게요 ㅎㅎ Canvas의 2D Context보다 3D Context(WebGL)가 더 빠른 이유 일단 web canvas가 2d context -> webgl1 -> webgl2 -> webgpu 이런순으로 발전되고 있는데 당연히 점점 기능과 성능이 개선되고 있다고 생각하시면 편할 것 같습니다. 질문주신것 처럼 2D Context는 대부분 CPU를 사용하지만 브라우져에 따라 GPU를 사용하여 렌더링 하는 경우도 있습니다. 하지만 Direct2D나 OpenGL같은 코드를 바로 추상화 시켜서 가져다가 사용하기때문에(그냥 OpenGL코드를 호출하는 방식) 그 과정에서 성능이 떨어집니다. 반면, WebGL은 OpenGL ES를 사용하기 때문에 더 core한 저수준 API를 사용하기때문에 불필요한 추상화를 하지 않을 수 있고, webgl은 쉐이더를 사용하여 렌더링을 제어할 수 있기 때문에 성능을 최대한 발휘하는 것으로 알고 있습니다. 따라서 질문주신 2가지 중에는 'WebGL은 셰이더를 GPU에서 실행시키기 때문에 2D Context보다 CPU 처리량이 적다.'이 정확히 맞는것 같습니다. 수많은 개체를 애니메이션 할 때 더 적합한 쪽 : WebGL API vs DOM(or SVG) + transform 속성질문 주신것처럼 transform도 reflow단계를 하지 않고 GPU가속을 사용하기 때문에 빠르게 처리가 됩니다. 간단한 UI 애니메이션은 transform, opacity등 속성으로 사용해서 css animation을 하는것이 편하고 빠릅니다. 저도 일반적인 웹을 할때는 css를 사용해서 위치, 크기, 회전 등 애니메이션을 주는 경우가 많습니다. 하지만 수천개의 오브젝트의 애니메이션이거나 텍스쳐나 화려한 그래픽이 필요하다면 당연히 WebGL이 빠르고 효율적입니다. 강의 중 보여주신 아래 그림에서, SVG의 사각형과 텍스트만 테두리가 좀 흐리게 보이고 있는데 이런 현상이 왜 발생하는걸까요? 이론 적으로는 SVG가 가장 깔끔해야할 것 같은데 픽셀이 깨질 정도로 확대하지 않는 이상은 SVG 쪽이 더 흐릿하게 보이는 것 같아 여쭤봅니다.svg, canvas 모두 모니터에 표시될때는 픽셀로 표시되기때문에 래스터라이징되어야 합니다. 벡터가 픽셀로 변환되는 거죠. 그 과정에서 안티앨리어싱이 제대로 안되면 깨져보일 수 있습니다. svg의 viewBox에 따라 rect의 x,y, width, height가 계산되는데 그 값이 소수점으로 계산되버리면 픽셀 정렬이 깨져버리게 되서 그런것 같습니다. box-wrap이 width가 33.3%이고 거기서 rect의 x,y를 40%로 해버려서 소수점이 나오기 때문에 해당 값들을 px단위로 바꾸면 깨지는 문제가 덜 해집니다 ㅎㅎ 답변이 되셨는지 모르겠네요 강의 들으시면서 또 질문주시면 같이 고민해보겠습니다. 감사합니다!

'JSX.IntrinsicElements' 유형에 'mesh' 속성이 없습니다. 경고 해결법

안녕하세요. 수로님. 먼저 친절하게 공유해주셔서 감사드립니다.Typescript와 drei 설치시에도 문제가 발생하는군요.type도 react 18버젼으로 낮추고 three-mesh-bvh도 변경하는 법을 알려주셔서 감사드립니다.강의를 업데이트할때 참고해서 테스트하고 업데이트 하겠습니다. 강의들으시면서 진행 해보시다가 안되는 부분 있으시면 알려주세요. 감사합니다 :)

onClick 이벤트함수로 raycaster 방향이 자동으로 set되나요?

안녕하세요. grs0412님코딩의세계 한태재입니다.인프런 AI 인턴이 답변했듯이 r3f에서 useThree로 가져온 raycaster는 자동으로 현재 마우스 포인트를 감지하도록 설정되어있습니다. raycaster는를 useThree에서 불러오게되면 현재 마우스포인트와 카메라를 설정할 수 있는 setFromCamera가 이미 설정되어 있습니다.raycaster.setFromCamera( 현재마우스포인트, 현재카메라 )https://threejs.org/docs/#api/en/core/Raycaster.setFromCamera ( R3F가 아니라 three.js만 사용하시면 아래 url의 예시처럼 직접 setFromCamera를 호출하셔야합니다. https://threejs.org/docs/#api/en/core/Raycaster )그리고 특정 포인트에 대한 raycast를 하고 싶거나, 다른 카메라 뷰에 대한 raycast를 하고싶으면아래처럼 intersectObject를 호출하기전에 설정을 변경할 수 도 있습니다. const crntPointer = new THREE.Vector2(point.x, point.y); raycaster.setFromCamera(crntPointer, camera); const intersects = raycaster.intersectObjects(gltf.scene.children); 요약하자면 현재 마우스포인트와, 현재 카메라를 사용해서 raycaster를 사용한다면setFromCamera를 따로 설정하지 않고 바로 intersectObject를 사용하셔됩니다.다른 질문 있으시면 편하게 남겨주세요. 감사합니다 !

문제 해결했습니다.

안녕하세요! 이명재TV님 해결하셨다니 다행입니다 ㅎㅎ alias를 설정해두면 프로젝트에서 참 편하죠 !ChatGPT는 역시 인간보다 빠르고 정확하군요 ㅎㅎ저도 ChatGP를 자주 쓰고있는데요. 개념을 이해하시면서 ChatGPT와 같이 공부하시면 훨씬 능률이 좋을 것 같습니다! 다른 질문 있으시면 알려주세요! 감사합니다!

문제 있어요! alias Path @ 문제

안녕하세요. 이명재TV님 질문주셔서 감사합니다!제가 답변드리기전에 해결하셨다니 다행이네요 ㅎㅎ 또 다른 질문있으시면 편하게 알려주세요오늘도 즐거운 코딩 하세요! 감사합니다 :)

dom / svg / canvas

안녕하세요! 그리드를 활용한다는게 어떤 의미인지 잘 모르겠지만, dom/svg를 이용할때는 css animation을 많이 사용합니다. css transform과 transition을 사용하면 원하는 곳으로 animation되면서 배치하실 수 있을거라고 생각됩니다. 감사합니다!

HTML5 웹 Canvas 그래픽

Web HTML5 Creative Coding (p5.js, three.js, webgl, pixi.js 등..)