eullee

[eullee]

Infinity Tower

광교 갤러리아 백화점에 설치된 인피니티 타워는 3층 높이의 투명 LED 기둥으로 이루어져있다. 인피니티 타워는 인공위성에서 실시간으로 날씨 데이터를 받아와 현재 시각, 계절, 명절, 태양과 달의 위치 등의 정보를 시각화한다. 해당 작업에 크리에이티브 코더로 참여하여 C#과 쉐이더언어를 통해 데이터를 시각화하는 작업을 맡았다.​

#study #Vimeo

[eullee]

gradient noise

기존까지 연마했던 noise를 Value noise라고 부른다는 사실을 배웠다. Value noise가 blocky한 느낌을 주는 반면, gradient noise는 organic하게 노이즈가 자연스럽게 분포된다.

gradient noise를 구하는 법은 요약하면 이렇다.

기본적으로 격자점마다 랜덤하게 값을 매겨서, 격자점으로부터의 거리에 따라 차등적으로 영향력을 먹인 총합을 구한다는 점에서 value noise와 같다.

그러나 value noise가 일차원 float 값을 격자점에다 먹인뒤, 단순 거리비례로 영향력을 부여하는것과 달리

gradient noise는 격자점에 2차원 벡터값을 먹이며, 그 2차원 벡터값을 현재 픽셀좌표의 벡터값과 내적시킨뒤에, 거리비례로 영향력을 부여한다.

그리고 바로 이 차별점이, 보다 organic한 모양의 노이즈를 발생시킨다.

왜 기준점마다 2차원 벡터값을 매기며, 하필 내적을 하느냐?!

Value noise가 blocky한 느낌을 줄 수 밖에 없는 이유는, 기준점으로부터 정확한 거리비례로 방사형으로 노이즈가 퍼지는반면

gradient는 기준점이 내포하고 있는 수치가 1차원 float이 아닌 방향성을 나타내는 2차 벡터 자료이기에, 기준점과 현재 좌표와의 내적을 했을시, (내적값이란, 각 벡터의 스칼라값 곱하기 각도의 코사인값이기 때문에, 만약 양 벡터간의 방향이 같으면 양의 값을, 방향이 다르면 음의 값을 나타내게 된다.) 기준벡터의 방향과 같은 방향에 위치하고 있는 좌표와, 반대 방향에 위치하고 있는 좌표간의 영향력 차가존재한다.

요약하면 gradient는 방사형으로 곱게 퍼지는 value noise와 달리, 주위 좌표들에게 차별적인 영향력을 미친다.  그것이 다소 일그러진 모양의 노이즈를 형성시켜 보다 자연적인 느낌의 노이즈를 발생시키는 것이다.

소스코드) http://thebookofshaders.com/edit.php?log=170828085043

#wesaAcademy

[eullee]

Physis

#artwork #lee eul #generative #physis

[eullee]

Rain(고운비) - Bird’s-Eye View

Realtime Audiovisual Installation @Seosomun Shrine History Museum

If you want to see this full screen, visit Here

#media art #media #art #digital #digital art #new media #rain #museum #seosomun #audio #audiovisual #realtime #lee eul #artwork #study

[eullee]

Rain(고운비)

Realtime Audiovisual Installation @Seosomun Shrine History Museum

Phase #1 Drop

Phase #2 Reveil

#media art #digital art #seosomun #rain #audiovisual #realtime #installation #media #art #artwork #study

[eullee]

reminiscence

#Lee Eul #artwork #digital art #generative #realtime #이을 #unity

[eullee]

Quad Treed Lisa

#artwork #lee eul #이을 #lisa #monalisa #quadtree #unity #mediaart #newmediaart

[eullee]

Face Morphing

#Lee Eul #shader #VFX #unity

[eullee]

100% Code Based photorealistic Graphics

순수하게 프로그래밍으로만, 실사와 같은 그래픽을 만드는 알고리즘을 완성했다.

렌더링 파이프라인과, 물리기반 렌더링에 대한 과학적 이해를 기반으로 현재로써는 타인에게 설명이 가능한 정도로 알고리즘을 완전히 소화한 상태이다.

지난 겨울 Processing Community Day@Seoul과 서강대 아트&앤테크놀로지 컨퍼런스, 그리고 올해 서강대 영상대학원에 해당 내용으로 강연하였다.

