ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

WebGL Postprocess / fix viewport computation with pixelratio != 1

Browse Source
This commit is contained in:
Olivier Guyot
2019-12-12 17:23:46 +01:00
parent ca0ce4986d
commit cae32edb02
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ol/webgl/PostProcessingPass.js
+12 -10
View File
@@ -174,17 +174,19 @@ class WebGLPostProcessingPass {
*/ */
init(frameState) { init(frameState) {
const gl = this.getGL(); const gl = this.getGL();
const canvas = gl.canvas; const textureSize = [
const size = frameState.size; gl.drawingBufferWidth * this.scaleRatio_,
gl.drawingBufferHeight * this.scaleRatio_
];
// rendering goes to my buffer // rendering goes to my buffer
gl.bindFramebuffer(gl.FRAMEBUFFER, this.getFrameBuffer()); gl.bindFramebuffer(gl.FRAMEBUFFER, this.getFrameBuffer());
gl.viewport(0, 0, canvas.width * this.scaleRatio_, canvas.height * this.scaleRatio_); gl.viewport(0, 0, textureSize[0], textureSize[1]);
// if size has changed: adjust canvas & render target texture // if size has changed: adjust canvas & render target texture
if (!this.renderTargetTextureSize_ || if (!this.renderTargetTextureSize_ ||
this.renderTargetTextureSize_[0] !== size[0] || this.renderTargetTextureSize_[1] !== size[1]) { this.renderTargetTextureSize_[0] !== textureSize[0] || this.renderTargetTextureSize_[1] !== textureSize[1]) {
this.renderTargetTextureSize_ = size; this.renderTargetTextureSize_ = textureSize;
// create a new texture // create a new texture
const level = 0; const level = 0;
@@ -195,8 +197,8 @@ class WebGLPostProcessingPass {
const data = null; const data = null;
gl.bindTexture(gl.TEXTURE_2D, this.renderTargetTexture_); gl.bindTexture(gl.TEXTURE_2D, this.renderTargetTexture_);
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
canvas.width * this.scaleRatio_, canvas.height * this.scaleRatio_, border, textureSize[0], textureSize[1],
format, type, data); border, format, type, data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
@@ -215,7 +217,7 @@ class WebGLPostProcessingPass {
*/ */
apply(frameState, nextPass) { apply(frameState, nextPass) {
const gl = this.getGL(); const gl = this.getGL();
const canvas = gl.canvas; const size = frameState.size;
gl.bindFramebuffer(gl.FRAMEBUFFER, nextPass ? nextPass.getFrameBuffer() : null); gl.bindFramebuffer(gl.FRAMEBUFFER, nextPass ? nextPass.getFrameBuffer() : null);
gl.activeTexture(gl.TEXTURE0); gl.activeTexture(gl.TEXTURE0);
@@ -226,14 +228,14 @@ class WebGLPostProcessingPass {
gl.clear(gl.COLOR_BUFFER_BIT); gl.clear(gl.COLOR_BUFFER_BIT);
gl.enable(gl.BLEND); gl.enable(gl.BLEND);
gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA); gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
gl.viewport(0, 0, canvas.width, canvas.height); gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.bindBuffer(gl.ARRAY_BUFFER, this.renderTargetVerticesBuffer_); gl.bindBuffer(gl.ARRAY_BUFFER, this.renderTargetVerticesBuffer_);
gl.useProgram(this.renderTargetProgram_); gl.useProgram(this.renderTargetProgram_);
gl.enableVertexAttribArray(this.renderTargetAttribLocation_); gl.enableVertexAttribArray(this.renderTargetAttribLocation_);
gl.vertexAttribPointer(this.renderTargetAttribLocation_, 2, gl.FLOAT, false, 0, 0); gl.vertexAttribPointer(this.renderTargetAttribLocation_, 2, gl.FLOAT, false, 0, 0);
gl.uniform2f(this.renderTargetUniformLocation_, canvas.width, canvas.height); gl.uniform2f(this.renderTargetUniformLocation_, size[0], size[1]);
gl.uniform1i(this.renderTargetTextureLocation_, 0); gl.uniform1i(this.renderTargetTextureLocation_, 0);
this.applyUniforms(frameState); this.applyUniforms(frameState);