이 예제에서 사용하는 셰이더는 p5.Framebuffer로부터의 깊이 정보를 사용하여 흐림 효과를 적용합니다. 실제 카메라에서, 렌즈의 초점보다 가깝거나 멀리있는 물체는 흐릿하게 보입니다. 이는 그 효과를 모방합니다. 먼저, 스케치는 프레임버퍼에 다섯 개의 구체를 렌더링합니다. 그 다음, 흐림 셰이더를 사용하여 프레임버퍼를 캔버스에 렌더링합니다.
프레임버퍼 흐림(Framebuffer Blur) by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0.
관련 예제
![](/_astro/11_3D-00_Geometries-thumbnail.CIGxWPlb_ZrLzA7.webp)
No alt text
지오메트리
사용자 정의 모델을 포함하여, 3D 도형을 그립니다.
![](/_astro/11_3D-01_Custom_Geometry-thumbnail.hOI_CIjS_kGC1q.webp)
No alt text
사용자 정의 지오메트리
프로그래밍을 통해 3D 도형을 생성합니다.
![](/_astro/11_3D-02_Materials-thumbnail.BH6mGApZ_Z1y8uVN.webp)
No alt text
재질(Materials)
3D 객체의 색상, 질감, 그리고 빛에 반응하는 정도를 변경합니다.
![](/_astro/11_3D-03_Orbit_Control-thumbnail.-zEVdjrU_Zua1gI.webp)
No alt text
궤도 컨트롤(Orbit Control)
마우스로 카메라를 제어합니다.
![](/_astro/11_3D-04_Filter_Shader-thumbnail.BSzfvPSy_Z7FNLg.webp)
No alt text
필터 셰이더(Filter Shader)
셰이더로 이미지를 조작합니다.
![](/_astro/11_3D-05_Adjusting_Positions_With_A_Shader-thumbnail.D6XjOyN8_1AWOoU.webp)
No alt text
셰이더로 위치 조정하기
셰이더를 사용하여 도형의 정점을 조정합니다.
![](/_astro/11_3D-06_Framebuffer_Blur-thumbnail.Ck8s9IeK_Z1r2Q1P.webp)
No alt text
프레임버퍼 흐림(Framebuffer Blur)
카메라의 심도(depth of field)를 시뮬레이션합니다.