Add WebGPU backend to support the record/submit draw calls on render textures

.vscode/settings.json

@@ -97,7 +97,8 @@
     "memory_resource": "cpp",
     "__availability": "cpp",
     "span": "cpp",
-    "execution": "cpp"
+    "execution": "cpp",
+    "cassert": "cpp"
   },
   "cmake.buildDirectory": "${workspaceFolder}/build/targets/darwin",
   "C_Cpp.default.cppStandard": "c++17",

fixtures/html/three-shaders-ocean.html

@@ -54,7 +54,7 @@
 
       // Skybox
       const sky = new Sky();
-      sky.scale.setScalar(10000);
+      sky.scale.setScalar(100);
       scene.add(sky);
 
       const skyUniforms = sky.material.uniforms;
@@ -64,8 +64,8 @@
       skyUniforms['mieDirectionalG'].value = 0.8;
 
       const parameters = {
-        elevation: 2,
-        azimuth: 180
+        elevation: 90,
+        azimuth: 0
       };
 
       const pmremGenerator = new THREE.PMREMGenerator(renderer);
@@ -80,7 +80,9 @@
         sky.material.uniforms['sunPosition'].value.copy(sun);
         water.material.uniforms['sunDirection'].value.copy(sun).normalize();
 
-        if (renderTarget !== undefined) renderTarget.dispose();
+        if (renderTarget !== undefined) {
+          renderTarget.dispose();
+        }
 
         sceneEnv.add(sky);
         renderTarget = pmremGenerator.fromScene(sceneEnv);
@@ -90,10 +92,10 @@
 
       updateSun();
 
-      const geometry = new THREE.BoxGeometry(1, 1, 1);
+      const geometry = new THREE.BoxGeometry(10, 10, 10);
       const material = new THREE.MeshStandardMaterial({ roughness: 0 });
       mesh = new THREE.Mesh(geometry, material);
-      mesh.position.z = -5;
+      mesh.position.z = -30;
       scene.add(mesh);
     }
 
@@ -119,7 +121,7 @@
 
       function animate() {
         const time = performance.now() * 0.001;
-        mesh.position.y = Math.sin(time) * 1;
+        mesh.position.y = Math.sin(time) * 5;
         mesh.rotation.x = time * 0.5;
         mesh.rotation.z = time * 0.51;
         water.material.uniforms['time'].value += 1.0 / 120.0;

fixtures/html/three/portal.js

@@ -2,15 +2,15 @@ import * as THREE from 'three';
 import * as CameraUtils from 'three/addons/utils/CameraUtils.js';
 
 const scene = new THREE.Scene();
-const camera = new THREE.PerspectiveCamera(75, 1.0, 0.1, 1000);
+const camera = new THREE.PerspectiveCamera(60, 1.6, 0.1, 100);
 
 // Create lights
 const light = new THREE.DirectionalLight(0xffffff, 0.5);
 light.position.set(0, 1, 1);
 scene.add(light);
 
+let scale;
 let renderer;
-let cameraControls;
 let smallSphereOne, smallSphereTwo;
 let portalCamera, leftPortal, rightPortal, leftPortalTexture, reflectedPosition,
   rightPortalTexture, bottomLeftCorner, bottomRightCorner, topLeftCorner;
@@ -33,7 +33,7 @@ let portalCamera, leftPortal, rightPortal, leftPortalTexture, reflectedPosition,
     scene.add(smallSphereTwo);
 
     // portals
-    portalCamera = new THREE.PerspectiveCamera(45, 1.0, 0.1, 500.0);
+    portalCamera = new THREE.PerspectiveCamera(45, 1.0, 0.01, 100.0);
     scene.add(portalCamera);
     //frustumHelper = new THREE.CameraHelper( portalCamera );
     //scene.add( frustumHelper );
@@ -114,7 +114,7 @@ let portalCamera, leftPortal, rightPortal, leftPortalTexture, reflectedPosition,
       }
     });
     const size = box.getSize(new THREE.Vector3());
-    const scale = 0.3 / Math.max(size.x, size.y, size.z);
+    scale = 0.3 / Math.max(size.x, size.y, size.z);
     console.info('Scaling scene by', scale);
     scene.scale.set(scale, scale, scale);
   })();
