webgl系列——绘制猫-6ren

webgl系列——绘制猫

转载作者：我是一只小鸟更新时间：2023-03-20 22:31:49

其他章节请看:

webgl 系列。

绘制猫

上文我们了解了如何绘制渐变彩色三角形，明白了图形装配、光栅化，以及片元着色器计算片元的颜色.

现在如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了.

这时可以使用三维图形学中的纹理映射技术来解决这个问题.

纹理映射简单来讲就是将一张图映射（贴）到一个几何图形的表面.

例如这样:

本篇最后将实现如下效果:

渐变矩形

根据渐变三角形，我们很容易就可以绘制一个渐变矩形。就像这样:

完整代码如下:

                        
                          const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
  gl_Position = a_Position;
  v_uv = a_uv;
}
`
const FSHADER_SOURCE = `
precision mediump float;
varying vec2 v_uv;
void main() {
  gl_FragColor = vec4(v_uv, 0.0, 1.0);
}
`

function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext("webgl");
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    gl.clearColor(0.0, 0.5, 0.5, 1.0);


    // 几何图形的4个顶点的坐标
    const positions = new Float32Array([
        // 左下角是第一个点，逆时针
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
        -0.5, 0.5,
    ])

    // 纹理的4个点的坐标。通常称为 uv（u类似x，v类似y） 坐标
    const uvs = new Float32Array([
        // 左下角是第一个点，逆时针，与顶点坐标保持对应
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    ])

    initVertexBuffers(gl, positions)

    initUvBuffers(gl, uvs)

    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);

}

function initVertexBuffers(gl, positions) {
    const vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('创建缓冲区对象失败');
        return -1;
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return -1;
    }

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(a_Position);
}

function initUvBuffers(gl, uvs) {
    const uvsBuffer = gl.createBuffer();
    if (!uvsBuffer) {
        console.log('创建 uvs 缓冲区对象失败');
        return -1;
    }
    gl.bindBuffer(gl.ARRAY_BUFFER, uvsBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);
    const a_uv = gl.getAttribLocation(gl.program, 'a_uv');
    if (a_uv < 0) {
        console.log('Failed to get the storage location of a_uv');
        return -1;
    }

    gl.vertexAttribPointer(a_uv, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(a_uv);
}

渐变矩形从左下角，逆时针，依次是黑、红、黄、绿。与这段代码是匹配的:

                        
                          // 几何图形的4个顶点的坐标
const positions = new Float32Array([
    // 左下角是第一个点，逆时针
    -0.5, -0.5,
    0.5, -0.5,
    0.5, 0.5,
    -0.5, 0.5,
])

const uvs = new Float32Array([
    // 左下角是第一个点，逆时针，与顶点坐标保持对应
    0.0, 0.0, // 黑
    1.0, 0.0, // 红
    1.0, 1.0, // 黄
    0.0, 1.0, // 绿
])

这里的 uvs 涉及纹理（贴图）坐标，是为贴图做准备.

Tip : 接下来只需要把矩形中每个像素的颜色换成纹理对应像素的颜色即可.

纹理坐标

对于贴图，几何图形就得获取纹理对应像素的颜色，得有一个映射关系，否则获取哪个像素的颜色。坐标对应关系如下:

纹理坐标如下:

                        
                          // 左下角，逆时针
0.0 0.0 // 左下角
1.0 0.0 // 右下角
1.0 1.0 // 右上角
0.0 1.0 // 左上角

渐变矩形我们所做的工作就是将纹理的范围和几何图形对应上.

为了区分其他坐标，这里纹理坐标不叫 (x, y)，通常叫 (u, v) 或 (s, t).

Tip ：照片尺寸和纹理坐标是没有关系的。无论图片多大，右下角都是 (1.0, 0.0) 。假如一张 1024*256 的图片放入 256*256 的几何图形中，贴图的宽度就会被压缩。就像这样:

绘制猫

效果

思路

通过 new Image 定义图片，图片加载完成后创建纹理
纹理的使用类似缓冲对象，有一系列规则
在将纹理传给片元着色器中定义的取样器 u_Sampler（好像图片的句柄）
最后通过 texture2D(u_Sampler, v_uv) 取得纹理像素的颜色

完整代码

                        
                          const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
  gl_Position = a_Position;
  v_uv = a_uv;
}
`
const FSHADER_SOURCE = `
precision mediump float;
// 定义一个取样器。sampler2D 是一种数据类型，就像 vec2
uniform sampler2D u_Sampler;
varying vec2 v_uv;
void main() {
  // texture2D(sampler2D sampler, vec2 coord) - 着色器语言内置函数，从 sampler 指定的纹理上获取 coord 指定的纹理坐标处的像素
  vec4 color = texture2D(u_Sampler, v_uv);
  gl_FragColor = color;
}
`

