콜로소

Search Input

코딩으로 구현하는 3D 인터랙티브 아트워크

미디어 아티스트
  • 수강가능
인터랙티브코딩WebGL셰이더코드Three.jsP5.js
‌
‌

클래스 상세 정보

  • 수강가능
  • 중급
  • 총 29회 39시간 5분
  • -
  • 강의자료 포함
‌
‌
‌

미디어아티스트 최건혁 Details

커리큘럼
커리큘럼

커리큘럼을 보여드려요

  • SECTION 01
    웹에서 셰이더 활용 기초 - P5.js
    curriculum_mediaartist_choigunhyuk_01.webp
    curriculum_mediaartist_choigunhyuk_02.webp
    curriculum_mediaartist_choigunhyuk_03.webp
    curriculum_mediaartist_choigunhyuk_04.webp

    • 01. 오리엔테이션- 미디어 아티스트 최건혁 - 코딩으로 그림을 그린다는 것 / 코딩으로 그림을 그리는 사람들 - 이 강의에서 주로 다루는 셰이더란? - 공부 레퍼런스 소개 - 강의 순서 소개

    • 02. P5.js : 간단한 도형 그려보기- 기본도형 - 커스텀 도형 그려보기 *미니예제 실습

    • 03. P5.js : 깃털 그려보기- 반복문 활용해서 그림 그려보기 - 노이즈 함수 사용해서 형태 변주해보기 *미니예제 실습

    • 04. P5.js : 뿌리같은 구조 그려보기- 자바스크립트 클래스 - 재귀적으로 반복되는 규칙 *미니예제 실습

    • 05. P5.js / Shader : 셰이더 시작해보기- 일단 같이 해봐요 / 셰이더 코드 써보기 - 픽셀 좌표란? - 간단한 그라데이션 그려보기 *미니예제 실습

    • 06. P5.js / Shader : 간단한 도형을 그리고 셰이더로 가공해보기- P5 CreateGraphics 활용 / 간단한 도형 그리기 - 마우스 주변 이미지 왜곡해보기 - P5.js에서만 셰이더를 사용하면 아쉬운 이유 *미니예제 실습

  • SECTION 02
    웹에서 셰이더 활용 기초 - Three.js
    curriculum_mediaartist_choigunhyuk_07.webp
    curriculum_mediaartist_choigunhyuk_08.webp
    curriculum_mediaartist_choigunhyuk_017.webp
    curriculum_mediaartist_choigunhyuk_024.webp

    • 07. CodeSandbox 소개- CodeSandbox 소개 크롬 개발자 도구 소개 셰이더 작업을 위한 환경 소개

    • 08. 벡터 그래픽에서 3D 심볼 제작- Adobe Illustrator 로 몇가지 간단한 벡터그래픽 그리고, svg로 내보내기 - Blender로 svg 불러오고, 간단한 3D 로고 만들어보기 - glb 확장자로 내보내기 *미니예제 실습

    • 09. Three.js : GLTF 3D 모델 로딩 - Threejs의 GLTFLoader 클래스로 모델 로드하기 - Threejs OrbitControl 클래스 활용해서 모델 확인해보기 - 간단한 재질(환경맵) 적용해보기 - 간단한 빛, 그림자 적용해보기 *미니예제 실습

    • 10. Three.js : 간단한 3D씬 그려보기- 반복문 활용하여 이전에 만든 3D 로고 주변에 몇가지 기하형태 배치해보기 - 간단한 애니메이션 적용해보기 - 오디오에 반응하게 만들어보기 *미니예제 실습

    • 11. Three.js / Shader : 3D 모델의 재질에 셰이더 적용해보기- Three.js ShaderMaterial 활용해서 그려보기 *미니예제 실습

    • 12. Three.js / Shader : 프레임버퍼 셰이더를 활용하기 위한 환경 구축- 프레임버퍼에 대하여 - Three.js WebGLRenderTarget 활용해서 프레임버퍼에 그릴 수 있는 환경 구축 및 클래스로 정리 *미니예제 실습

    • 13. Three.js / Shader : 픽셀좌표와 체커보드 그리기- 픽셀좌표에 관하여 / 픽셀좌표를 이용한 그리기에 관하여 - 앞으로 진행해볼 셰이더를 활용한 그리기 소개 - 픽셀좌표의 왜곡에 관하여 - 픽셀좌표의 왜곡으로 만들 수 있는 다양한 종류의 반복 *미니예제 실습

    • 14. Three.js / Shader : 그리드를 나누고, 각 그리드에 다양한 색 채워보기- 유사난수생성 함수에 관하여 - 유사난수생성 함수와 픽셀좌표 왜곡을 이용해서 그리기 *미니예제 실습

    • 15. Three.js / Shader : 노이즈를 활용해 복잡한 질감 그려보기- 노이즈 함수의 특성 이해 / 노이즈 함수란 무엇일까요? - 노이즈 함수 시각화 - 도메인 워핑 *미니예제 실습

    • 16. Three.js / Shader : 만화경 그려보기- 공간의 반사 / 반복이 일어나는 원리 - 회전시켜보기 - 선형변환 *미니예제 실습

    • 17. Three.js / Shader : 웹캠 활용해서 만화경 거울 만들어보기- 사용 가능한 카메라 기기 확인 - 셰이더로 카메라 인풋 가져오기 - 카메라 인풋 왜곡해보기 - 만화경 거울 만들어보기 *메인예제 실습

    • 18. Three.js / Shader : 간단한 2D 그림 그리기- 이니고의 2D SDF 도형들 - 도형을 조합해서 그리는 여러가지 방법들 min, max, smin 등 *미니예제 실습

    • 19. Three.js / Shader : 메타볼 그려보기- 메타볼은 무엇일까요? - 위키피디아에 묘사된 공식 적용해서 그려보기 - 2D SDF 활용해서 그려보기 *미니예제 실습

    • 20. Three.js / Shader : 복잡한 2D 그림 그려보기 1- 간단한 그림 그려보기 - 반복되는 공간 *메인예제 실습

    • 21. Three.js / Shader : 복잡한 2D 그림 그려보기 2- 간단한 그림 그려보기 - 반복되는 공간 / 겹치는 공간 *메인예제 실습

    • 22. Three.js / Shader : 모션블러 만들어보기- 백버퍼의 개념 - 백버퍼 활용한 작업을 위한 환경 구축 - 백버퍼를 활용해서 간단한 모션블러 만들어보기 - 3D로고로 만든 3D씬에 적용해보기 *미니예제 실습

    • 23. Three.js / Shader : 백버퍼를 활용한 텍스처 어드벡션- 어드벡션이란? / 이 개념을 이해하면 어떤 작업이 가능해질까요? - 노이즈 함수를 활용한 어드벡션 *미니예제 실습

    • 24. Three.js / Shader : 텍스처 어드벡션 다양하게 활용해보기- 발산 / 수축하는 이미지 - 3D로고와 같이 사용해보기 *메인예제 실습

  • SECTION 03
    코랩 활용해서 셰이더로 영상 만들어보기 - Colab / ModernGL
    curriculum_mediaartist_choigunhyuk_025.webp
    curriculum_mediaartist_choigunhyuk_026.webp
    curriculum_mediaartist_choigunhyuk_028.webp
    curriculum_mediaartist_choigunhyuk_029.webp

    • 25. Colab : 코랩과 파이썬, 그리고 영상- 코랩 소개 / 파이썬 소개 - 코랩으로 영상 만들기의 장점 - 코랩으로 OpenGL을 사용하려 할때 생기는 문제 / 극복 방법

    • 26. Colab : 코랩 경험해보기- 조건문 / 반복문 / 함수 / 클래스 등 간략하게 문법 살펴보기 - 구글드라이브 마운트 - PIL로 이미지 로드해보기 *미니예제 실습

    • 27. Colab / Shader : 코랩에서 셰이더로 그리기 1- ModernGL 설치 - 셰이더 프로그램으로 프레임버퍼 업데이트할 수 있는 환경구축 - 셰이더 프로그램으로 이미지 만들어보기 - PIL로 낱장 이미지로 결과 확인 - MoviePy로 쉐이더로 그려지는 이미지 영상으로 만들어보기 *미니예제 실습

    • 28. Colab / Shader : 코랩에서 셰이더로 그리기 2- 코랩에서 ModernGL 활용하여 인풋 이미지 사용할 수 있는 환경 구축 - 여러개의 패스를 활용한 그리기 *미니예제 실습

    • 29. 마무리- 공부를 지속하는 것에 관하여 - 셰이더 코드와 프레임 버퍼로 그리는 3D - 파티클 시뮬레이션 GPGPU? - 유체 시뮬레이션 - 반복하고 변주하는 것에 관하여 - 공부해볼만한 추가 레퍼런스 / 도구 / 주제들 살펴보기