@@ -123,17 +123,19 @@ let portalCamera, leftPortal, rightPortal, leftPortalTexture, reflectedPosition,
 function renderPortal(thisPortalMesh, otherPortalMesh, thisPortalTexture) {
   // set the portal camera position to be reflected about the portal plane
   thisPortalMesh.worldToLocal(reflectedPosition.copy(camera.position));
-  reflectedPosition.x *= - 1.0; reflectedPosition.z *= - 1.0;
+  // reflectedPosition.x *= - 1.0;
+  // reflectedPosition.z *= - 1.0;
   otherPortalMesh.localToWorld(reflectedPosition);
   portalCamera.position.copy(reflectedPosition);
 
+  let unit = 50.05;
   // grab the corners of the other portal
   // - note: the portal is viewed backwards; flip the left/right coordinates
-  otherPortalMesh.localToWorld(bottomLeftCorner.set(50.05, - 50.05, 0.0));
-  otherPortalMesh.localToWorld(bottomRightCorner.set(- 50.05, - 50.05, 0.0));
-  otherPortalMesh.localToWorld(topLeftCorner.set(50.05, 50.05, 0.0));
+  otherPortalMesh.localToWorld(bottomLeftCorner.set(unit, - unit, 0.0));
+  otherPortalMesh.localToWorld(bottomRightCorner.set(- unit, - unit, 0.0));
+  otherPortalMesh.localToWorld(topLeftCorner.set(unit, unit, 0.0));
   // set the projection matrix to encompass the portal's frame
-  CameraUtils.frameCorners(portalCamera, bottomLeftCorner, bottomRightCorner, topLeftCorner, false);
+  // CameraUtils.frameCorners(portalCamera, bottomLeftCorner, bottomRightCorner, topLeftCorner, false);
 
   // render the portal
   thisPortalTexture.texture.colorSpace = renderer.outputColorSpace;

src/bindings/webgl/rendering_context-inl.hpp

@@ -14,8 +14,8 @@
 #include "./program.hpp"
 #include "./texture.hpp"
 #include "./shader.hpp"
-#include "./uniform_location.hpp"
 #include "./active_info.hpp"
+#include "./uniform_location.hpp"
 
 using namespace std;
 using namespace node;
@@ -324,15 +324,8 @@ namespace webgl
     auto program = Napi::ObjectWrap<WebGLProgram>::Unwrap(info[0].As<Napi::Object>());
     int pname = info[1].As<Napi::Number>().Int32Value();
 
-    try
-    {
-      int v = glContext_->getProgramParameter(program->handle(), pname);
-      return Napi::Number::New(env, v);
-    }
-    catch (const std::exception &e)
-    {
-      return env.Undefined();
-    }
+    int v = glContext_->getProgramParameter(program->handle(), pname);
+    return Napi::Number::New(env, v);
   }
 
   template <typename ObjectType, typename ContextType>
@@ -860,41 +853,70 @@ namespace webgl
       Napi::TypeError::New(env, "framebufferTexture2D() takes 5 arguments.").ThrowAsJavaScriptException();
       return env.Undefined();
     }
-    auto jsTexture = info[3];
-    if (!jsTexture.IsObject() || WebGLTexture::IsInstanceOf(jsTexture))
+
+    auto target = info[0].ToNumber().Int32Value();
+    auto attachment = info[1].ToNumber().Int32Value();
+    auto textarget = info[2].ToNumber().Int32Value();
+    auto level = info[4].ToNumber().Int32Value();
+
+    if (target != WEBGL_FRAMEBUFFER &&
+        target != WEBGL2_DRAW_FRAMEBUFFER &&
+        target != WEBGL2_READ_FRAMEBUFFER) [[unlikely]]
     {
-      glContext_->setError("framebufferTexture2d", client_graphics::WebGLError::kInvalidOperation, "texture isn't 0 or the name of an existing texture object");
+      glContext_->setError("framebufferTexture2d",
+                           client_graphics::WebGLError::kInvalidEnum,
+                           "target must be FRAMEBUFFER");
       return env.Undefined();
     }
 
