Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Slideshow: Use RenderContextGl for LayerRendererGl #10169

Merged
merged 1 commit into from
Oct 8, 2024
Merged

Slideshow: Use RenderContextGl for LayerRendererGl #10169

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Slideshow: Use RenderContextGl for LayerRendererGl 
Refactored LayerRendererGl to utilize RenderContextGl, replacing repeated functions to reduce code duplication and improve maintainability.

Signed-off-by: codewithvk <[email protected]>
Change-Id: I929ca8bb65897e98a10b4efa92c068a257cd9e16
  • Loading branch information
@codewithvk
codewithvk committed Oct 4, 2024
commit 9a558abd60448af4d314bff3aae11a8252a13c5d
85 changes: 12 additions & 73 deletions browser/src/slideshow/LayerRenderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ class LayerRendererGl implements LayerRenderer {
];

private offscreenCanvas: OffscreenCanvas;
private glContext: RenderContextGl;
private gl: WebGLRenderingContext;
private program: WebGLProgram;
private positionBuffer: WebGLBuffer;
Expand All @@ -47,10 +48,8 @@ class LayerRendererGl implements LayerRenderer {

constructor(offscreenCanvas: OffscreenCanvas) {
this.offscreenCanvas = offscreenCanvas;
this.gl = this.offscreenCanvas.getContext('webgl');
if (!this.gl) {
throw new Error('WebGL not supported');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please leave this exception, I think we need that for detecting when to use 2d fallback

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice point

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@eszkadev I have tested, It works fine without it as we already throwing error from RenderContextGl constructor so we don't need to worry about it :)

}
this.glContext = new RenderContextGl(this.offscreenCanvas);
this.gl = this.glContext.getGl();
this.initializeWebGL();
}

Expand Down Expand Up @@ -87,20 +86,16 @@ class LayerRendererGl implements LayerRenderer {
private initializeWebGL() {
const gl = this.gl;

// Compile shaders
const vertexShader = this.createShader(
gl,
gl.VERTEX_SHADER,
// Compile shaders using RenderContextGl
const vertexShader = this.glContext.createVertexShader(
this.vertexShaderSource,
);
const fragmentShader = this.createShader(
gl,
gl.FRAGMENT_SHADER,
const fragmentShader = this.glContext.createFragmentShader(
this.fragmentShaderSource,
);

// Link program
this.program = this.createProgram(gl, vertexShader, fragmentShader);
// Link program using RenderContextGl
this.program = this.glContext.createProgram(vertexShader, fragmentShader);

// Get attribute and uniform locations
this.positionLocation = gl.getAttribLocation(this.program, 'a_position');
Expand Down Expand Up @@ -151,64 +146,6 @@ class LayerRendererGl implements LayerRenderer {
gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
}

private loadTexture(
gl: WebGLRenderingContext,
imageInfo: HTMLImageElement | ImageBitmap,
): WebGLTexture {
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

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.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

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

return texture;
}

private createShader(
gl: WebGLRenderingContext,
type: number,
source: string,
): WebGLShader {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
const info = gl.getShaderInfoLog(shader);
console.error('Could not compile WebGL shader.' + info);
gl.deleteShader(shader);
throw new Error('Shader compilation failed');
}
return shader;
}

private createProgram(
gl: WebGLRenderingContext,
vertexShader: WebGLShader,
fragmentShader: WebGLShader,
): WebGLProgram {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
const info = gl.getProgramInfoLog(program);
console.error('Could not link WebGL program.' + info);
gl.deleteProgram(program);
throw new Error('Program linking failed');
}
return program;
}

clearCanvas(): void {
const gl = this.gl;
gl.clearColor(1.0, 1.0, 1.0, 1.0); // Clear to white
Expand Down Expand Up @@ -248,9 +185,11 @@ class LayerRendererGl implements LayerRenderer {
// console.debug(`LayerDrawing.drawBitmap: cache hit: key: ${textureKey}`);
} else {
if (imageInfo instanceof ImageBitmap) {
texture = this.loadTexture(this.gl, imageInfo);
texture = this.glContext.loadTexture(imageInfo);
} else {
texture = this.loadTexture(this.gl, imageInfo.data as HTMLImageElement);
texture = this.glContext.loadTexture(
imageInfo.data as HTMLImageElement,
);
}
this.textureCache.set(textureKey, texture);
}
Expand Down
Loading