function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext("webgl");
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    gl.clearColor(0.0, 0.5, 0.5, 1.0);

    // 几何图形的4个顶点的坐标
    const verticesOfPosition = new Float32Array([
        // 左下角是第一个点，逆时针
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
        -0.5, 0.5,
    ])

    // 纹理的4个点的坐标
    const uvs = new Float32Array([
        // 左下角是第一个点，逆时针，与顶点坐标保持对应
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    ])

    // 和渐变矩形相同
    initVertexBuffers(gl, verticesOfPosition)

    // 和渐变矩形相同
    initUvBuffers(gl, uvs)

    initTextures(gl)
}

// 初始化纹理。之所以为复数 s 是因为可以贴多张图片。
function initTextures(gl) {
    // 定义图片
    const img = new Image();
    // 请求 CORS 许可。解决图片跨域问题
    img.crossOrigin = "";
    // The image element contains cross-origin data, and may not be loaded.
    img.src = "http://placekitten.com/256/256";

    img.onload = () => {
        // 创建纹理
        const texture = gl.createTexture();

        // 取得取样器
        const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
        if (!u_Sampler) {
            console.log('Failed to get the storage location of u_Sampler');
            return false;
        }
        // pixelStorei - 图像预处理:图片上下对称翻转坐标轴 (图片本身不变)
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        // 激活纹理单元
        gl.activeTexture(gl.TEXTURE0);
        // 绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);
        // 配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        // 纹理图片分配给纹理对象
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        // 将纹理单元传给片元着色器
        gl.uniform1i(u_Sampler, 0);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    }
}

Tip : 为了方便演示，这里通过 http://placekitten.com/256/256 返回一个指定尺寸猫（256*256）的图片。需要解决图片跨域问题，详情请看这里。

图像 Y 轴反转

pixelStorei - 用于图像预处理的函数。

假如注释 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 图片就会反过来。就像这样:

原因是 canvas 坐标中的 y 是向下，而纹理的 y(v) 是向上:

激活纹理单元

webgl 通过纹理单元的机制同时使用多个纹理。每个纹理单元有个编号来管理一张纹理图片.

根据硬件和浏览器对webgl的实现，webgl 至少支持8个纹理单元，有的更多.

内置变量 gl.TEXTURE0 、 gl.TEXTURE1 ... gl.TEXTURE7 各表示一个纹理单元。

activeTexture - 用来激活指定的纹理单元。例如激活一个纹理单元:

绑定纹理对象

gl. bindTexture (target, texture) - 指定纹理对象类型，将其绑定到纹理单元。就像这样:

target 指纹理对象的类型（我们这里就使用二维纹理）:

gl.TEXTURE_2D: 二维纹理
gl.TEXTURE_CUBE_MAP: 立方体映射纹理

在 webgl 中不能直接操作纹理对象，必须将其绑定到纹理单元上，在通过纹理单元来操作.

图片分配给纹理对象

执行完 gl. texImage2D (gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img) 后，图片将分配给纹理对象。就像这样:

这行代码参数很多，最主要的就是最后一个参数，即图片.

Tip ：texImage2D 语法如下:

                        
                          gl.texImage2D(target, level, internalformat, format, type, HTMLImageElement? pixels)：
    - target - gl.TEXTURE_2D `二维纹理` 或 gl.TEXTURE_CUBE_MAP 立方体映射纹理
    - level - 传入 0（该参数为金字塔纹理准备，这里不是）
    - internalformat - 图像的内部格式，这里是 RBG
    - format - 纹理的数据格式，必须与 internalformat 相同
    - type - 纹理数据类型
    - HTMLImageElement - 图片

纹理单元传给片元着色器

前面已经将贴图放入纹理对象，执行 gl. uniform1i (u_Sampler, 0) 就会将纹理单元传给片元着色器。效果如下:

设置纹理参数

gl. texParameteri 用于设置纹理参数。

语法:

                        
                          gl.texParameterf(GLenum target, GLenum pname, GLfloat param)

target
    gl.TEXTURE_2D: 二维纹理。
    gl.TEXTURE_CUBE_MAP: 立方体纹理。

