WebGL之旅（四）简单变换

最新推荐文章于 2023-07-06 16:22:48 发布
最新推荐文章于 2023-07-06 16:22:48 发布
阅读量1.8k 收藏 2
点赞数 2
CC 4.0 BY-SA版权
分类专栏： WebGL 文章标签： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xufeng0991/article/details/75332403
本文详细介绍WebGL中的基本变换操作，包括平移、旋转和缩放，并通过实例代码演示了如何利用矩阵来实现这些变换。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

变换又叫仿射变换，包括平移，缩放，旋转。

一 变换前

首先，我们绘制一个三角形，后续将对其进行变换，代码：

/**
 * 变换前
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
void main(){
    gl_Position = a_Position;// gl_Position 内置变量，表示点的位置，必须赋值
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);// gl_FragColor 内置变量，表示片元颜色，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器
    var n = initVertexBuffers(gl);// 初始化顶点

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        0, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
    ]);

    var vertexBuffer = gl.createBuffer();// 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将缓冲区对象绑定到目标
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 向缓冲区中写入数据

    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 将缓冲区对象分配给a_Position
    gl.enableVertexAttribArray(a_Position);// 链接a_Position与分配给他的缓冲区对象

    return vertices.length / 2;
}

如图：

这里写图片描述

二 平移变换

平移是指将所有顶点的分量按照某个向量分量进行移动。下面是将上面的三角形沿向量（0.5, 0.5, 0.0）移动的示例。

/**
 * 平移变换
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
uniform vec4 u_Translation;// 平移向量
void main(){
    gl_Position = a_Position + u_Translation;// gl_Position 内置变量，表示点的位置，必须赋值
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);// gl_FragColor 内置变量，表示片元颜色，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器
    var n = initVertexBuffers(gl);// 初始化顶点

    var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation');// 获取u_Translation变量
    // 将u_Translation变量的值设置为(0.5, 0.5, 0.0, 0.0)，最后一个分量为0.0
    // 其次坐标最后一个分量为0.0时，前三个分量表示一个三维坐标点
    // a_Position的最后一个分量会默认设置为1.0，为了使相加之后仍然表示一个点，所以最后一个分量置为0.0
    gl.uniform4f(u_Translation, 0.5, 0.5, 0.0, 0.0);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        0, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
    ]);

    var vertexBuffer = gl.createBuffer();// 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将缓冲区对象绑定到目标
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 向缓冲区中写入数据

    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 将缓冲区对象分配给a_Position
    gl.enableVertexAttribArray(a_Position);// 链接a_Position与分配给他的缓冲区对象

    return vertices.length / 2;
}

平移之后如图：

这里写图片描述

三 旋转

旋转比移动复杂一点，需要三个变量才能表示：

  1. 旋转轴
  2. 旋转方向（右手法则旋转：右手握拳，大拇指指向旋转轴正向，其余手指指向旋转的正方向）
  3. 旋转角度

计算原理可以参考我之前的这篇博客。

且看示例：

/**
 * 旋转变换
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
uniform float u_Sin, u_Cos;// 旋转角的正余弦值
void main(){
    gl_Position.x = a_Position.x * u_Cos - a_Position.y * u_Sin;
    gl_Position.y = a_Position.x * u_Sin + a_Position.y * u_Cos;
    gl_Position.z = a_Position.z;
    gl_Position.w = 1.0;
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);// gl_FragColor 内置变量，表示片元颜色，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器
    var n = initVertexBuffers(gl);// 初始化顶点

    var rad = Math.PI * 0.5;// 旋转角90度
    var u_Sin = gl.getUniformLocation(gl.program, 'u_Sin');
    gl.uniform1f(u_Sin, Math.sin(rad));

    var u_Cos = gl.getUniformLocation(gl.program, 'u_Cos');
    gl.uniform1f(u_Cos, Math.cos(rad));

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        0, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
    ]);

    var vertexBuffer = gl.createBuffer();// 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将缓冲区对象绑定到目标
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 向缓冲区中写入数据

    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 将缓冲区对象分配给a_Position
    gl.enableVertexAttribArray(a_Position);// 链接a_Position与分配给他的缓冲区对象

    return vertices.length / 2;
}

结果如图：

这里写图片描述

四 缩放

缩放比较简单，将顶点的每个分乘以一个缩放因子即可。

代码：

/**
 * 伸缩变换
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
uniform float u_Rate;// 旋转角的正余弦值
void main(){
    gl_Position.x = a_Position.x * u_Rate;
    gl_Position.y = a_Position.y * u_Rate;
    gl_Position.z = a_Position.z * u_Rate;
    gl_Position.w = 1.0;
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);// gl_FragColor 内置变量，表示片元颜色，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器
    var n = initVertexBuffers(gl);// 初始化顶点

    var u_Rate = gl.getUniformLocation(gl.program, 'u_Rate');
    gl.uniform1f(u_Rate, 0.5);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        0, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
    ]);

    var vertexBuffer = gl.createBuffer();// 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将缓冲区对象绑定到目标
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 向缓冲区中写入数据

    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 将缓冲区对象分配给a_Position
    gl.enableVertexAttribArray(a_Position);// 链接a_Position与分配给他的缓冲区对象

    return vertices.length / 2;
}

结果:

这里写图片描述

这里所有的变换都单一的一种，当各种变换组合叠加起来之后，就需要使用矩阵。

五 矩阵变换

在组合变换之前，首先看看如何用矩阵实现上面几种变换。

/**
 * 使用矩阵变换
 * xu.lidong@qq.com
 * */

