ShaderToy+openframeworksでキューブマップ

###openframeworks+ofxshadertoyでキューブマップが使えない。
openframeworksでshadertoyのコードでGLSLが表示できるofxshaderttoyというアドオンがあるが、
（関連記事　　https://qiita.com/quittardis/items/8ba902ebceeef93d55c8
そのままでは、shadertoy.comにあるキューブマップ系のコードがシェーダーコンパイル時にエラーになる。
（関連リンク　https://www.shadertoy.com/view/MdXfDS
そこで、いろいろやってみたところ、なんとか動いたので報告する。

(上は、shadertoy.comのhttps://www.shadertoy.com/view/tdjXDt をopenframeworksで動作させた画面）

(上は、shadertoy.comのhttps://www.shadertoy.com/view/4stXRN をopenframeworksで動作させた画面）

(上は、shadertoy.comのhttps://www.shadertoy.com/view/4sKGWV をopenframeworksで動作させた画面。マウスでぐるぐる回せます。）

###ofxShadertoy.cppの変更箇所

ofxShadertoy.cppの42行目の　

"uniform float xOutputAlpha;\n"

の下に　

"uniform samplerCube cubemap;\n"

を追加する。これは、シェーダー側で、キューブマップ用のマッピングデータを受け取る変数である。

###openframeworks上での追加

openframeworks上のofApp.cppに以下を追加する。これで、6枚のキューブマップの画像データを読み込む。
shadertoy.comで使われているキューブマップの画像データはこちらからダウンロードできる。
https://shadertoyunofficial.wordpress.com/
これをopenframeworksのbin下のdata下に置く。

unsigned int ofApp::loadCubemap(std::string fileName) {
	unsigned int textureID;
	glGenTextures(1, &textureID);
	glBindTexture(GL_TEXTURE_CUBE_MAP, textureID);

	for (unsigned int i = 0; i < 6; i++)
	{
		//get proper file name for each face from folder path -- assumes all files are named 'posX.jpg', etc
		std::string fileNameTemp = fileName;
		if (i == 0) { fileNameTemp.append("posX.png"); }
		else if (i == 1) { fileNameTemp.append("negX.png"); }
		else if (i == 2) { fileNameTemp.append("posY.png"); }
		else if (i == 3) { fileNameTemp.append("negY.png"); }
		else if (i == 4) { fileNameTemp.append("posZ.png"); }
		else if (i == 5) { fileNameTemp.append("negZ.png"); }

		ofImage image;
		//image.load(fileNameTemp.c_str());
		image.load(fileNameTemp);
		int width = image.getWidth();
		int height = image.getHeight();
		//unsigned char *data = stbi_load(fileNameTemp.c_str(), &width, &height, &nrComponents, 0);
		unsigned char *data = image.getPixels().getData();
		if (data)
		{
			glTexImage2D(GL_TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
			//stbi_image_free(data);
		}
		else
		{
			//std::cout << "Cubemap texture failed to load at path: " << fileNameTemp[i] << std::endl;
			std::cout << "Cubemap texture failed to load at path: " << fileNameTemp << std::endl;
			//stbi_image_free(data);
		}
	}
	glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
	glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
	glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
	glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
	glTexParameteri(GL_TEXTURE_CUBE_MAP, GL_TEXTURE_WRAP_R, GL_CLAMP_TO_EDGE);

	return textureID;
}

ヘッダーには以下を加える。
'''
unsigned int loadCubemap(std::string fileName);
'''

###shadertoyのコードの変更箇所
たとえば、https://www.shadertoy.com/view/MdXfDS
のコードは、

vec3 getRayDirection(vec2 screenPosition, vec3 origin, vec3 lookingAt, vec3 up, float fov)
{
    vec3 d = normalize(lookingAt - origin);
    vec3 rayRight = normalize(cross(d, up));
    
    return normalize(screenPosition.x * rayRight + screenPosition.y * up + 1.0 / tan(radians(fov / 2.0)) * d);
}

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
	vec2 position = (2.0 * fragCoord - iResolution.xy) / iResolution.y;
    vec3 cameraPosition = vec3(0.0, 0.0, 0.0);
    vec3 cameraUp = vec3(0.0, 1.0, 0.0);
    vec3 cameraLookingAt = vec3(cos(iTime), 0.0, sin(iTime));
    vec3 rayDirection = getRayDirection(position, cameraPosition, cameraLookingAt, cameraUp, 90.0);
    
    fragColor = vec4(texture(iChannel0, rayDirection).xyz, 1.0);
}

であるが、この17行目の　fragColor = vec4(texture(iChannel0, rayDirection).xyz, 1.0);
でエラーになる。
このiChannel0をcubemapに変更し、
　　　　　　　　　　　　fragColor = vec4(texture(cubemap, rayDirection).xyz, 1.0);
とする。

###openframeworksからキューブマップデータをロードして、シェーダーに渡す。
openframeworksからキューブマップデータをロードして、シェーダーに渡す方法は
以下の通り

unsigned int cubemapTexture = loadCubemap("cubemaps/" + ＜キューブマップフォルダ名＞ + "/");
glBindTexture(GL_TEXTURE_CUBE_MAP, cubemapTexture);
shadertoy[shdrNum].setUniform1i("cubemap", cubemapTexture);

つまり、cubeMaptextureはキューブマップ画像に紐づけられたunsigned intの値で、これを
setUniform1i　でシェーダーの変数cubemapに渡している。