import { SceneOption, Scene, SCENE } from '../gl-renderer/types'
import Texture from '../texture'
// 目前没有额外配置项，先预留配置项类型，方便后续扩展
export type WebcodecNormalSceneOption = SceneOption<object>
/**
* @description: 顶点着色器
* @return {*}
*/
export const vertexShaderSource = `
attribute vec2 xy;
uniform vec2 scale;
uniform vec2 translate;
varying highp vec2 uv;
void main(void) {
vec2 scaledPosition = xy * scale+ translate;
gl_Position = vec4(scaledPosition, 0.0, 1.0);
// Map vertex coordinates (-1 to +1) to UV coordinates (0 to 1).
// UV coordinates are Y-flipped relative to vertex coordinates.
uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0);
}
`
/**
* @description: 片元着色器
* @return {*}
*/
export const fragmentShaderSource = `
varying highp vec2 uv;
uniform sampler2D texture;
void main(void) {
gl_FragColor = texture2D(texture, uv);
}
`
export class WebcodecNormalScene extends Scene {
static sceneType = SCENE.WEBCODEC_NORMAL
vertexShaderSource = vertexShaderSource
fragmentShaderSource = fragmentShaderSource
gl!: WebGLRenderingContext
program!: WebGLProgram
options!: WebcodecNormalSceneOption
yTexture!: Texture
uTexture!: Texture
vTexture!: Texture
get sceneType() {
return WebcodecNormalScene.sceneType
}
private applyOptions(sceneGl: WebGLRenderingContext, sceneProgram: WebGLProgram, sceneOption: WebcodecNormalSceneOption) {
this.gl = sceneGl
this.program = sceneProgram
this.options = sceneOption
}
public initializer(sceneGl: WebGLRenderingContext, sceneProgram: WebGLProgram, sceneOption: WebcodecNormalSceneOption) {
this.applyOptions(sceneGl, sceneProgram, sceneOption)
const gl = this.gl
const shaderProgram = this.program
const vertexBuffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0]), gl.STATIC_DRAW)
const xyLocation = gl.getAttribLocation(shaderProgram, 'xy')
gl.vertexAttribPointer(xyLocation, 2, gl.FLOAT, false, 0, 0)
gl.enableVertexAttribArray(xyLocation)
const scaleLocation = gl.getUniformLocation(shaderProgram, 'scale')
const scaleFactor = [1, 1] // 缩放因子为 1.5x
gl.uniform2fv(scaleLocation, scaleFactor)
const translateLocation = gl.getUniformLocation(shaderProgram, 'translate')
const translateFactor = [0, 0] // 平移因子为 0，0
gl.uniform2fv(translateLocation, translateFactor)
//纹理
const texture = gl.createTexture()
const enableMipMap = this.options.isAntialias ? gl.LINEAR_MIPMAP_LINEAR : gl.LINEAR
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, enableMipMap)
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)
}
public render(frameData: VideoFrame) {
const gl = this.gl
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frameData)
this.options.isAntialias && gl.generateMipmap(gl.TEXTURE_2D)
// Configure and clear the drawing area.
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight)
gl.clearColor(0.0, 0.0, 0.0, 0.0)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.drawArrays(gl.TRIANGLE_FAN, 0, 4)
}
public clear() {
const gl = this.gl
gl.clearColor(0.0, 0.0, 0.0, 0.0)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.getExtension('WEBGL_lose_context')?.loseContext()
}
}
结合这段代码说一下优化的方式
最新发布
本文介绍了OpenGL中纹理过滤的两种模式——GL_TEXTURE_MIN_FILTER和GL_TEXTURE_MAG_FILTER的使用，包括其取值和默认设置。GL_TEXTURE_MIN_FILTER用于控制纹理缩小时的过滤方式，而GL_TEXTURE_MAG_FILTER则决定了纹理放大的效果。GL_NEAREST产生更锐利的边缘但速度较快，GL_LINEAR则提供更平滑的过渡但计算量稍大。示例代码展示了如何设置这两种过滤方式为GL_LINEAR。
扫一扫
2939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