// 顶点着色器源码
var vertexShaderSrc = `
attribute vec4 a_Position;// 接收传入位置坐标，必须声明为全局
uniform mat4 u_Mat;// 旋转矩阵
void main(){
    gl_Position = u_Mat * a_Position;
}`;

// 片段着色器源码
var fragmentShaderSrc = `
void main(){
    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);// gl_FragColor 内置变量，表示片元颜色，必须赋值
}`;

// 初始化使用的shader
function initShader(gl) {
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);// 创建顶点着色器
    gl.shaderSource(vertexShader, vertexShaderSrc);// 绑定顶点着色器源码
    gl.compileShader(vertexShader);// 编译定点着色器

    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);// 创建片段着色器
    gl.shaderSource(fragmentShader, fragmentShaderSrc);// 绑定片段着色器源码
    gl.compileShader(fragmentShader);// 编译片段着色器

    var shaderProgram = gl.createProgram();// 创建着色器程序
    gl.attachShader(shaderProgram, vertexShader);// 指定顶点着色器
    gl.attachShader(shaderProgram, fragmentShader);// 指定片段着色色器
    gl.linkProgram(shaderProgram);// 链接程序
    gl.useProgram(shaderProgram);//使用着色器

    gl.program = shaderProgram;
}

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器
    var n = initVertexBuffers(gl);// 初始化顶点

    // 平移矩阵，列主序
    // var mat = new Float32Array([
    //     1.0, 0.0, 0.0, 0.0,
    //     0.0, 1.0, 0.0, 0.0,
    //     0.0, 0.0, 1.0, 0.0,
    //     0.5, 0.5, 0.0, 1.0,
    // ]);

    // 旋转矩阵，列主序
    // var rad = Math.PI * 0.5;
    // var mat = new Float32Array([
    //     Math.cos(rad), Math.sin(rad), 0.0, 0.0,
    //     -Math.sin(rad), Math.cos(rad), 0.0, 0.0,
    //     0.0, 0.0, 1.0, 0.0,
    //     0.0, 0.0, 0.0, 1.0,
    // ]);

    // 缩放矩阵，列主序
    var mat = new Float32Array([
        0.5, 0.0, 0.0, 0.0,
        0.0, 0.5, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ]);

    var u_Mat = gl.getUniformLocation(gl.program, 'u_Mat');
    gl.uniformMatrix4fv(u_Mat, false, mat);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

function initVertexBuffers(gl) {
    var vertices = new Float32Array([
        0, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
    ]);

    var vertexBuffer = gl.createBuffer();// 创建缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);// 将缓冲区对象绑定到目标
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);// 向缓冲区中写入数据

    var a_Position = gl.getAttribLocation(gl.program, "a_Position");// 获取a_Position变量
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);// 将缓冲区对象分配给a_Position
    gl.enableVertexAttribArray(a_Position);// 链接a_Position与分配给他的缓冲区对象

    return vertices.length / 2;
}

分别放开注释里面的代码，可以代码使用矩阵能实现跟上面一模一样的效果。

为了方便后面的操作，将获取矩阵的方法封装起来。

/**
 * 由平移向量获取平移矩阵
 * */
function getTranslationMatrix(x, y, z) {
    return new Float32Array([
        1.0, 0.0, 0.0, 0.0,
        0.0, 1.0, 0.0, 0.0,
        0.0, 0.0, 1.0, 0.0,
        x, y, z, 1.0,
    ]);
}

/**
 * 由旋转弧度和旋转轴获取旋转矩阵
 * */