-    auto target = info[0].As<Napi::Number>().Int32Value();
-    auto attachment = info[1].As<Napi::Number>().Int32Value();
-    auto textarget = info[2].As<Napi::Number>().Int32Value();
-    auto texture = Napi::ObjectWrap<WebGLTexture>::Unwrap(jsTexture.As<Napi::Object>());
-    auto level = info[4].As<Napi::Number>().Int32Value();
-
-    if (target != WEBGL_FRAMEBUFFER)
+    Napi::Value jsTexture = info[3];
+    WebGLTexture *textureObject = nullptr;
+    if (jsTexture.IsNumber())
     {
-      glContext_->setError("framebufferTexture2d", client_graphics::WebGLError::kInvalidEnum, "target must be FRAMEBUFFER");
-      return env.Undefined();
+      // Only the number 0 is allowed to reset the texture binding.
+      if (jsTexture.ToNumber().Int32Value() != 0)
+      {
+        glContext_->setError("framebufferTexture2d",
+                             client_graphics::WebGLError::kInvalidOperation,
+                             "texture must be 0 if it is a number");
+        return env.Undefined();
+      }
+      else
+      {
+        textureObject = nullptr;
+      }
+    }
+    else if (jsTexture.IsNull()) // `null` means reset framebuffer's texture
+    {
+      textureObject = nullptr;
     }
-    if (textarget != WEBGL_TEXTURE_2D &&
-        textarget != WEBGL_TEXTURE_CUBE_MAP_POSITIVE_X &&
-        textarget != WEBGL_TEXTURE_CUBE_MAP_NEGATIVE_X &&
-        textarget != WEBGL_TEXTURE_CUBE_MAP_POSITIVE_Y &&
-        textarget != WEBGL_TEXTURE_CUBE_MAP_NEGATIVE_Y &&
-        textarget != WEBGL_TEXTURE_CUBE_MAP_POSITIVE_Z &&
-        textarget != WEBGL_TEXTURE_CUBE_MAP_NEGATIVE_Z)
+    else if (jsTexture.IsObject())
     {
-      glContext_->setError("framebufferTexture2d", client_graphics::WebGLError::kInvalidEnum, "textarget must be TEXTURE_2D or one of the TEXTURE_CUBE_MAP_* targets");
+      if (!WebGLTexture::IsInstanceOf(jsTexture))
+      {
+        glContext_->setError("framebufferTexture2d",
+                             client_graphics::WebGLError::kInvalidOperation,
+                             "texture is not a valid WebGLTexture object.");
+        return env.Undefined();
+      }
+      else
+      {
+        textureObject = Napi::ObjectWrap<WebGLTexture>::Unwrap(jsTexture.ToObject());
+      }
+    }
+    else
+    {
+      glContext_->setError("framebufferTexture2d",
+                           client_graphics::WebGLError::kInvalidOperation,
+                           "texture must be a number, null or a WebGLTexture object");
       return env.Undefined();
     }
 
     glContext_->framebufferTexture2D(
       static_cast<client_graphics::WebGLFramebufferBindingTarget>(target),
       static_cast<client_graphics::WebGLFramebufferAttachment>(attachment),
       static_cast<client_graphics::WebGLTexture2DTarget>(textarget),
-      texture->handle(),
+      textureObject != nullptr ? textureObject->handle() : nullptr,
       level);
     return env.Undefined();
   }
@@ -1455,12 +1477,13 @@ namespace webgl
       Napi::TypeError::New(env, "vertexAttribPointer() takes 6 arguments.").ThrowAsJavaScriptException();
       return env.Undefined();
     }
-    auto index = info[0].As<Napi::Number>().Uint32Value();
-    auto size = info[1].As<Napi::Number>().Uint32Value();
-    auto type = info[2].As<Napi::Number>().Uint32Value();
-    auto normalized = info[3].As<Napi::Boolean>().Value();
-    auto stride = info[4].As<Napi::Number>().Uint32Value();
-    auto offset = info[5].As<Napi::Number>().Uint32Value();
+
+    auto index = info[0].ToNumber().Uint32Value();
+    auto size = info[1].ToNumber().Uint32Value();
+    auto type = info[2].ToNumber().Uint32Value();
+    auto normalized = info[3].ToBoolean().Value();
+    auto stride = info[4].ToNumber().Uint32Value();
+    auto offset = info[5].ToNumber().Uint32Value();
 
     glContext_->vertexAttribPointer(index, size, type, normalized, stride, offset);
     return env.Undefined();
@@ -1545,10 +1568,10 @@ namespace webgl
     auto program = Napi::ObjectWrap<WebGLProgram>::Unwrap(info[0].As<Napi::Object>());
     std::string name = info[1].As<Napi::String>().Utf8Value();
     auto loc = glContext_->getAttribLocation(program->handle(), name);
-    if (loc.has_value())
-      return Napi::Number::New(env, loc.value());
-    else
+    if (!loc.has_value())
       return Napi::Number::New(env, -1);
+    else
+      return Napi::Number::New(env, loc.value().index.value_or(-1));
   }
 
   template <typename ObjectType, typename ContextType>

