opal-js_wrap-three 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9cae62516fa7b9a2f924dc94dfa5aa0207b92ced58133989b924da38ecb1a67d
-  data.tar.gz: 84c1d6bb5d517626befc59cc6bee512697ff1c3d688f59e07947b0ad3d444b6f
+  metadata.gz: e37d84ff43dd3664eeef3a40d737af19103b58151c43019579854e963fc2ae2c
+  data.tar.gz: 72bd5396cb7796a5ae5715d94bdc5cc15356c521e61416b452b9e1a5877076a5
 SHA512:
-  metadata.gz: 2a8d9c1652a52eac070c9343d108eeae2f539b8757687a3607da597eb519c7fef81caff6dfa4bb160835165621e8770a470d7d2259c720867355b05ccc2ee680
-  data.tar.gz: 7c533af27929c76db80cba39b29d434edc9bf0f84cc6e5847045c33ce439d481ed0b88f2a96ed7329dea2496bbd101823486269b5a785463c7e7f90895733a17
+  metadata.gz: c41520ca4af956a414e52501ff5309c0f39e61e8bc4dee9c70095f94e9fc2493ca911dc22cbd0eb564c98105a0555bc462b678415371d2b0d0e8ce1e7fa6e009
+  data.tar.gz: 53c23f536184da394793707a58992553e868bf68f6f53dd82a3f43d4e7f6977c5433da833dd3f1bb9b337405ccc089a1a30cd997d0fedb69ff8c2f71efbe3a31

data/.gitignore

@@ -8,7 +8,7 @@
 /tmp/
 
 /node_modules/
-/lib-opal/js_wrap/three/three.js
+/lib-opal/js_wrap/three/
 
 Gemfile.lock
 

data/CHANGELOG.md

@@ -1,5 +1,10 @@
 ## [Unreleased]
 
+- Not specified here improvements to JSWrap
+- 3DObject#<< as an alias to #add
+- Full support for examples (ie. loaders)
+- New examples: clipping_intersection, gltf_loader
+
 ## [0.1.0] - 2021-12-14
 
 - Initial release

data/Rakefile

@@ -15,4 +15,10 @@ end
 
 task build_js: 'lib-opal/js_wrap/three/three.js'
 
-task default: %i[build_js]
+task :build_js_examples do
+  Dir["node_modules/three/examples/jsm/**/*.js"].each do |js|
+    sh "npx babel #{js} -o lib-opal/js_wrap/three/#{js.split("/jsm/").last}"
+  end
+end
+
+task default: %i[build_js build_js_examples]

data/babel.config.json

@@ -0,0 +1,10 @@
+{
+  "presets": [["@babel/preset-env", {
+    "modules": "umd",
+  }]],
+  "compact" : false,
+  "targets": { "chrome": 38 },
+  //"plugins": [
+  //  "@babel/plugin-transform-runtime"
+  //]
+}

data/examples/clipping_intersection/Gemfile

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gem "opal-js_wrap-three", path: "../.."
+# This gem should work with any recent version of Opal (no guarantees),
+# but it's strongly recommended to use Opal v1.4 for improved error
+# reporting.
+gem "opal", github: "opal/opal", ref: "hmdne/ruby31"
+gem "rack"
+gem "webrick"

data/examples/clipping_intersection/example.rb

@@ -0,0 +1,68 @@
+# This example is adapted from https://threejs.org/examples/#webgl_clipping_intersection
+
+require 'pp'
+require 'js_wrap/three'
+
+clip_planes = [
+  Three::Plane.new(Three::Vector3.new(1, 0, 0), 0),
+  Three::Plane.new(Three::Vector3.new(0, -1, 0), 0),
+  Three::Plane.new(Three::Vector3.new(0, 0, -1), 0),  
+]
+
+renderer, scene, camera = nil
+
+init = proc do
+  renderer = Three::WebGLRenderer.new(antialias: true)
+  renderer.set_pixel_ratio(JSGlobal.device_pixel_ratio)
+  renderer.set_size(JSGlobal.inner_width, JSGlobal.inner_height)
+  renderer.local_clipping_enabled = true
+  JSGlobal.document.body.append_child(renderer.dom_element)
+
+  scene = Three::Scene.new
+
+  wdh = JSGlobal.inner_width / JSGlobal.inner_height
+  $camera = camera = Three::PerspectiveCamera.new(40, wdh, 1, 200)
+  camera.position.set(-1.5, 2.5, 3.0)
+  camera.quaternion.set(0.122, -0.355, -0.905, 0.202)
+
+  light = Three::HemisphereLight.new(0xffffff, 0x080808, 1.5)
+  light.position.set(-1.25, 1, 1.25)
+  scene << light
+
+  # helper = Three::CameraHelper.new(light.shadow.camera)
+  # scene << helper
+
+  group = Three::Group.new
+  (1..30).step(2).each do |i|
+    geometry = Three::SphereGeometry.new(i/30, 48, 24)
+    material = Three::MeshLambertMaterial.new(
+      color: Three::Color.new.setHSL(rand, 0.5, 0.5),
+      side: Three::DoubleSide,
+      clipping_planes: clip_planes,
+      clip_intersection: true
+    )
+    # line_material = Three::LineBasicMaterial.new(
+    #   color: 0xffffff,
+    #   transparent: true,
+    #   opacity: 0.5
+    # )
+    # group.add Three::LineSegments.new(geometry, line_material)
+    group << Three::Mesh.new(geometry, material)
+  end
+  scene << group
+
+  # helpers = Three::Group.new
+	# helpers << Three::PlaneHelper.new( clip_planes[0], 2, 0xff0000 )
+	# helpers << Three::PlaneHelper.new( clip_planes[1], 2, 0x00ff00 )
+	# helpers << Three::PlaneHelper.new( clip_planes[2], 2, 0x0000ff )
+	# scene << helpers
+end
+
+render = proc do
+  renderer.render(scene, camera)
+end
+
+JSGlobal.add_event_listener("DOMContentLoaded") do
+  init.call
+  render.call
+end