#study #Lee Eul #artwork #real #real life #graphics #programming

[eullee]

Real-Time Smoke Effect

8x8 FlipBook텍스쳐를 통해, 파티클 자체가 시간에 따라 애니메이션을 갖도록 설정. 단순한 Quad Mesh에 빌보딩을 통해 구현한 파티클이지만, 노멀데이터를 넣어줌으로써 빛에 의해 굴곡진 메쉬를 갖는것 처럼 눈속임을 갖게하였다. 

앞서 말했듯, 단순한 Quad Mesh이지만, 노멀 텍스쳐를 통해 얻은 데이터로 새롭게 빛계산을 하여야 하기 때문에 Particle의 Mesh는 Lit Mesh로 설정해줘야 한다는게 핵심이다.

#Lee Eul #smoke #realtime #real-time #lighting

[eullee]

Physically Based RayMarching

#glsl #shader #Lee Eul #이을 #artwork

[eullee]

Lettering on The Surface of Water

작년 이맘때 한창 연구하던 수면표현 알고리즘(https://eullee.tumblr.com/tagged/water)에서 그래픽적 디테일을 개선하였다.

사용자가 키보드로 입력한 문자열을 수면위에 띄우는 상호작용을 추가하였다.

FBO를 생성하고

해당 FBO에 사용자가 입력한 글을 띄운다(배경은 검정, 글자색은 흰색)

FBO의 텍스쳐를 쉐이더의 유니폼으로 입력해주고 쉐이더상에서는 해당 텍스쳐의 픽셀밝기를 읽어 글자부분에 해당하는 수면의 수위를 올린다.

간단한 원리이다.

#Lee Eul #interaction #shader #glsl #UX #UI #media art #study

[eullee]

Kawano Hiroshi를 기리며

MCMC를 이용하여 만들었다는 선생의 작업을 C++로 복구하는데 성공하였다. 

선생의 작업은 현재 나로써 그 소스코드를 구할 방도가 없었고, 구한다 하여도 당대 FORTRAN으로 구현된 프로그램을 해석할 자신도 없었다. 아마 선생의 작품이 기증된 ZKM에는 어쩌면 소스코드 원문이 보존되어 있을지도 모르겠다.

컴퓨터 생성예술을 하는 히로시 선생에 대한 일본내에서의 반응은 꽤나 싸늘하다고 한다. 그런 와중에 한국의 진중권이라는 미학자에 의해 그 가치가 재조명되어 한국에 <예술.기호.정보>, <컴퓨터 예술의 탄생>이라는 선생의 책이 출간될 수 있었다는 사실이 얼마나 다행스러운 일인지 모른다.

Simulated Mosaic - Kawano Hiroshi

<컴퓨터 예술의 탄생>에 단편적인 구술로나마, 선생의 MCMC작업에 대한 소개 인터뷰가 있었다. 나는 해당 인터뷰에 의지하여 고고학자마냥 깜깜한 동굴속을 손으로 짚어 내려가는 기분으로 복원작업을 진행하였다.

결론적으로 말해 책에 기술된 인터뷰 내용 만으로는 풀 수 없는 오류가 발생하였고, 해당 문제를 푸는데 시간이 많이 소요되었다. markov연쇄가 좌측소자와 상측소자의 결합으로 이루어진다고 책에는 나와있으나, 단순히 좌측과 상측의 결합으로는 (연수와 관계없이) 도형이 대각방향으로 찌그러지는 문제가 발생하였고, 궁리끝에 좌측상단 방향의 대각소자까지 결합하여 문제를 해결하였다. 아마 선생께서도 그리 하셨을거라고 생각한다.(아무리 생각해도 그 방법밖에 없다)

자세한 내용은 <컴퓨터 예술의 탄생>을 읽어보신 뒤, c++로 번역한 나의 복원코드를 읽어보시는 것을 추천드린다. https://github.com/leeeul/kawano_hiroshi

시국이 시국인지라, 일본인 학자를 나의 조상이라 말하는것이 다소 어색하지만서도, 나와 같은 generative를 하는 예술가에게는 백남준보다 더욱 직계 조상이 되는 예술가라고 믿는다. 평생의 외로움을 감수하면서도 지켜낸 선생의 그 숭고한 뜻을 이어받아간다. 

#study #Lee Eul #MCMC #kawano hiroshi #complex #complex system #simulated #simulated mosaic

[eullee]

Markov Chain Monte Carlo (Metropolis-Hastings algorithm)

MCMC의 개념에 대한 전반적인 이해를 돕기위한 설명은 다음 사이트보다 더 잘할 자신이 없다. http://www.secmem.org/blog/2019/01/11/mcmc/

위 사진은, MCMC적 상황을 연출한 한가지 가상 사례를 세워 그것을 컴퓨터로 시뮬레이션 한 결과물이다.

어떤 연못이 수련잎으로 덮여있고, 수련 잎 중 하나에 개구리가 앉아있다.

수련 잎은 놓인 위치에 따라 (개구리의 먹이가 될) 곤충의 수가 다르게 분포한다.

매분마다 개구리는 이웃하는 수련 잎 중 하나를 무작위로 선택하고, 새 수련 잎 위의 벌레가 현재 개구리가 있는 수련 잎 위의 벌레보다 더 많으면, 이웃한 새 수련 잎으로 옮겨간다.

새 수련 잎 위의 벌레가 더 적으면, 개구리는 두 장소에서 잡을 수 있는 벌레들의 상대적인 수에 의해 정해지는 확률로 새 수련 잎으로 옮긴다.

그렇다. 정확히 Metropolis-Hastings 알고리즘을 사람의 언어로 풀어 쓴 가정이다.

위에서 보이는 결과물의 왼쪽 사진이, 이제 ‘원본' 확률분포이다. 각 픽셀이 갖고 있는 밝기(0~255)가 수련잎의 벌레수를 의미하고, 그 위를 개구리들이 metropolis 알고리즘에 의해 뛰어다니며 오른쪽 도화지에 샘플링한다.

직접 구현해 본 C++ 소스코드는 다음 주소에 첨부하였다. 

https://github.com/leeeul/Metropolis-Hastings

#study #mcmc #metropolis #hastings #sampling #Lee Eul #이을

[eullee]

빠른 연산은 인류에 이롭다

안개가 자욱한 장소에서 봉우리를 찾는다. 가장 뻔한 전략은, 가시거리에서 확인할 수 있는 오르막길을 찾는 것이다.(Hill Climbing 전략이라고 부른다) 만약 주변을 둘러봤을 때 모든 길이 내리막이라면, 우리는 봉우리에 도달한 것이다.

그러나 내가 찾은 그 봉우리가, 전체에서 제일 높은 봉우리일 확률은 낮다. 안개가 걷히고 보니, 내가 오른 봉우리는 에베레스트산 저만치 아래 조그마한 동산일 뿐이었다.

Hill Climbing에서의 Global Max와 Local Max

계산화학이라는 분야가 있다. 컴퓨터를 통해 화학반응을 가상으로 시뮬레이션 하는 일을 말한다. 비싸거나 위험한 화학실험 등도 컴퓨터상에서 가상으로 돌릴 수 있고, 원하는 결과가 나오지 않았을 경우, 변인들을 디버깅하듯 들여다볼 수 있어서 노벨 화학 상도 받았단다.

한 번은 미국에서 부작용 없는 모르핀(morphine)을 찾으려 했던 일이 있었다. 이때 시뮬레이션 한 분자가 300만 가지가 넘었고 전 세계 화학자들이 다 달라붙어도 이번 세기 안에 끝내지 못했을 분량이었다.

이때, 계산화학을 통해, 컴퓨터를 이용한 분자 실험을 시행하여 300만 가지의 분자 중 가능성 있는 23개의 분자를 추렸고 마침내 ‘PZM21’이라는 물질을 발견했다.

실제 PZM21의 분자구조는 모르핀과의 공통점이 별로 없었고, 만약 계산화학의 도움 없이 사람이 일일이 노가다를 해서, 모르핀에서부터 출발하여 분자구조를 조금씩 바꿔가는 식으로 Hill Climbing했다면, 결코 찾아낼 수 없었을 물질이었다는 것이다.

산등성이의 안개를 걷히게하여 곧바로 청명한 에베레스트를 바라볼 수 있게한 것은 역시 컴퓨터의 도움 덕분이다. 이쯤 되면 연산 속도는 빠르기만을 의미하지 않는다.

생사를 오가는 긴급한 질환에 걸린 환자의 병을 특정 짓는데 1년이 걸린다면, 해당 검사는 실행할 수 없는 방법이 된다. 그러나 기술력이 발전하여 검사 기간이 1주일로 줄어들었다면, 해당 검사는 해볼 만한 검사가 된다. 단순히 검사의 속도가 빨라졌다가 아니라, 검사가 ‘가능해졌다’의 문제라는 것이다.

정말로 빠른 연산은 인류에 도움이된다. 

GPGPU를 배우고 익혀갈 수록, 나의 작은 힘이 세상에 보탬이 될 수 있겠다는 희망을 갖게 된다. 나의 배움이 보다 많은 사람들을 행복하게 했으면 좋겠다. 그런 사람이 되고싶다. 

#gpgpu #alan turing #study #Lee Eul #이을

[eullee]

Swarm with GPGPU

100만 파티클의 정보를 처리하는 gpgpu

해당 정보를 가지고 도형을 그려줄 gpu instancing

 우선 이번 작업에서 쓰인 gpgpu는 보다 근원적인 학습을 위해 CUDA나, Compute Shader를 사용하지 않고, openframeworks를 통해 GPU Texture Memory만을 갖고 만든 gpgpu이다. 텍스쳐의 각 픽셀 하나하나는 곧 객체 하나하나의 위치와 속도정보를 담고있다. 이 텍스쳐 정보를 쉐이더를 이용해 접근하고 갱신한다.

 그 후, 이렇게 만든 다량의 객체정보를 갖고 도형을 그릴때에는 instancing을 사용하는데, 그 이유는 2가지로 정리할 수 있다. 

 첫째로 gpu와 cpu를 소통시키지 않기 위해서 그렇다. cpu의 정보를 gpu로 넘기거나, gpu에서 처리한 데이터를 cpu로 가져오는 일은 상당히 시간이 오래걸리는 일이다. 이것을 피하기 위해, cpu로 정보를 가져오는 일 없이, gpu에서 처리한 텍스쳐 정보를 곧바로 instancing을 활용하여 shader로 넘겨 그림을 그린다.

 둘째로, drawcall을 줄여야 하기 때문이다. 100만개의 객체를 그리기 위해 100만번의 drawcall을 실행하면 속도가 떨어져 절대로 리얼타임이 될 수 없다. instancing을 활용하여 100만개의 객체를 단 한번의 drawcall로 그려내는 것이 속도 향상의 관건이다.

#study #Lee Eul #이을 #gpgpu #gpu #instancing #particles #swarm

[eullee]

Ray Reflect

 IBL 조명에서의 도형간 빛 튕김을 추적하여 표현한 작업이다. 물론 어떤 리소스도 없이 오로지 코딩으로만 작업하였다.

 딱 1년이 걸린 것 같다. 리얼타임 그래픽스는 C4D나 MAX에 비해 아름답지 않은 것이 당연하며, 그 영역은 크리에이티브 코더들의 영역이 아닐 것이라는 무문관을 넘고 싶었다. 이제 나는, 어떠한 엔진이나, 미리 정의된 쉐이더 프리셋의 도움 없이 바닥에서부터 오로지 랭귀지만으로 실사에 버금가는 그림을 만들 수 있다.

 쉐이딩 지식(수학의 언어)을 머릿속에 탑재한 현재의 상태에서 Unreal, Unity나 OF는 그저 carrier에 불과하다.

 비쥬얼 퀄리티에도 uncanny valley가 존재한다는 생각이 든다. 너무 좋은 퀄리티의 리얼타임 그래픽은 되려 그것의 경쟁 카테고리가 사진이나, 영화산업의 컴퓨터 그래픽스 등으로 확대되어 다시 또 시시해진다.

 무엇이 리얼타임을 리얼타임답게 만드는가. 이 질문에 대한 답을 구하는 과정은 어쩌면, 그간의 노력들을 무색하게 만드는 아예 다른 시도를 해야 함을 의미할 것이라 체감한다.

 나를 파괴하는 일은 상당히 번거롭고 괴롭다. 

 나는 다른 사람이 된다.

#study #shader #Lee Eul #이을 #PBR #gpu #ray #reflect