pname
    gl.TEXTURE_MAG_FILTER 纹理放大滤波器    gl.LINEAR (默认值), gl.NEAREST.
    gl.TEXTURE_MIN_FILTER 纹理缩小滤波器 
    gl.TEXTURE_WRAP_S     纹理坐标水平填充  gl.REPEAT (默认值),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.
    gl.TEXTURE_WRAP_T     纹理坐标垂直填充  gl.REPEAT (默认值),gl.CLAMP_TO_EDGE, gl.MIRRORED_REPEAT.

在绘制猫时我们进行了如下设置:

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

我们的贴图是二维的，所以选用 TEXTURE_2D.

TEXTURE_MAG_FILTER 放大纹理。例如将尺寸 16 16 的图片贴到 32 32 的几何图形上，就得无中生有。无中生有，LINEAR 表示距离新像素最近的4个像素颜色的加权平均，比 NEAREST（最近的）运算量大，但质量更好。

只贴部分

需求：将图片贴到几何图形左下角部分.

可以通过放大纹理坐标。就像这样:

修改代码如下:

                        
                          // 将 1.0 统统变成 2.0，就好像图片变小了一倍
const uvs = new Float32Array([
    0.0, 0.0,
    2.0, 0.0,
    2.0, 2.0,
    0.0, 2.0
])

效果确是这样:

这是因为 TEXTURE_WRAP_S 和 TEXTURE_WRAP_T 默认值是 REPEAT.

增加如下代码:

                        
                          // 水平方向 CLAMP_TO_EDGE 重复边缘那条线的像素
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
// 垂直方向 MIRRORED_REPEAT 反光镜重复
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);

效果如下:

多幅纹理

这里我们实现多幅纹理的效果。首先准备一张 256*256 的图片，就像画猫一样，这里先显示第二张纹理

                        
                          const FSHADER_SOURCE = `
precision mediump float;
uniform sampler2D u_Sampler;
uniform sampler2D u_Sampler2;
varying vec2 v_uv;
void main() {
  vec4 color = texture2D(u_Sampler, v_uv);
  vec4 color2 = texture2D(u_Sampler2, v_uv);
  // 只显示第二张贴图
  gl_FragColor = color2;
}
`

function main() {
    // ...

    // 纹理的4个点的坐标
    const uvs = new Float32Array([
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    ])
    // 不变
    initVertexBuffers(gl, verticesOfPosition)
    // 不变
    initUvBuffers(gl, uvs)
    // 不变
    initTextures(gl)

    initMaskTextures(gl)
}

// 初始化蒙版纹理
function initMaskTextures(gl) {
    const img = new Image();
    img.src = "./mask.png";

    img.onload = () => {
        const texture = gl.createTexture();

        const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler2');
        if (!u_Sampler) {
            console.log('Failed to get the storage location of u_Sampler');
            return false;
        }
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        // 第二个纹理单元
        gl.activeTexture(gl.TEXTURE1);
        gl.bindTexture(gl.TEXTURE_2D, texture);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        // 第二个纹理单元
        gl.uniform1i(u_Sampler, 1);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    }
}

效果如下:

注：假如将 mask.png 从 256 256 改成 400 400 ，图片将不能显示。因为WebGL限制了纹理的维度必须是 2的整数次幂， 2 的幂有 1, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 等等。更多细节请看这里。

接下来显示多幅纹理，主要涉及向量间的运算。修改如下代码:

                        
                          // 左图
// 向量相乘，(0,0,0) 是黑色，其他值和黑色相乘则是黑色，所中间还是黑色
gl_FragColor = color * color2;

// 右图
// `(vec4(1, 1, 1, 2) - color2)` 相当于取反
gl_FragColor = color * (vec4(1, 1, 1, 2) - color2);

效果如下:

完整代码

                        
                          const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec2 a_uv;