function getRotationMatrix(rad, x, y, z) {
    if (x > 0) {
        // 绕x轴的旋转矩阵
        return new Float32Array([
            1.0, 0.0, 0.0, 0.0,
            0.0, Math.cos(rad), -Math.sin(rad), 0.0,
            0.0, Math.sin(rad), Math.cos(rad), 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    } else if (y > 0) {
        // 绕y轴的旋转矩阵
        return new Float32Array([
            Math.cos(rad), 0.0, -Math.sin(rad), 0.0,
            0.0, 1.0, 0.0, 0.0,
            Math.sin(rad), 0.0, Math.cos(rad), 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    } else if(z > 0) {
        // 绕z轴的旋转矩阵
        return new Float32Array([
            Math.cos(rad), Math.sin(rad), 0.0, 0.0,
            -Math.sin(rad), Math.cos(rad), 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    } else {
        // 没有指定旋转轴，报个错，返回一个单位矩阵
        console.error("error: no axis");
        return new Float32Array([
            1.0, 0.0, 0.0, 0.0,
            0.0, 1.0, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ]);
    }
}

/**
 * 由缩放因子获取缩放矩阵
 * */
function getScaleMatrix(xScale, yScale, zScale) {
    return new Float32Array([
        xScale, 0.0, 0.0, 0.0,
        0.0, yScale, 0.0, 0.0,
        0.0, 0.0, zScale, 0.0,
        0.0, 0.0, 0.0, 1.0,
    ]);
}

然后修改main方法：

function main() {
    var canvas = document.getElementById("container");
    var gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
    initShader(gl);// 初始化着色器
    var n = initVertexBuffers(gl);// 初始化顶点

    // 平移矩阵，列主序
    // var mat = getTranslationMatrix(0.5, 0.5, 0.0);

    // 旋转矩阵，列主序
    // var mat = getRotationMatrix(Math.PI * 0.5, 0.0, 0.0, 1.0);

    // 缩放矩阵，列主序
    var mat = getScaleMatrix(0.5, 0.5, 1.0);

    var u_Mat = gl.getUniformLocation(gl.program, 'u_Mat');
    gl.uniformMatrix4fv(u_Mat, false, mat);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);// 指定清空canvas的颜色
    gl.clear(gl.COLOR_BUFFER_BIT);// 清空canvas
    gl.drawArrays(gl.TRIANGLES, 0, n);
}

运行的结果都跟前面的一样。

WebGL之旅:

参考书：《WebGL编程指南》

01-webgl入门
qq_22188085的博客
05-29 493
前言 课前准备 安装webstorm 或vscode 开发工具。 安装live-server，用于启服务，安装方法 npm i -g live-server 需掌握es6、html、css 的基础知识。 数学基础，三角函数和向量（非必须）。 课堂目标 对webgl 的概念有一个整体认知 掌握webgl 基本绘图原理和流程 知识点 webgl 概述 webgl 最短教程 - 在画布上刷底色 webgl 最简单图形 - 画一个点 第一章 webgl概述 1-webgl是什么？ webgl 是在网页上
webGL入门教程_04vec3、vec4 和齐次坐标总结
最新发布
w131552的博客
11-30 2083
GLSL变量，与坐标讲解。
WebGL的简单介绍
感恩、奋进、自信
07-05 716
1、WebGL的定义WebGL（Web图形库，Web  graphic  library）是一种JavaScript API，在不使用插件的情况下，在任何兼容的网页浏览器中呈现交互式2D和3D图形。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API，可以在HTML5 <canvas> 元素中使用...
WebGL 简单例子
11-22
webgl:up and running 书中的第一个例子，希望大家能有所收货。 3D世界网页第一站。难啊。
webgl坐标转换_WebGL教程
weixin_42335570的博客
02-22 631
前言通过WebGL做了很多项目，感觉有必要录制一套视频教程，所以在这里写一个录制大纲，大家也可以通过章节目录了解下WebGL的基本内容。视频教程发布地址Threejs引擎Threejs是webgl国内应用最广泛的一款三维引擎，实际做项目的时候一般都是通过一款三维引擎来完成，这样要比直接使用原生WebGL要方便的多，所在这里放了一个相关的链接。 Threejs教程大纲链接：https://blog....
WebGL之旅（五）组合变换
寒风的技术博客
07-20 1317
复合变换，即对一个图形进行多次变换。一 复合变换原理比如，对图像g进行一次平移，然后进行一次缩放，求最终的得到图像g。那么： 平移后的坐标t = 平移矩阵 x 原始坐标g 缩放后的G = 缩放矩阵 x 平移后的坐标t 所以： 缩放后的G = 缩放矩阵 x (平移矩阵 x 原始坐标g) = (缩放矩阵 x 平移矩阵) x 原始坐标g 可见，对于多次变换，可以将变换矩阵相乘得到一个最终的矩
掌握WebGL：3D图形编程之旅
本书详细讲解了WebGL的基础知识，包括设置3D场景、坐标系统、视口和投影、颜色和光照模型、纹理映射、着色语言（如GLSL）以及如何进行几何变换等。此外，还涵盖了WebGL与其他Web技术（如JavaScript和CSS3）的集成，...
掌握JavaScript: 创建游戏与WebGL引擎之旅
标题《javascript-engine:玩转WebGL》和描述暗示了主题是关于利用JavaScript引擎开发WebGL游戏或应用的过程。以下是对该主题涉及知识点的详细阐述： ### 知识点一：WebGL基础 WebGL（Web图形库）是一个JavaScript ...
WebGL初学者指南：开启Web 3D编程之旅
它允许网页利用GPU加速图形性能，是Web开发者非常重要的工具之一，尤其在游戏开发、数据可视化、虚拟现实（VR）等领域。《WebGL Beginner's Guide》作为一本入门指南，面向初学者介绍了WebGL的基本概念和技术要点。 ...
WebGL-Threejs:WebGL 和 Three.js 演示
06-23
而Three.js是建立在WebGL之上的一个库，它简化了WebGL的复杂性，提供了更加友好的接口和丰富的功能，使得3D图形编程更加容易上手。 WebGL的核心在于其提供了一组强大的几何、颜色和光照处理函数，以及纹理映射和...
WebGL-Basis:我的第一个WebGL hack
05-03
总之，“WebGL基础：我的第一个WebGL hack”是一个起点，带你踏入WebGL的世界，探索JavaScript和3D图形的结合，开启网页上的视觉创新之旅。通过实践和学习，你可以创建出令人惊叹的互动3D场景。
【笔记】WebGL编程指南学习（4）
饮冰室
03-20 1416
WebGL编程指南学习（4） 4. 最后一块拼图 在学会处理顶点，包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后，还需要处理顶点的其他数据——如颜色等。此外，还需要处理将图像（或纹理）映射到图形或三维对象表面上。这就是WebGL的最后一块拼图。 将顶点的其他（非坐标）数据（如颜色）传入顶点着色器 发生在顶点着色器和片元着色器之间的从图形到片元的转化，又称为图元光栅化 将图像（或称纹理）映射到图形或三维对象的表面上 4.1 将非坐标数据传入顶点着色器 4.1.1 第一个例
OpenGL glLightfv 函数的应用以及光源的相关知识
whl0071的专栏
09-05 1175
OpenGL glLightfv 函数的应用以及光源的相关知识
OpenGL笔记（七）
alexhu2010q的博客
11-05 470
Advanced Data 除了基本的往OpenGL的buffer里面填充的API：glBufferData，再介绍几个相关API。 glBufferSubData: 可以在特定类型buffer的特定位置，插入数据，可用于动态添加buffer数据，而不用重新分配空间。 此函数需要在有具体Buffer内存时，才可使用，所以该函数要在glDataBuffer调用之后。 glBufferSubDat...
WebGL 入门
liubangbo的专栏
07-06 3992
webgl 是在网页上绘制和渲染三维图形的技术，可以让用户与其进行交互。我们之前学过的div+css、canvas 2d 都是专注于二维图形的，它们虽然也能模拟一部分三维效果，但它们和webgl 比起来，那就是玩具枪和AK47的差别。综上所述，webgl 绘图好麻烦啊！麻烦不是不学的理由，因为后面还有three.js 为你排忧解难。那我们为啥不直接学习three.js 呢？那是因为three.js 若是只想画个旋转的立方体还好，若是要深入学习，实现复杂的模型交互逻辑，就必须要有webgl 基础了。
OpenGL着色器中的坐标系
qq_20535249的博客
11-04 1647
gl_FragCoord的x和y分量代表了片段的屏幕空间坐标（其中(0, 0)位于左下角）。gl_FragCoord中也包含了一个z分量，它包含了片段真正的深度值。z值就是需要与深度缓冲内容所对比的那个值。
OpenGL学习笔记（七）GLSL中的gl_Position
热门推荐
皮皮#2500
02-16 2万+
OpenGL学习笔记（七）GLSL中的gl_Position 在编写顶点着色器的时候，遇到了一个变量gl_Position如下： #version 330 core layout (location = 0) in vec3 aPos; // 位置变量的属性位置值为0 out vec4 vertexColor; // 为片段着色器指定一个颜色输出 void main() { gl_Po...
WebGL着色器变量(attribute、uniform和varying)
u014291990的博客
11-17 4266
WebGL着色器语言三种变量(attribute、uniform和varying) 着色器语言和C语言一样，通过一个表示特定数据类型的关键词声明一个变量，比如int num;通过int关键字声明一个整数型变量num，不过着色器语言还提供了三个关键字attribute、uniform和varying用来声明特定用途的变量。 attribute和uniform关键字的目的主要是为了javascript...
webgl入门笔记(一) 基本结构和知识
ArmadaDK的博客
01-09 585
webgl基础知识和基本结构
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值