추천 클래스

유의사항

*강의 영상 공개일은 예고 없이 변경될 수 있습니다. *상세페이지 내 일부 이미지는 수강생의 이해를 돕기 위한 참고 이미지입니다. * 본 상품은 동영상 형태의 강의를 수강 하는 상품입니다.(ASSET상품 제외) * 상황에 따라 사전 공지 없이 할인이 조기 마감되거나 연장될 수 있습니다. * 사전 예약 강의의 경우, 강의 영상은 공개 일정에 따라 순차적으로 제작되어 오픈되며, 1차 영상 공개일이 수강시작일이 됩니다. * 수강 신청 및 결제를 완료하시면, 마이페이지를 통해 바로 수강이 가능합니다. 총 학습기간: – 정상 수강기간(유료 수강기간) 최초 10일, 무료 수강 기간은 11일부터 이후로 무제한이며, 유료 수강기간과 무료 수강기간 모두 동일하게 시청 가능합니다. – 수강시작일: 수강 시작일은 결제일로부터 기간이 산정되며, 결제를 완료하시면 마이페이지를 통해 바로 수강이 가능합니다. (사전 예약 강의는 1차 강의 오픈일) – 콜로소의 사정으로 수강시작이 늦어진 경우에는 해당 일정 만큼 수강 시작일이 연기됩니다.
회사의 환불정책은 다음과 같습니다.
  • 가. 결제 후 파일 공개 전(강의 영상 공개 전)환불을 요청하시면 전액 환불이 가능합니다.
  • 나. 결제일로부터 7일 이내 및 3개 미만의 파일을 이용하신 경우 환불을 요청하시면 전액 환불이 가능합니다.
  • 다. 결제일로부터 7일 이내 3개 이상의 파일을 이용하신 경우 환불을 요청하시면 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다.
  • 라. 결제일로부터 7일 초과 10일 이내 및 3개 미만의 파일을 이용하신 경우 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다.
  • 마. 결제일로부터 7일 초과 10일 이내 및 3개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다.
  • 바. 결제일로부터 10일 초과 시 환불 가능 금액이 없습니다.
  • 사. 환불 금액 확인 후 실제 환불이 이루어지기 전 추가적으로 강의 영상 파일 또는 강의 자료 파일을 이용한 상황이 확인되면 환불 가능 금액은 달라질 수 있습니다.
  • 아. 평생 시청 수강권의 경우 수강 일수에 제한이 없으나, 기간 선택 수강권은 구매 시점에 선택하신 기간에 해당하는 일 수만큼 수강이 가능하며, 일시 정지 및 기간 연장이 불가합니다.
  • 자. 기간 선택 수강권은 평생 시청 수강권으로 전환이 불가합니다.
  • 차. 1:1 코칭권의 경우 결제일로부터 10일까지 전액 환불이 가능하며, 결제일로부터 10일 초과시, 사용 여부에 관계없이 환불 가능 금액이 없습니다.
