webgl 创建两个texture如何绑定

这个问题可以直接回答。在使用WebGL创建两个texture时，可以使用gl.activeTexture()和gl.bindTexture()方法将它们绑定到不同的纹理单元上。例如：

var texture1 = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture1);

var texture2 = gl.createTexture();
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture2);

这样就可以在着色器中使用不同的纹理单元对这两个texture进行采样了。

相关问题

unity webgl 中两个场景相互切换的代码怎么写

在 Unity WebGL 中，场景的切换需要使用 JavaScript 代码来实现。下面是一个简单的示例代码，可以实现两个场景之间的切换：

// 加载场景1
function loadScene1() {
  UnityLoader.SystemInfo.hasWebGL = true; // 设置 SystemInfo.hasWebGL 为 true
  var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Scene1.json"); // 实例化场景1
}

// 加载场景2
function loadScene2() {
  UnityLoader.SystemInfo.hasWebGL = true; // 设置 SystemInfo.hasWebGL 为 true
  var gameInstance = UnityLoader.instantiate("gameContainer", "Build/Scene2.json"); // 实例化场景2
}

// 切换到场景1
function switchToScene1() {
  var container = document.getElementById("gameContainer"); // 获取游戏容器
  container.innerHTML = ""; // 清空容器
  loadScene1(); // 加载场景1
}

// 切换到场景2
function switchToScene2() {
  var container = document.getElementById("gameContainer"); // 获取游戏容器
  container.innerHTML = ""; // 清空容器
  loadScene2(); // 加载场景2
}

在上面的代码中，我们定义了两个加载场景的函数 `loadScene1` 和 `loadScene2`，以及两个切换场景的函数 `switchToScene1` 和 `switchToScene2`。当调用切换场景函数时，我们先获取游戏容器的 DOM 元素，然后清空容器，最后调用对应的加载场景函数即可实现场景的切换。

需要注意的是，在切换场景时，我们需要设置 `UnityLoader.SystemInfo.hasWebGL` 为 `true`，这是因为在 WebGL 构建中，Unity 会检测浏览器是否支持 WebGL，如果不支持，则会显示一个错误信息。设置 `UnityLoader.SystemInfo.hasWebGL` 为 `true` 可以避免这个问题。

使用webgl 绘制一个正方形

使用 WebGL 绘制正方形需要进行以下步骤：

1. 获取 WebGL 上下文对象

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

2. 设置顶点着色器和片元着色器

const vertexShaderSource = `
  attribute vec2 a_position;

  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
`;

const fragmentShaderSource = `
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

3. 创建着色器程序并链接顶点着色器和片元着色器

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

4. 创建缓冲区并绑定数据

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
  -0.5, -0.5,
  0.5, -0.5,
  -0.5, 0.5,
  0.5, 0.5,
];

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

5. 设置顶点属性指针并启用

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

6. 清空画布并绘制正方形

gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

完整的 WebGL 绘制正方形的代码如下：

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');

const vertexShaderSource = `
  attribute vec2 a_position;

  void main() {
    gl_Position = vec4(a_position, 0, 1);
  }
`;

const fragmentShaderSource = `
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1, 0, 0, 1);
  }
`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

const positions = [
  -0.5, -0.5,
  0.5, -0.5,
  -0.5, 0.5,
  0.5, 0.5,
];

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

const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

这样就可以在 canvas 中绘制一个红色的正方形了。