Как мне отрисовать 2d холст на холсте WebGL? - PullRequest
Новая
       13

Как мне отрисовать 2d холст на холсте WebGL?

0 голосов
/ 05 декабря 2018

Я использую несколько canvas для анимации (масштабирования / изменения непрозрачности) изображений на 2D canvas.Просто прочитайте где-нибудь, используя webgl, чтобы увеличить общий FPS.Я новичок в WEBGL и обнаружил, что он сильно отличается от 2d холстов.Может ли кто-нибудь подсказать мне, как я могу визуализировать мои существующие 2d холсты на главном webgl холсте.

Вот демонстрационный код, изображающий webgl canvas и virtual 2d canvas с нарисованным изображением.Как нарисовать этот 2D холст с изображением, нарисованным на холсте webgl? 

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>

1 Ответ

0 голосов
/ 05 декабря 2018

Если вы не против использования сторонней библиотеки (ну, я настоятельно рекомендую это!), Вот как я бы это сделал с 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>
...