결제 기준일
이용 파일 개수
환불률
결제 후 파일 공개 전
없음
100%
결제일로부터 7일 이내
3개 미만
100%
결제일로부터 7일 이내
3개 이상
50%
결제일로부터 7일 초과 10일 이내
3개 미만
50%
결제일로부터 7일 초과 10일 이내
3개 이상
0%
결제일로부터 10일 초과
무관
0%
- 본 제품을 재판매, 재배포, 도용, 양도하는 등의 행위는 불가능 합니다. - 본 제품에서 추출된 이미지, 단순 보정 이미지는 양도,배포, 판매가 불가능합니다. - 본 제품은 결제 완료 직후 [나의 강의장] > [수강하기] > [강의자료]로 확인 가능합니다. - 본 제품은 결제 후 7일 이내 및 파일을 이용하지 않으신 경우 환불을 신청하시면 전액 환불이 가능합니다. - 본 제품은 무형 상품의 특성상 결제 후 7일 이내 및 1개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다. - 본 제품은 결제일로부터 7일 초과시 파일 사용 여부에 관계 없이 환불 가능 금액이 없습니다.
[유의사항] - 기간 선택 옵션은 구매 시점부터 선택하신 옵션에 해당하는 기간만큼 수강이 가능하며, 일시정지 및 기간 연장이 불가합니다. - 기간제 클래스의 수강기간이 끝난 뒤 평생시청 클래스로의 전환은 불가합니다. - 기간제 클래스의 수강기간이 끝난 뒤 평생시청 클래스로 수강을 원할 시 판매중인 평생시청 클래스를 구매하셔야 합니다. [환불안내] - 결제 후 파일 공개 전(강의 영상 공개 전)환불을 요청하시면 전액 환불이 가능합니다. - 결제일로부터 7일 이내 및 3개 미만의 파일을 이용하신 경우 환불을 요청하시면 전액 환불이 가능합니다. - 결제일로부터 7일 이내 3개 이상의 파일을 이용하신 경우 환불을 요청하시면 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다. - 결제일로부터 7일 초과 10일 이내 및 3개 미만의 파일을 이용하신 경우 실 결제금액의 1/2에 해당하는 금액을 환불해드립니다. - 결제일로부터 7일 초과 10일 이내 및 3개 이상의 파일을 이용하신 경우 환불 가능 금액이 없습니다. - 결제일로부터 10일 초과 시 환불 가능 금액이 없습니다. - 환불 금액 확인 후 실제 환불이 이루어지기 전 추가적으로 강의 영상 파일 또는 강의 자료 파일을 이용한 상황이 확인되면 환불 가능 금액은 달라질 수 있습니다. - 평생 시청 수강권의 경우 수강 일수에 제한이 없으나, 기간 선택 수강권은 구매 시점에 선택하신 기간에 해당하는 일 수만큼 수강이 가능하며, 일시 정지 및 기간 연장이 불가합니다. - 기간 선택 수강권은 평생 시청 수강권으로 전환이 불가합니다. - 1:1 코칭권의 경우 결제일로부터 10일까지 전액 환불이 가능하며, 결제일로부터 10일 초과시, 사용 여부에 관계없이 환불 가능 금액이 없습니다. - 특별강좌는 이벤트성 강좌, 비정규 강좌, 특별기획 강좌 등으로서 이는 별도의 수강 취소, 변경 및 환불정책이 적용될 수 있습니다. - 보다 자세한 환불규정은 [여기]에서 확인 부탁드립니다. (2024-04-01 이용약관 개정) [영상 재생 가능 기기 대수 제한] - 하나의 계정당 영상 재생 가능한 기기 수를 3대로 제한하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기기 변경 도와드리도록 하겠습니다. (등록하실 첫 3대의 기기는 로그인 후 영상 재생과 동시에 자동 등록됩니다.) [기타 사항] - 콜로소는 환불 시 금융거래수수료, 제세공과금 등을 공제할 수 있습니다. - 콜로소는 고객이 이용약관, 관련 법령 등을 위반한 경우 이용약관 및 관련 법령에 따라 환불을 거부할 수 있습니다. - 회원이 다음과 같은 행위 등으로 ‘사이트’의 업무를 방해하는 경우 ‘회사’는 회원자격을 제한 및 정지시킬 수 있습니다. ① ‘사이트’를 통해 ‘상품 등’을 구매한 후 정당한 이유 없이 상습 또는 반복적으로 취소∙반품하여 ‘회사’의 업무를 방해하는 경우 ② ‘사이트’를 통해 구입한 ‘상품 등’에 특별한 하자가 없는데도 불구하고 일부 사용 후 상습적인 취소∙전부 또는 일부 반품 등으로 ‘회사’의 업무를 방해하는 경우 [기타 문의] - 기타 프로모션에 대한 문의는 고객센터로 문의주시면 답변해 드립니다.
- 이용방법 : 본인의 포트폴리오 결과물 및 질문 최대 3개를 보내주시면 21일(영업일 기준) 이내로 피드백을 제공합니다. - 이용기한 : 결제일로부터 90일 이내 (이후 사용 여부에 관계 없이 이용권 소멸) *얼리버드(사전판매)로 구매하셨을 경우, 강의 영상 최초공개일이 수강시작일로 간주됩니다. - 제출방식 : feedback@coloso.co.kr 로 [이름 / 콜로소 ID / 휴대폰번호]를 적고, [포트폴리오 파일]을 첨부해 보내주세요. - 유의사항 : 코칭권 별 최대 질문 수, 제출 방식이 상이 할 수 있으니 자세한 내역은 코칭권 안내 섹션을 확인해주세요.
[사용기기 대수 제한] 하나의 계정당 수강 가능한 기기+브라우저 수량을 3개로 제한하며, 핸드폰 변경 등과 같은 사유로 등록된 사용 기기+브라우저를 변경하고 싶으실 경우 help@coloso.co.kr로 문의주시면 연 1회에 한하여 기존 등록된 내역 삭제 드리도록 하겠습니다. (등록하실 첫 3개의 기기+브라우저는 강의장 접속과 동시에 자동 등록됩니다.) [동시 접속 제한] 동일한 아이디로 2대 이상의 디바이스에서 서비스를 동시에 이용하거나 서비스 이용 중 복제프로그램을 실행하는 경우 또는 녹화를 하는 경우 영상 재생이 자동으로 정지됩니다. [기타 사항] - 콜로소는 환불 시 금융거래수수료, 제세공과금 등을 공제할 수 있습니다. - 콜로소는 고객이 이용약관, 관련 법령 등을 위반한 경우 이용약관 및 관련 법령에 따라 환불을 거부할 수 있습니다. - 회원이 다음과 같은 행위 등으로 ‘사이트’의 업무를 방해하는 경우 ‘회사’는 회원자격을 제한 및 정지시킬 수 있습니다. ① ‘사이트’를 통해 ‘상품 등’을 구매한 후 정당한 이유 없이 상습 또는 반복적으로 취소∙반품하여 ‘회사’의 업무를 방해하는 경우 ② ‘사이트’를 통해 구입한 ‘상품 등’에 특별한 하자가 없는데도 불구하고 일부 사용 후 상습적인 취소∙전부 또는 일부 반품 등으로 ‘회사’의 업무를 방해하는 경우
1. 모든 강의에서 제공하는 콘텐츠(강의 자료, 예제 등)에 대한 지식 재산권은 Coloso와 연사에게 귀속됩니다. 2. 콘텐츠는 강의 수강 목적으로만 사용하여야 하며, 그 외 목적으로는 어떠한 사유로도 콘텐츠를 이용/활용하는 등의 행위를 할 수 없습니다. * 단, 강의 수강 목적으로 예제 실습 과정에서 직접 제작한 작품은 출처 명시를 전제로 개인 SNS에 게시할 수 있습니다. 출처 예시: 1) coloso - 강사명을 활용한 예제입니다. 2) 콜로소 - 강사명 예제 실습 3. 모든 강의에서 제공하는 콘텐츠(강의 자료, 예제 등)의 유출 및 공유를 금합니다. 4. 위 1~3에 명시된 주의 사항을 위반할 경우, Coloso는 위반자에 대하여 민형사상 조치를 취할 수 있습니다.