src/bindings/webgl/rendering_context.cpp

@@ -1443,11 +1443,11 @@ namespace webgl
       return env.Undefined();
     }
 
-    auto index = info[0].As<Napi::Number>().Uint32Value();
-    auto size = info[1].As<Napi::Number>().Uint32Value();
-    auto type = info[2].As<Napi::Number>().Uint32Value();
-    auto stride = info[3].As<Napi::Number>().Uint32Value();
-    auto offset = info[4].As<Napi::Number>().Uint32Value();
+    auto index = info[0].ToNumber().Uint32Value();
+    auto size = info[1].ToNumber().Uint32Value();
+    auto type = info[2].ToNumber().Uint32Value();
+    auto stride = info[3].ToNumber().Uint32Value();
+    auto offset = info[4].ToNumber().Uint32Value();
 
     glContext_->vertexAttribIPointer(index, size, type, stride, offset);
     return env.Undefined();

src/bindings/webgl/uniform_location.hpp

@@ -21,7 +21,7 @@ namespace webgl
      */
     int value() const
     {
-      return handle_.has_value() ? handle_->index : -1;
+      return handle_.has_value() ? handle_->index.value_or(-1) : -1;
     }
     /**
      * @returns the name of the uniform location.

src/client/builtin_scene/client_renderer.cpp

@@ -53,7 +53,10 @@ namespace builtin_scene
     /**
      * Configure the vertext attributes.
      */
-    auto configureAttribute = [this](const IVertexAttribute &attrib, int index, size_t stride, size_t offset)
+    auto configureAttribute = [this](const IVertexAttribute &attrib,
+                                     int index,
+                                     size_t stride,
+                                     size_t offset)
     {
       glContext_->vertexAttribPointer(index,
                                       attrib.size(),
@@ -94,7 +97,10 @@ namespace builtin_scene
       /**
        * Configure the instance attributes.
        */
-      auto configureInstanceAttribute = [this](const IVertexAttribute &attrib, int index, size_t stride, size_t offset)
+      auto configureInstanceAttribute = [this](const IVertexAttribute &attrib,
+                                               int index,
+                                               size_t stride,
+                                               size_t offset)
       {
         glContext_->enableVertexAttribArray(index);
         glContext_->vertexAttribPointer(index,

src/client/builtin_scene/instanced_mesh.cpp

@@ -107,6 +107,20 @@ namespace builtin_scene
     }
   }
 
+  bool Instance::skipToDraw() const
+  {
+    // Skip if the instance is not enabled.
+    if (!enabled_)
+      return true;
+
+    // Skip if the instance is transparent and not own a texture.
+    if (data_.isTransparent() && !data_.ownTexture())
+      return true;
+
+    // Otherwise, the instance is ready to draw.
+    return false;
+  }
+
   RenderableInstancesList::RenderableInstancesList(InstanceFilter filter,
                                                    shared_ptr<WebGLVertexArray> vao,
                                                    shared_ptr<WebGLBuffer> instanceVbo)
@@ -126,7 +140,7 @@ namespace builtin_scene
     {
       if (TR_UNLIKELY(instance == nullptr))
         continue;
-      if (!instance->enabled_)
+      if (instance->skipToDraw())
         continue;
 
       if (filter == InstanceFilter::kAll)
@@ -223,7 +237,10 @@ namespace builtin_scene
   }
 
   size_t InstancedMeshBase::iterateInstanceAttributes(shared_ptr<WebGLProgram> program,
-                                                      function<void(const IVertexAttribute &, int, size_t, size_t)> callback) const
+                                                      function<void(const IVertexAttribute &,
+                                                                    int,
+                                                                    size_t,
+                                                                    size_t)> callback) const
   {
     auto glContext = glContext_.lock();
     if (glContext == nullptr)
@@ -234,10 +251,10 @@ namespace builtin_scene
     for (size_t i = 0; i < INSTANCE_ATTRIBUTES.size(); i++)
     {
       auto &name = INSTANCE_ATTRIBUTES[i];
-      auto index = glContext->getAttribLocation(program, name);
-      if (index.has_value())
+      auto attribLocation = glContext->getAttribLocation(program, name);
+      if (attribLocation.has_value())
       {
-        auto instanceIndex = index.value();
+        auto instanceIndex = attribLocation.value().index.value_or(-1);
         if (name == "instanceTransform")
         {
           for (int i = 0; i < 4; i++)