javascript - 如何在 WebGL 画布上渲染 2d 画布?
问题描述
我正在使用多个画布在 2D 画布上制作动画(缩放/更改不透明度)图像。只需在某处阅读即可webgl
提高整体 FPS。我是新手,发现它与画布WEBGL
完全不同。2d
有人可以指导我如何在主画布上渲染现有的 2d 画布webgl
。
这是一个演示代码,描绘了一个webgl canvas
和virtual 2d canvas
一个绘制的图像。如何使用在 webgl 画布上绘制的图像绘制这个 2d 画布?
let webglCanvas = $('#webgl-canvas')[0];
let webglContext = backgroundCanvas.getContext('webgl');
/* setting up 2d canvas */
let virtualCanvas = document.createElement('canvas');
let virtualContext = virtualCanvas.getContext('2d');
/* setting height and width */
webglCanvas.height = 100;
webglCanvas.width = 150;
virtualCanvas.height = 100;
virtualCanvas.width = 150;
/* fetching image to draw on 2d context */
let image = new Image();
image.src = "http://ahiliahomes.saibbywebdemos.online/assets/images/brown-back.jpg";
image.onload = () => drawImageOn2D()
function drawImageon2D() {
virtualContext.save();
virtualContext.clearRect(0, 0, virtualCanvas.width, virtualCanvas.height, 0, 0);
virtualContext.drawImage(image, 0, 0, image.width, image.height, 0, 0, virtualCanvas.width, virtualCanvas.height);
virtualContext.restore();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="webgl-canvas"></canvas>
解决方案
如果您不反对使用第三方库(好吧,我强烈推荐它!),这就是我将如何使用three.js(我正在使用另一个图像,因为我遇到了你的CORS问题)。
这个想法基本上是在 WebGL 画布上创建一个平面并将图像作为纹理应用在上面。其余的是样板代码,用于使场景被渲染(aniamte
)和可见(light
):
const IMG_WIDTH = 390;
const IMG_HEIGHT = 260;
var scene = new THREE.Scene();
// these are the default PerspectiveCamera initialization settings
var camera = new THREE.PerspectiveCamera( 45, IMG_WIDTH / IMG_HEIGHT, 1, 1000 );
// you'll have to play with the camera z position to get closer
// or further to the image, so render it smaller or bigger
camera.position.z = 10;
var renderer = new THREE.WebGLRenderer();
renderer.setSize( IMG_WIDTH, IMG_HEIGHT );
// LIGHT
var light = new THREE.PointLight( 0xffffff, 1, 0 );
light.position.set(1, 1, 100 );
scene.add(light)
var loader = new THREE.TextureLoader();
// IMAGE
var planeMaterial = new THREE.MeshLambertMaterial({
map: loader.load("https://i.imgur.com/fHyEMsl.jpg")
});
var planeGeometry = new THREE.PlaneGeometry(10, 10 * (IMG_HEIGHT/IMG_WIDTH));
var mesh = new THREE.Mesh(planeGeometry, planeMaterial);
mesh.position.set(0, 0, 0);
scene.add(mesh);
document.body.appendChild( renderer.domElement );
// here is the (stereotyped) render loop
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
推荐阅读
- java - 一个有趣的 cron、bash、perl 和 java 问题
- linux-kernel - 与“记录器”一起运行服务器应用程序进程
- javascript - 在 Acrobat Reader 中使用 Javascript 从 PDF 中提取特定页面
- macos - 如何获取 pdf,并将其中的任何 jpeg2000/jpx/jp2 图像转换为 jpeg 图像?
- sql - python 3 flask如何调试400 Bad Request:浏览器(或代理)发送了一个该服务器无法理解的请求
- java - How to match forward slashes or periods at end of String but Not Capture Using Java Regular Expression
- python - 是否有运算符或更优雅的方式来编写 if 语句?
- javascript - 反应道具上的打字稿令人讨厌的警告
- python - 使用 AWS 上的 Spotipy 在 Python 中对 Spotify 进行用户身份验证
- javascript - 当我单击此处并存储在数组中时,试图获取按钮的值?知道我做错了什么吗?