이 글은 'WebGL Advent Calendar 2018' 21일째
갱신 늦어져 버려 죄송합니다. 그리고 구현도 중간 정도입니다 .... 웃음
이런 사상을 가진 사람도 있구나 그 정도의 기분으로 읽을 수 있으면 다행입니다

소개

WebGL에서는 GLSL과 JavaScript, 2개의 언어를 써야 합니다
따라서 두 언어 간의 설명의 차이에 당황 스러움이 생깁니다.
GLSL에서는 명확하게 형식을 정의해야 하는 반면 JavaScript에서는 형식 정의를 기본적으로 수행하지 않아도 됩니다. var라든지 쓰면 좋다
이런 언어 간의 차이로 실수가 태어난 경험은 누구나 있는 것이 아닐까요?
이번에는 GLSL에서도 var라든지 쓸 수 있으면 좋지요! 그렇다고 생각하는 사상적인 이야기입니다.

프로토타입

변수 p, color를 var 문으로 정의합니다. 에디터가 마음대로 형을 변환해 실행해 줍니다

구현

엄청 고리 누르고 있습니다. 일단 이런 식으로 실현 될 수 있다는 이야기입니다.

한 번 var 문에 정의된 행을 검색합니다.

var p = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);

그런 다음 정규식에서 =에서 오른쪽을 검색합니다.

= (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);

꺼낸이 줄을 한 번

float x = (gl_FragCoord.xy * 2.0 - resolution) / min(resolution.x, resolution.y);

와 같이 float 형의 변수로 재정의
이 녀석을 준비한 WebglContext에 넣어 컴파일하고 오류를 봅니다.
다음과 같은 오류가 발생합니다.

ERROR: 0:5: '=' : cannot convert from 'highp 2-component vector of float' to 'highp float'

이 오류는 vec2 유형에서 float 유형으로 대체되어 오류가 발생합니다. 즉, 'highp 2-component vector of float'가 vec2형을 나타내고 있는 것입니다
따라서 var를 vec2로 변환하고 실행합니다.
우변이 float 형이면 에러는 나오지 않습니다. 그래서 var는 float로 변환합니다.

결론

GLSL을 JavaScript처럼 var만으로 변수 정의할 수 있으면 좋지요! 라는 이야기였습니다.
실제로 형의 붙여 잊거나 실수시에, 에러문에서는 일단 우변이 판정할 수 있고 있다고 생각해, 조금 그것을 이용해 놀아 본 느낌입니다
구현이 달콤하기 때문에 아직 전혀 실용에는 이르지 않습니다 (예 : uniform 변수는 var 문으로 정의 할 수 없으며 오른쪽이 없으면 유형을 결정할 수 없습니다 ...)

h tps://우케 y시마. 기주 b. 이오 / 자 sl /
샘플은 여기에서 동작을 확인할 수 있습니다!