data/examples/clipping_intersection/run.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+bundle exec opal -qopal/js_wrap/three -Rserver example.rb

data/examples/gltf_loader/Gemfile

@@ -0,0 +1,9 @@
+source "https://rubygems.org"
+
+gem "opal-js_wrap-three", path: "../.."
+# This gem should work with any recent version of Opal (no guarantees),
+# but it's strongly recommended to use Opal v1.4 for improved error
+# reporting.
+gem "opal", github: "opal/opal", ref: "hmdne/ruby31"
+gem "rack"
+gem "webrick"

data/examples/gltf_loader/example.rb

@@ -0,0 +1,78 @@
+# This example is adapted from https://threejs.org/examples/#webgl_loader_gltf
+require 'js_wrap/three'
+require 'js_wrap/three/controls/OrbitControls'
+require 'js_wrap/three/loaders/GLTFLoader'
+require 'js_wrap/three/loaders/RGBELoader'
+require 'js_wrap/three/utils/RoughnessMipmapper'
+
+renderer, scene, camera = nil
+
+PATH = "https://raw.githubusercontent.com/mrdoob/three.js/master/examples/"
+
+render = proc do
+  renderer.render(scene, camera)
+end
+
+init = proc do
+  camera = Three::PerspectiveCamera.new(45, JSGlobal.inner_width / JSGlobal.inner_height, 0.25, 20)
+  camera.position.set(-1.8, 0.6, 2.7)
+
+  scene = Three::Scene.new
+
+  Three::RGBELoader.new.set_path(PATH + 'textures/equirectangular/')
+                       .load('royal_esplanade_1k.hdr') do |texture|
+    texture.mapping = Three::EquirectangularReflectionMapping
+
+    scene.background = texture
+    scene.environment = texture
+
+    render.call
+
+    roughness_mipmapper = Three::RoughnessMipmapper.new(renderer)
+
+    Three::GLTFLoader.new.set_path(PATH + 'models/gltf/DamagedHelmet/glTF/')
+                         .load('DamagedHelmet.gltf') do |gltf|
+      gltf.scene.traverse do |child|
+        if child[:is_mesh]
+          roughness_mipmapper.generate_mipmaps(child.material)
+        end
+      end
+
+      scene << gltf.scene
+
+      roughness_mipmapper.dispose
+
+      render.call
+    end
+  end
+
+  renderer = Three::WebGLRenderer.new(antialias: true)
+  renderer.set_pixel_ratio(JSGlobal.device_pixel_ratio)
+  renderer.set_size(JSGlobal.inner_width, JSGlobal.inner_height)
+  renderer.tone_mapping = Three::ACESFilmicToneMapping
+  renderer.tone_mapping_exposure = 1
+  renderer.outputEncoding = Three.sRGBEncoding
+  
+  JSGlobal.document.body.append_child(renderer.dom_element)
+
+  controls = Three::OrbitControls.new(camera, renderer.dom_element)
+  controls.add_event_listener('change', &render)
+  controls.min_distance = 2
+  controls.max_distance = 10
+  controls.target.set(0, 0, 0.2)
+  controls.update
+
+  JSGlobal.add_event_listener('resize') do
+    camera.aspect = JSGlobal.inner_width / JSGlobal.inner_height
+    camera.update_projection_matrix
+
+    renderer.set_size(JSGlobal.inner_width, JSGlobal.inner_height)
+
+    render.call
+  end
+end
+
+JSGlobal.add_event_listener("DOMContentLoaded") do
+  init.call
+  render.call
+end

