Actualmente estamos trabajando en un proyecto que requiere que rendericemos un objeto 3D y una pequeña aplicación de dibujo uno al lado del otro. Los estamos dibujando en el mismo lienzo y usamos la ventana gráfica y la tijera para darles su área separada. Hasta ahora, hemos logrado renderizar ambos, pero nuestra aplicación de dibujo no dibuja los puntos que se colocan en el búfer (funciona cuando se usa solo).

Actualmente estamos utilizando el enfoque descrito en la guía de fundamentos de WebGL: https://webglfundamentals.org/webgl/lessons/webgl-drawing-multiple-things.html

En el momento de inicio:

• cree todos los shaders y programas y busque ubicaciones.
• crear zonas de influencia y cargar datos de vértices.
• crear texturas y cargar datos de textura.

En tiempo de renderizado

• borrar y configurar la ventana gráfica y otros estados globales (habilitar pruebas de profundidad, activar la eliminación selectiva, etc.)
• Por cada cosa que quieras dibujar
  • llame a gl.useProgram para el programa necesario para dibujar.
  • configurar atributos para lo que quieres dibujar
    • para cada atributo llame a gl.bindBuffer, gl.vertexAttribPointer, gl.enableVertexAttribArray
  • configurar uniformes para lo que quieres dibujar
    • llame a gl.uniformXXX para cada uniforme
    • llame a gl.activeTexture y gl.bindTexture para asignar texturas a unidades de textura.
  • llame a gl.drawArrays o gl.drawElements

En la pseudo implementación que se ve a continuación, los clics en la aplicación de dibujo (el controlador de eventos no se muestra, pero funciona) se registran y se colocan en el búfer (el programa utilizado en este momento es el correcto y el búfer correcto está enlazado antes que los subdatos). se agrega), pero cuando llegamos al punto de representación, los puntos ect. no aparecen?

 function render(){ switchProgram() render3Dobject() switchProgram() renderDrawingApplication() } function switchProgram(){ gl.enable(gl.SCISSOR_TEST); // Set viewport and scissor. // Bind buffer // Set vertexAttributePointer // EnableVertexAttributeArray // Setup uniform textures. } function render3Dobject(){ // Handle rotation, matrices ect. // Draw object using DrawElements. } function renderDrawingApplication(){ // Draw all points and objects from drawing program using drawArrays. }