멋쟁이사자처럼 프론트엔드 5기에 참여하며 위니브와 멋쟁이사자처럼 측의 도움을 받아 진행되었던 책 집필에 대한 회고 글입니다.Canvas, SVG에 대한 내용보다는 책 집필에 대한 내용을 중점적으로 작성하였습니다.리디북스에서 보실 수 있습니다. 클릭 클릭 - I CAN VAS SVG노션으로도 보실 수 있습니다.2023.04 - 집필 팀 모집 시작멋쟁이사자처럼 프론트엔드 스쿨 5기 교육을 진행하였던 위니브 측에서는 수강생들에게 좋은 이력으로 남을만한 경험을 제공하고자 노력하셨는데 그 중 하나가 바로 프로그래밍 전자책 집필이었다.3월 달에 공지를 하고 한 달 정도가 지난 4월 상반기 책 집필 팀 모집이 시작되었다.책의 주제는 프로그래밍과 관련만 있다면 자유였고 인터랙티브와 Three.js 염불을 외우고 다니던..
들어가며컴퓨터 그래픽에서 빛은 어떻게 구현하는걸까 라는 궁금증에서 시작하는 글입니다.빛의 반사, 확산, 굴절, 투과는 어떻게 컴퓨터상에서 렌더링되는걸까요? ? ? 빛이란 무엇일까우리는 매일 태양이 떠오를 때 눈부신 햇빛을 받으며 하루를 시작하고, 밤이 되면 형광등이나 LED 조명을 켜며 일상생활을 이어갑니다. 빛은 우리 생활에 필수적입니다. 그러나 우리가 매일 접하는 이 빛, 과연 무엇일까요? 빛을 과학적으로 정의하면, 이는 전자기파의 한 형태입니다. 우리가 눈으로 인식하는 가시광선뿐만 아니라, 자외선(UV), 적외선(IR), 그리고 X선과 같은 빛도 모두 전자기파에 속합니다. 빛은 특별한 성질을 가지고 있는데, 바로 파동성과 입자성을 동시에 가진다는 것입니다. 이 특성을 파동-입자 이중성이라고 부르며,..
실행 예시우측 드래그로 카메라 이동 -> 왼쪽에 가까울수록 색상값이 낮게 변함 Custom_shader.jsDevice 해상도 width, height 값 -> u_resolution 변수로 넘김마우스 좌표: 마우스 이벤트 리스너 추가 -> u_mouse 변수로 넘김// ex_02에서 사용하는 방식 _ uniform 변수에 화면 해상도 제공 this.material.setParameter('u_resolution' , [app.graphicsDevice.width, app.graphicsDevice.height]); // ex_02 에서 마우스 좌표 this.material.setParameter('u_mouse', [0.0, 0.0]); // 마우스 이벤트 리스너 추가 con..
Playcanvas에서 띄우는 방법배포 사이트 | Shader 동작 확인용 | (https://playcanv.as/p/GnoWE25J/)프로젝트 링크 | 로그인 필요 | (https://playcanvas.com/project/1235947/overview/shader-study)Editor: 프로젝트 세팅 + Scene 구성 + Script 파일 확인 가능 Play: Playcanvas 자헤 배포 사이트Fork: 프로젝트 떠가기 프로젝트 설명 Shader가 그려질 Plane entity 1,2,3 존재각각 Script 부착: GLSL Shader코드 -> Material 에 입혀서 렌더링 시켜줄 코드 Sample Custom Shader Code출처 | Playcanvas 공식 문서 | https:..
출처[GLSL & Shaders Tutorial - Understanding The Syntax And The Idea Behind The Vertex & Fragment Shaders](https://www.youtube.com/watch?v=xZM8UJqN1eY&t=13s) GLSL definition- Open**GL** **S**hading **L**anguage 의 약자 - 브라우저에 2D를 3D로 표시하기 위해 웹 응용 프로그램이 그래픽 카드와 통신할 수 있는 프로그래밍 언어 Variables and constants + Basic types데이터 타입 지정하여 선언해야 함.intfloatbool변수에 데이터 타입을 지정하면 다른 타입의 값을 설정할 수 없다.int a = 20.0; ->..
💀TIL 선배 특강 / 현직자 특강 모던 JavaScript 튜토리얼을 읽고 공부해보고자 한다. 모든 출처: https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 자바스크립트(JavaScript) ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어 ECMAScript - Wikipedia From Wikipedia, the free encyclopedia Specification for Javascript and other programming languages ECMAScriptParadigmMulti-paradigm: prototype-based, functional, ..