data/examples/gltf_loader/run.sh

@@ -0,0 +1,3 @@
+#!/bin/sh
+
+bundle exec opal -qopal/js_wrap/three -Rserver example.rb

data/examples/readme/example.rb

@@ -16,7 +16,7 @@ geometry = Three::BoxGeometry.new(0.2, 0.2, 0.2)
 material = Three::MeshNormalMaterial.new
 
 mesh = Three::Mesh.new(geometry, material)
-scene.add(mesh)
+scene << mesh
 
 renderer = Three::WebGLRenderer.new(antialias: true)
 renderer.set_size(JSGlobal.inner_width, JSGlobal.inner_height)

data/lib/opal/js_wrap/three/version.rb

@@ -3,7 +3,7 @@
 module Opal
   module JSWrap
     module Three
-      VERSION = "0.1.0"
+      VERSION = "0.1.1"
     end
   end
 end

data/lib-opal/js_wrap/three/three.js

@@ -231,6 +231,13 @@
 
   var runtime = {exports: {}};
 
+  /**
+   * Copyright (c) 2014-present, Facebook, Inc.
+   *
+   * This source code is licensed under the MIT license found in the
+   * LICENSE file in the root directory of this source tree.
+   */
+
   (function (module) {
     var runtime = function (exports) {
 
@@ -384,7 +391,7 @@
             var result = record.arg;
             var value = result.value;
 
-            if (value && _typeof(value) === "object" && hasOwn.call(value, "__await")) {
+            if (value && typeof value === "object" && hasOwn.call(value, "__await")) {
               return PromiseImpl.resolve(value.__await).then(function (value) {
                 invoke("next", value, resolve, reject);
               }, function (err) {
@@ -942,7 +949,7 @@
       // you've misconfigured your bundler to force strict mode and applied a
       // CSP to forbid Function, and you're not willing to fix either of those
       // problems, please detail your unique predicament in a GitHub issue.
-      if ((typeof globalThis === "undefined" ? "undefined" : _typeof(globalThis)) === "object") {
+      if (typeof globalThis === "object") {
         globalThis.regeneratorRuntime = runtime;
       } else {
         Function("r", "regeneratorRuntime = r")(runtime);
@@ -954,7 +961,7 @@
 
   var _ENCODINGS;
 
-  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+  function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
@@ -11699,7 +11706,7 @@
 
       if (data) {
         gl.deleteBuffer(data.buffer);
-        buffers["delete"](attribute);
+        buffers.delete(attribute);
       }
     }
 
@@ -13442,7 +13449,7 @@
       var cubemap = cubemaps.get(texture);
 
       if (cubemap !== undefined) {
-        cubemaps["delete"](texture);
+        cubemaps.delete(texture);
         cubemap.dispose();
       }
     }
@@ -14282,7 +14289,7 @@
       var cubemapUV = cubeUVmaps.get(texture);
 
       if (cubemapUV !== undefined) {
-        cubeUVmaps["delete"](texture);
+        cubeUVmaps.delete(texture);
         cubemapUV.dispose();
       }
     }
@@ -14392,7 +14399,7 @@
 
       if (attribute) {
         attributes.remove(attribute);
-        wireframeAttributes["delete"](geometry);
+        wireframeAttributes.delete(geometry);
       }
 
       bindingStates.releaseStatesOfGeometry(geometry);
@@ -16469,7 +16476,7 @@
     }
 
     function remove(object) {
-      properties["delete"](object);
+      properties.delete(object);
     }
 
     function update(object, key, value) {
@@ -18436,7 +18443,7 @@
       deallocateTexture(texture);
 
       if (texture.isVideoTexture) {
-        _videoTextures["delete"](texture);
+        _videoTextures.delete(texture);
       }
 
       info.memory.textures--;
@@ -20042,7 +20049,7 @@
               type: 'disconnected',
               data: inputSource
             });
-            inputSourcesMap["delete"](inputSource);
+            inputSourcesMap.delete(inputSource);
           }
         } // Notify connected
 
@@ -21132,8 +21139,8 @@
       return _scissorTest;
     };
 
-    this.setScissorTest = function (_boolean) {
-      state.setScissorTest(_scissorTest = _boolean);
+    this.setScissorTest = function (boolean) {
+      state.setScissorTest(_scissorTest = boolean);
     };
 
     this.setOpaqueSort = function (method) {
@@ -31772,7 +31779,7 @@
           }
 
           _this88.manager.itemEnd(url);
-        })["catch"](function (err) {
+        }).catch(function (err) {
           // Abort errors and other errors are handled the same
           var callbacks = loading[url];
           delete loading[url];
@@ -34464,7 +34471,7 @@
           Cache.add(url, imageBitmap);
           if (onLoad) onLoad(imageBitmap);
           scope.manager.itemEnd(url);
-        })["catch"](function (e) {
+        }).catch(function (e) {
           if (onError) onError(e);
           scope.manager.itemError(url);
           scope.manager.itemEnd(url);
@@ -40415,9 +40422,9 @@
     return this.extensions.get('ANGLE_instanced_arrays');
   };
 
-  WebGLRenderer.prototype.enableScissorTest = function (_boolean2) {
+  WebGLRenderer.prototype.enableScissorTest = function (boolean) {
     console.warn('THREE.WebGLRenderer: .enableScissorTest() is now .setScissorTest().');
-    this.setScissorTest(_boolean2);
+    this.setScissorTest(boolean);
   };
 
   WebGLRenderer.prototype.initMaterial = function () {
@@ -40802,7 +40809,7 @@
     }
   }
 
-  var Three = /*#__PURE__*/Object.freeze({
+  var THREE = /*#__PURE__*/Object.freeze({
     __proto__: null,
     ACESFilmicToneMapping: ACESFilmicToneMapping,
     AddEquation: AddEquation,
@@ -41263,6 +41270,6 @@
     sRGBEncoding: sRGBEncoding
   });
 
-  globalThis.Three = Three;
+  globalThis.THREE = globalThis.three = THREE;
 
 })();

data/lib-opal/js_wrap/three.rb

@@ -1,4 +1,31 @@
 require "js_wrap"
 require "js_wrap/three/three" # JavaScript
 
-Three = JSWrap::ClassView.wrap(`Three`)
+ThreeMod = JSWrap::ClassView.wrap(`THREE`)
+
+module Three
+  class Three::Object3D < JSWrap::ObjectView
+    js_class `THREE.Object3D`
+
+    def <<(other)
+      add(other)
+      self
+    end
+  end
+
+  # A hack for UMD exporting things in globalThis
+  def self.const_missing(name)
+    if ThreeMod.js_property?(name)
+      ThreeMod.js_property(name)
+    elsif JSGlobal.js_property?(name)
+      JSGlobal.js_property(name).js_property(name)
+    else
+      super
+    end
+  end
+
+  def self.method_missing(*args, &block)
+    ThreeMod.send(*args, &block)
+  end
+end
+

data/lib-opal/js_wrap.rb

@@ -142,7 +142,7 @@ module JSWrap
     # @private
     def js_property_name_rb2js(name, raw: nil)
       raw = self.js_function_wrap if raw.nil?
-      if raw || name.start_with?(/[A-Z]/)
+      if raw || name.start_with?(/[_A-Z]/)
         name
       else
         name.gsub(/_(.?)/) { Regexp.last_match(1).upcase }
@@ -152,7 +152,7 @@ module JSWrap
     # @private
     def js_property_name_js2rb(name, raw: nil)
       raw = self.js_function_wrap if raw.nil?
-      if raw || name.start_with?(/[A-Z]/)
+      if raw || name.start_with?(/[_A-Z]/)
         name
       else
         name.gsub(/([A-Z])/) { '_' + Regexp.last_match(1).downcase }
@@ -521,7 +521,7 @@ module JSWrap
     extend WrapperClassMethods
     include ObjectWrapper
     self.js_array_wrap = true
-    undef Array, String
+    undef Array, String, load
   end
   class ArrayView
     extend WrapperClassMethods
@@ -672,7 +672,7 @@ JSWrap.register_wrapping(priority: 10) do |item, parent, args|
 end
 
 class Hash
-  # @return a JavaScript object with the same keys but calling #to_n on
+  # @return a JavaScript object with the same keys but calling #to_js on
   # all values.
   def to_js(parent=nil)
     %x{
@@ -696,6 +696,20 @@ class Hash
   end
 end
 
+class Array
+  # Retuns a copy of itself trying to call #to_js on each member.
+  def to_js(parent=nil)
+    %x{
+      var result = [];
+      for (var i = 0, length = self.length; i < length; i++) {
+        var obj = self[i];
+        result.push(#{JSWrap.unwrap(`obj`, parent)});
+      }
+      return result;
+    }
+  end
+end
+
 class Method
   def to_js(parent=nil)
     JSWrap.unwrap_proc(to_proc, parent)

data/opal-js_wrap-three.gemspec

@@ -12,7 +12,7 @@ Gem::Specification.new do |spec|
   spec.description   = "(Mostly) raw wrapper for the Three.js library for Opal"
   spec.homepage      = "https://github.com/hmdne/opal-jswrap-three"
   spec.license       = "MIT"
-  spec.required_ruby_version = ">= 2.4.0"
+  spec.required_ruby_version = ">= 2.6.0"
 
   # spec.metadata["allowed_push_host"] = "TODO: Set to 'http://mygemserver.com'"