Webgl에서 텍스트 텍스처 생성 : 알파가 불투명합니다.

Question

텍스트가 포함 된 캔버스에서 텍스처를 생성 중이지만 텍스처를 렌더링 할 때 텍스트의 투명한 부분이 완전히 무시된다는 문제가 있습니다. 내가 텍스처를 렌더링 할 때

는 그것이 바닥 텍스트 같아야 맨 위 텍스트처럼 보인다.

이 나는 ​​질감 생성하는 방법입니다

canvas.width = textRendBuffC.measureText(text).width*2; 
canvas.height = parseInt(fontStyle, 10)*1.5; 
c.clearRect(0, 0, canvas.width, canvas.height); 
c.font = fontStyle; 
c.fillStyle = colorStyle; 
c.fillText(text, 0, parseInt(fontStyle, 10)); 


var canvasTexture = gl.createTexture(); 

gl.bindTexture(gl.TEXTURE_2D, canvasTexture); 
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,true); 

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas); 

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,gl.NEAREST); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
gl.bindTexture(gl.TEXTURE_2D,null); 

을 그리고 이것은 내가 질감 그리는 방법은 다음과 같습니다

gl.bindBuffer(gl.ARRAY_BUFFER, spritePlan.vertBuffer); 
gl.vertexAttribPointer(currentShader.sh.vertexAttribLocation, spritePlan.vertBuffer.itemSize, gl.FLOAT, false, 0, 0); 
gl.bindBuffer(gl.ARRAY_BUFFER, spritePlan.texCoordBuffer); 
gl.vertexAttribPointer(currentShader.sh.textureCoordAttribute, spritePlan.texCoordBuffer.itemSize, gl.FLOAT, false, 0, 0); 
gl.bindBuffer(gl.ARRAY_BUFFER, spritePlan.colorBuffer); 
gl.vertexAttribPointer(currentShader.sh.colorAttribLocation, spritePlan.colorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

gl.activeTexture(gl.TEXTURE0); 
gl.bindTexture(gl.TEXTURE_2D, tex); 
gl.uniform1i(currentShader.sh.sampler2DUniform, 0); 

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, spritePlan.indexBuffer); 
setMatrixUniforms(); 

gl.drawElements(gl.TRIANGLES, spritePlan.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0); 
gl.bindTexture(gl.TEXTURE_2D, null); 
gl.bindBuffer(gl.ARRAY_BUFFER, null); 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 

을 그리고 이것은 조각 쉐이더가 통과하는 코드입니다 :

vec4 tex = texture2D(sampler2DUniform, vTextureCoord); 
gl_FragColor = vec4(tex.rgb, tex.a); 

아이디어가 있으십니까?

Answer 1

UNPACK_PREMULTIPLY_ALPHA_WEBGL 매개 변수를 true (pixelStorei)으로 설정해야합니다. 이는 컬러 채널 알파 채널 승산되게되며, 초기 값은 false이다

gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true); 

는 WebGL Fundamentals - textures 참조 :

는

이 gl.texImage2D 및 gl.texSubImage2D에 미리 곱셈 된 알파 값을 제공 WebGL을 말한다. gl.texImage2D에 전달 된 데이터가 캔버스 2D 데이터의 경우와 같이 미리 곱셈 된 경우 WebGL이이를 전달할 수 있습니다.

참조 크로노스 사양 Premultiplied Alpha, Canvas APIs and texImage2D :

전달 캔버스 premultipliedAlpha 콘텍스트 생성 파라미터의 설정 및 UNPACK_PREMULTIPLY_ALPHA_WEBGL 화소 저장소 파라미터에 따라 그리고, texImage2D의 API에 WebGL이 렌더링 캔버스 전달 목적지 WebGL 컨텍스트의 경우 픽셀 데이터를 미리 곱한 형식으로 또는 미리 곱한 형식에서 변경해야 할 수 있습니다.

또한, 당신은 NEAREST과 텍스처 있었던 파라미터 TEXTURE_MAG_FILTER을 설정 :

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,gl.NEAREST); 

Sampler Object에 대한 크로노스의 OpenGL 참조하십시오 :

배율 필터가 GL_TEXTURE_MAG_FILTER 질감에 의해 제어된다 매개 변수. 이 값은 GL_LINEAR 또는 GL_NEAREST이 될 수 있습니다. GL_NEAREST이 사용되면 (자), 구현은 텍스처 좌표에 가장 가까운 텍셀을 선택합니다. 이를 일반적으로 "포인트 샘플링"이라고합니다. GL_LINEAR이 사용되면, 구현은 가장 인접한 샘플 사이의 가중 선형 혼합을 수행합니다.

즉, NEAREST을 사용하면 텍스처 좌표에 따라 텍스처에서 가장 가까운 텍셀을 읽습니다.이것은 단단하고 각진 모양을 만듭니다.
텍스처 매개 변수 TEXTURE_MAG_FILTER을 LINEAR으로 설정하면 텍셀이 보간되고 주어진 좌표를 둘러싼 4 픽셀의 가중치 평균이 계산됩니다. 또한

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER,gl.LINEAR); 

참조 : 모든

• WebGL 3D - Textures
• Textures objects and parameters

Answer 2

첫째, WebGL을 투명성으로 알파를 사용하는 당신이이 결과는 매끄러운 외관입니다 올바른 혼합 방정식으로 블렌딩을 활성화하십시오. 전형적인 하나입니다

gl.enable(gl.BLEND); 
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 

내가 코드에서 혼합에 관련된 아무것도 볼 수, 당신은 무엇을 혼합 식 사용 않는 다른 곳으로 설정 했습니까?