varying vec2 v_uv;
void main() {
  gl_Position = a_Position;
  v_uv = a_uv;
}
`
const FSHADER_SOURCE = `
precision mediump float;
// 定义一个取样器。sampler2D 是一种数据类型，就像 vec2
uniform sampler2D u_Sampler;
uniform sampler2D u_Sampler2;
varying vec2 v_uv;
void main() {
  // texture2D(sampler2D sampler, vec2 coord) - 着色器语言内置函数，从 sampler 指定的纹理上获取 coord 指定的纹理坐标处的像素
  vec4 color = texture2D(u_Sampler, v_uv);
  vec4 color2 = texture2D(u_Sampler2, v_uv);
  gl_FragColor = color * color2;
}
`

function main() {
    const canvas = document.getElementById('webgl');
    const gl = canvas.getContext("webgl");
    if (!gl) {
        console.log('Failed to get the rendering context for WebGL');
        return;
    }

    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        console.log('Failed to intialize shaders.');
        return;
    }

    gl.clearColor(0.0, 0.5, 0.5, 1.0);

    // 几何图形的4个顶点的坐标
    const verticesOfPosition = new Float32Array([
        // 左下角是第一个点，逆时针
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
        -0.5, 0.5,
    ])

    // 纹理的4个点的坐标
    const uvs = new Float32Array([
        // 左下角是第一个点，逆时针，与顶点坐标保持对应
        0.0, 0.0,
        1.0, 0.0,
        1.0, 1.0,
        0.0, 1.0
    ])

    initVertexBuffers(gl, verticesOfPosition)

    initUvBuffers(gl, uvs)

    initTextures(gl)
    initMaskTextures(gl)

}

// 初始化纹理。之所以为复数 s 是因为可以贴多张图片。
function initTextures(gl) {
    // 定义图片
    const img = new Image();
    // 请求 CORS 许可。解决图片跨域问题
    img.crossOrigin = "";
    // The image element contains cross-origin data, and may not be loaded.
    img.src = "http://placekitten.com/256/256";

    img.onload = () => {
        // 创建纹理
        const texture = gl.createTexture();

        // 取得取样器
        const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
        if (!u_Sampler) {
            console.log('Failed to get the storage location of u_Sampler');
            return false;
        }
        // pixelStorei - 图像预处理:图片上下对称翻转坐标轴 (图片本身不变)
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        // 激活纹理单元
        gl.activeTexture(gl.TEXTURE0);
        // 绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);
        // 配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
        // 纹理图片分配给纹理对象
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        // 将纹理单元传给片元着色器
        gl.uniform1i(u_Sampler, 0);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    }
}

// 初始化纹理。之所以为复数 s 是因为可以贴多张图片。
function initMaskTextures(gl) {
    const img = new Image();
    img.src = "./mask.png";
    // img.src = "./mask400_400.png";

    img.onload = () => {
        // 创建纹理
        const texture = gl.createTexture();

        // 取得取样器
        const u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler2');
        if (!u_Sampler) {
            console.log('Failed to get the storage location of u_Sampler');
            return false;
        }
        // pixelStorei - 图像预处理:图片上下对称翻转坐标轴 (图片本身不变)
        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
        // 激活纹理单元
        gl.activeTexture(gl.TEXTURE1);
        // 绑定纹理对象
        gl.bindTexture(gl.TEXTURE_2D, texture);
        // 配置纹理参数
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
        // 纹理图片分配给纹理对象
        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
        // 将纹理单元传给片元着色器
        gl.uniform1i(u_Sampler, 1);

        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
    }
}

function initVertexBuffers(gl, positions) {
    const vertexBuffer = gl.createBuffer();
    if (!vertexBuffer) {
        console.log('创建缓冲区对象失败');
        return -1;
    }

    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

    const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_Position < 0) {
        console.log('Failed to get the storage location of a_Position');
        return -1;
    }

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(a_Position);
}

function initUvBuffers(gl, uvs) {
    const uvsBuffer = gl.createBuffer();
    if (!uvsBuffer) {
        console.log('创建 uvs 缓冲区对象失败');
        return -1;
    }
    gl.bindBuffer(gl.ARRAY_BUFFER, uvsBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, uvs, gl.STATIC_DRAW);
    const a_uv = gl.getAttribLocation(gl.program, 'a_uv');
    if (a_uv < 0) {
        console.log('Failed to get the storage location of a_uv');
        return -1;
    }

    gl.vertexAttribPointer(a_uv, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(a_uv);
}

其他章节请看:

webgl 系列。

最后此篇关于webgl系列——绘制猫的文章就讲到这里了,如果你想了解更多关于webgl系列——绘制猫的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： Linux硬盘存储和文件系统介绍

文章推荐： UnityJoint用法及案例

文章推荐：基于深度学习的鸟类检测识别系统（含UI界面，Python代码）

文章推荐： python进阶：带你学习实时目标跟踪

webgl - "webgl"和 "experimental-webgl"的区别
一些网站说你应该通过以下方式初始化 webgl: var gl = c.getContext("webgl") || c.getContext("experimental-webgl"); if (!
webgl - 最大纹理数 WebGL
我一直在寻找有关 WebGL 的信息以及可以分配用于渲染的最大纹理数/内存量。这显然是特定于硬件/设备的，因此我正在寻找一种智能处理纹理的方法。我目前有 512x512 RGBA8 格式的纹理。一个
webgl - WebGL:异步操作？
我想知道是否可以利用WebGL进行任何异步调用？我研究了Spec v1和Spec v2，他们什么都没提及。在V2中，有一种WebGL查询机制，我认为这不是我想要的。在网络上进行搜索并没有确定的定义
webgl - WebGL 中超出缓冲区范围的常见原因是什么
我正在参与一个 webgl 项目。当我调用 gl.DrawElements 时，会显示错误“范围超出缓冲区范围”。我肯定确保我传递了正确的缓冲区长度或偏移量。但是，仍然显示错误。我认为有几个原因
webgl - WebGL 中的最大纹理数？
我知道 WebGL 中有 8 个纹理的限制。我的问题是，8 是全局限制还是每个着色器/程序明智的？如果它是每个着色器/程序明智的限制，这是否意味着，一旦我将纹理加载到一个着色器的制服上，我就可以开
webgl - WebGL 中透明纹理的奇怪渲染行为
我一直在使用 Haxe + Away3D 编写一个小型行星生成器，并将其部署到 HTML5/WebGL。但是在渲染云时我遇到了一个奇怪的问题。我有行星网格，然后云网格在相同位置稍大一些。我正在使用柏
webgl - 如何快速学习 WebGL？
关闭。这个问题是opinion-based 。目前不接受答案。想要改进这个问题吗？更新问题，以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
webgl - WebGL 如何在深度缓冲区中设置值？
在 OpenGL 中，深度缓冲区值是根据场景的近和远裁剪平面计算的。 (引用:Getting the true z value from the depth buffer) 这在 WebGL 中是如何
webgl - 我可以在 webgl 片段着色器中使用多少个纹理？
简单的问题，但我无法在任何地方的规范中找到答案。我可能在某处遗漏了明显的答案。我可以在 WebGL 片段着色器中同时使用多少个纹理？如果它是可变的，那么假设 PC 使用的合理数字是多少？ (对移动不
webgl - 使用 WebGL 渲染全屏四边形
我有一个渲染场景的帧缓冲区，现在我想将它渲染到“全屏”四边形。如何设置我的相机以及我应该在我的顶点着色器中放置什么以便将帧缓冲区的纹理渲染到整个屏幕。我试过像这样创建一个全屏四边形 var gl =
webgl - 在 WebGL 中绘制许多形状
我正在阅读 here 的教程。 var gl; function initGL() { // Get A WebGL context var canvas = document.getEle
webgl - 学习 WebGL 的最佳方式是什么
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the he
webgl - 在 WebGL 中调试
我正在学习 WebGL，我能感觉到我的速度很慢，因为我很难调试我的代码。是否有任何扩展或工具可以帮助我知道缓冲区、属性指针、矩阵等的值。我在谷歌上搜索并了解了 chrome 扩展程序 spector
webgl - 了解 WebGL 状态
我可以在某处找到任何文档来记录 WebGL 调用所需的先决条件吗？我已经对 WebGL 基础有了相当深入的了解，但现在我正在创建自己的“框架”，并且我正在更深入地了解。例如， enableVert
webgl - 我应该学习哪个 WebGL 框架？
关闭。这个问题是opinion-based .它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过 editing this post 用事实和引文回答问题. 7年前关闭。 Improve t
webgl - 从 webgl 中获取数据
我有兴趣在 webgl 中执行一些密集计算，所以它在 GPU 上运行。大多数文档都讨论了如何渲染图形。我正在完成非常简单的任务:对于给定的图像，将其转换为灰度，并找到局部最大值的坐标(比其邻居更亮
webgl - 如何修改此 WebGL 片段着色器以增加高光的亮度并减少
我目前在 WebGL 中使用这个片段着色器来对照片纹理应用高光/阴影调整。着色器本身是直接从优秀的 GPUImage 中拉出来的适用于 iOS 的库。 uniform sampler2D input
webgl - 如何在 webgl 中设置时间统一
我是 webgl 的新手。我正在尝试设置时间统一，因此我可以随着时间的推移更改片段着色器的输出。我认为这实现起来相当简单，但我正在努力。我知道这两种方法可能涉及: https://developer.
webgl - 是否可以在同一页面上有两个 WebGL 上下文？
我正在尝试使用两个 Canvas 并排绘制相同的 WebGL 场景。是否可以？到目前为止，我还没有走运。思路如下: 我加载几何我设置了两个gl上下文，每幅 Canvas 一个我调用 drawEl
webgl - 在 WebGL 中渲染球体时遇到问题
我正在学习 WebGL 并尝试显示一个球体。没有纹理，只有每个顶点着色，但我在 Opera 和 Chrome 中收到以下错误消息:“[.WebGLRenderingContext]GL 错误:GL_I

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城