셰이더 컴포넌트 (멀티 샘플러 텍스 용)를 준비하고 싶습니다.
현재 상태에서는 2 개의 텍스처 이미지 만 사용 (활성화 및 바인딩)합니다.
하지만이 줄 :
gl_FragColor = textureColor + textureColor1 + textureColor2;
textureColor2를 샘플링 한 텍스처가 바인딩되지 않았기 때문에 텍스처 뷰에 문제가 있습니다.
셰이더에서는 console.log 또는 다른 표준 디버깅 방법을 사용할 수 없습니다. 셰이더에 대해 자세히 알고 싶지만 멈춰 있습니다.
코드 :
...
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform sampler2D uSampler;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
uniform sampler2D uSampler6;
uniform sampler2D uSampler7;
uniform sampler2D uSampler8;
uniform sampler2D uSampler9;
uniform sampler2D uSampler10;
uniform sampler2D uSampler11;
uniform sampler2D uSampler12;
uniform sampler2D uSampler13;
void main(void) {
vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t));
vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s, vTextureCoord.t));
// Need help here
gl_FragColor = textureColor + textureColor1 ;
//gl_FragColor = textureColor + textureColor1 + textureColor2;
// 업데이트 된 질문
if ( ${numTextures} == 1)
{
gl_FragColor = textureColor;
}
else if (${numTextures} == 2)
{
gl_FragColor = textureColor + textureColor1;
}
else if (${numTextures} == 3)
{
gl_FragColor = textureColor + textureColor1 + textureColor2;
}
// 지금은 단순 실용주의를 사용합니다.
//로드시 셰이더에 값을 전달합니다.
// 여전히 런타임에 셰이더를 업데이트 할 수 없습니다.
///////////////////////////////////////
// 이것은 그리기 함수의 세그먼트입니다.
for (var t=0;t<object.textures.length;t++) {
eval( " world.GL.gl.activeTexture(world.GL.gl.TEXTURE"+t+"); " )
world.GL.gl.bindTexture(world.GL.gl.TEXTURE_2D, object.textures[t]);
world.GL.gl.pixelStorei(world.GL.gl.UNPACK_FLIP_Y_WEBGL, false);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MAG_FILTER, world.GL.gl.NEAREST);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_MIN_FILTER, world.GL.gl.NEAREST);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_S, world.GL.gl.CLAMP_TO_EDGE);
world.GL.gl.texParameteri(world.GL.gl.TEXTURE_2D, world.GL.gl.TEXTURE_WRAP_T, world.GL.gl.CLAMP_TO_EDGE);
// -- Allocate storage for the texture
//world.GL.gl.texStorage2D(world.GL.gl.TEXTURE_2D, 1, world.GL.gl.RGB8, 512, 512);
//world.GL.gl.texSubImage2D(world.GL.gl.TEXTURE_2D, 0, 0, 0, world.GL.gl.RGB, world.GL.gl.UNSIGNED_BYTE, image);
//world.GL.gl.generateMipmap(world.GL.gl.TEXTURE_2D);
world.GL.gl.uniform1i(object.shaderProgram.samplerUniform, t);
}
...
아마도 런타임에서 가장 좋은 방법은 object.textures 배열로 조작하는 것입니까?!
드디어 :
무엇을 성취하려고합니까?
텍스처를 많이 사용 하는 일반적인 방법 은 이 기사 의 하단에 있는 텍스처 아틀라스 를 사용하는 것 입니다.
그렇지 않으면 텍스처가 셰이더에로드되었는지 감지 할 방법이 없습니다. 자신의 플래그를 전달해야합니다. 예를 들면
uniform bool textureLoaded[NUM_TEXTURES];
또는
uniform float textureMixAmount[NUM_TEXTURES];
실제로 14 개의 텍스처가 필요한 고유 한 작업을하고 있다는 사실을 알지 못하는 한 내가 당신이라면 텍스처 아틀라스를 사용하겠습니다.
셰이더를 즉석에서 생성하는 것도 일반적입니다. 거의 모든 게임 엔진이이 작업을 수행합니다. Three.js도 그렇게합니다. 따라서 텍스처를 켜고 끄는 대신 N 텍스처에 대한 셰이더를 생성하는 코드를 작성하십시오. 그런 다음 하나의 텍스처 만 있으면 1 개의 텍스처 셰이더를 생성하고, 2 개의 텍스처 셰이더를 생성하는 등의 작업을 수행합니다. 이는 14 개의 텍스처 셰이더를 사용하고 13 개의 텍스처를 끄려고하는 것보다 GPU에서 훨씬 더 효율적입니다.
예:
// note, I'm not recommending this shader, only showing some code
// that generates a shader
function generateShaderSrc(numTextures) {
return `
// shader for ${numTextures} textures
precision mediump float;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
uniform sampler2D uSampler[${numTextures}];
uniform float uMixAmount[${numTextures}];
void main() {
vec4 color = vec4(0);
for (int i = 0; i < ${numTextures}; ++i) {
vec4 texColor = texture2D(uSampler[i], vTextureCoord);
color = mix(color, texColor, uMixAmount[i]);
}
gl_FragColor = color;
}
`;
}
log(generateShaderSrc(1));
log(generateShaderSrc(4));
function log(...args) {
const elem = document.createElement("pre");
elem.textContent = [...args].join(' ');
document.body.appendChild(elem);
}아주 간단한 예입니다. 실제 셰이더 생성기는 종종 훨씬 더 많은 문자열 조작을 수행합니다.
또한 WebGL 1.0은 8 개의 텍스처 단위 만 지원해야합니다. webglstats에 따르면 약 15 %의 장치가 8 개의 텍스처 단위 만 지원 하므로 사용자가 얼마나 많은 텍스처 단위를 가지고 있는지 확인하고 앱이 필요한 것보다 적 으면 앱이 작동하지 않을 것이라고 경고하고 싶을 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다