我有两个 Canvas ，我想在两个 Canvas 中显示相同的对象(事实上我必须在每个 Canvas 中显示不同的对象，但我想先在两个 Canvas 中显示相同的对象) ，但我无法做到这一点， 有人可以帮我做这件事吗？
我的尝试是:(我有两个灰色的 Canvas (canvas ans canvas2)，它在两个 Canvas 中显示多个正方形，但它只显示在一个中)，如何在两个 Canvas 中显示。 我要尝试的代码是:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script class="WebGL">
var gl,gl2;
function createProgram(gl, vertexShader, fragmentShader)
{
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, vertexShader);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(vs));
//////
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, fragmentShader);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(fs));
program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
alert(gl.getProgramInfoLog(program));
return program;
}
function createShaderFromScriptElement(gl , shaderName)
{
var Shader = document.getElementById(shaderName).firstChild.nodeValue;
return Shader;
}
function start()
{
var canvas = document.getElementById("canvas");
canvas2 = document.getElementById("canvas2");
gl = canvas.getContext("experimental-webgl");
gl2 = canvas2.getContext("experimental-webgl");
if (!gl) { alert("error while GL load"); }
if (!gl2) { alert("error while GL load"); }
// var vertexShader2 = createShaderFromScriptElement(gl, "2d-vertex-shader");
// var fragmentShader2 = createShaderFromScriptElement(gl, "2d-fragment-shader");
var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
var program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
var positionLocation = gl.getAttribLocation(program, "a_position");
var colorLocation = gl.getUniformLocation(program, "u_color");
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.uniform2f(resolutionLocation, 200, 200);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
for (var ii = 0; ii < 5005; ++ii)
{
// Setup a random rectangle
setRectangle(gl, randomInt(300), randomInt(300), 50, 50);
// Set a random color.
gl.uniform4f(colorLocation, Math.random(), Math.random(), Math.random(), 1);
// Draw the rectangle.
gl.drawArrays(gl.TRIANGLES, 0, 3);
gl2.drawArrays(gl2.TRIANGLES, 0, 3);
}
function randomInt(range)
{
return Math.floor(Math.random() * range);
}
// Fills the buffer with the values that define a rectangle.
function setRectangle(gl, x, y, width, height)
{
var x1 = x;
var x2 = x + width;
var y1 = y;
var y2 = y + height;
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
x1, y1,
x1, -y1,
-x1, y1,
]), gl.STATIC_DRAW);
}
}
</script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
uniform vec2 u_resolution;
void main() {
// convert the rectangle from pixels to 0.0 to 1.0
vec2 zeroToOne = a_position / u_resolution;
// convert from 0->1 to 0->2
vec2 zeroToTwo = zeroToOne * 2.0;
// convert from 0->2 to -1->+1 (clipspace)
vec2 clipSpace = zeroToTwo - 1.0;
gl_Position = vec4(clipSpace* vec2(1, -1), 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 u_color;
void main()
{
gl_FragColor = u_color; // green
}
</script>
</head>
<body onload="start()">
<div style="text-align: center">
</div>
<table style="width:100%; height: 10%;">
<tr>
<td style="width:200px; max-width:200px; background-color:gray ">
<canvas id="canvas" width="300" height="300"></canvas>
</td>
<td style="width:200px; max-width:200px; background-color:gray; ">
<canvas id="canvas2" width="300" height="300"></canvas>
</td>
</tr>
</table>
</body>
</html>
最佳答案
不，很遗憾，您不能在 WebGL 1.0 中跨 Canvas 共享 WebGL 对象
你想完成什么？
一些解决方案:
拆分 1 个 Canvas
如果您像许多 3D 建模程序一样需要多个 View ，您可以使用
gl.enable(gl.SCISSOR_TEST)拆分单个 Canvas 。 ,gl.scissor和gl.viewport. Here's one example绘制到一个 Canvas ，然后复制到其他 Canvas
在这种情况下，您使用 WebGL 渲染到屏幕外 Canvas ，然后 使用多个可见 Canvas 2d Canvas 通过使用显示 绘制图像。
gl = offscreenCanvas.getContext("webgl"); ctx1 = onscreenCanvas1.getContext("2d"); ctx2 = onscreenCanvas2.getContext("2d"); // render whatever you want to appear in onscreenCanvas1 renderScene(scene1Settings, gl); // copy the result to offscreenCanvas1 ctx1.drawImage(gl.canvas, ...); // render whatever you want to appear in onscreenCanvas2 renderScene(scene2Settings, gl); // copy the result to offsceenCanvas2 ctx2.drawImage(gl,canvas, ...);将 1 个 Canvas 设为窗口大小，将其置于背景中，使用第一种技术(剪刀、视口(viewport))和
getBoundingClientRect精确渲染其他元素所在的位置。在这种情况下，您将单个 WebGL Canvas 设为窗口大小 并使用 CSS 将其置于后台。然后你创建一个占位符
<div>或其他元素来表示您想要 Canvas 的位置 出现。然后您可以询问浏览器该元素出现的确切位置，然后 使用该信息设置视口(viewport)和剪刀，然后渲染到 该区域使其看起来像 Canvas
关于javascript - 我们如何在 webgl 的两个 Canvas 中显示相同的对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33165068/