SpiderBasic

Posted: **Sat Apr 01, 2017 12:40 pm**

It would be very cool/handy to have native SB 3D support like three.js or something different/similar in the browser.

https://threejs.org/

Posted: **Sat Apr 01, 2017 2:41 pm**

-1I prefer an independent module or include !

Posted: **Tue Apr 04, 2017 9:24 am**

And who does it ?

Posted: **Tue Apr 04, 2017 10:33 am**

pf shadoko wrote:And who does it ?

the one who brought it up

Here's a simple 'starterkit':

Code: Select all

! var THREE;

DeclareModule ThreeJS
  
  Global IsInitialized
  
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height, Flags = 0)
  
EndDeclareModule

Module ThreeJS
  
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
  
  Procedure Init(Callback)
    
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"], 
    !   function(t) {
    !      THREE = t;
    IsInitialized = #True
    !     v_callback();
    !   }
    ! );   
    
  EndProcedure  
  
  Procedure Gadget(Gadget, x, y, Width, Height, Flags = 0)
    
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height, Flags)
    Else
      ContainerGadget(Gadget, x, y, Width, Height, Flags)
    EndIf
    
    CloseGadgetList()
    
    GetSelector
    
    !  var scene = new THREE.Scene();
    
    !  var camera = new THREE.PerspectiveCamera( 75, v_width/v_height, 0.1, 1000 );
    
    !  var renderer = new THREE.WebGLRenderer();
    
    !  renderer.setSize( v_width, v_height );
    
    ! selector.append( renderer.domElement );
    
    !  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    !  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    !  var cube = new THREE.Mesh( geometry, material );
    !  scene.add( cube );
    
    !  camera.position.z = 5;
    
    !  var render = function () {
    !    requestAnimationFrame( render );
    !    cube.rotation.x += 0.1;
    !    cube.rotation.y += 0.1;
    !    renderer.render(scene, camera);
    !  };
    
    !  render();
    
    ProcedureReturn Gadget
    
  EndProcedure
  
EndModule

; Demo

Enumeration
  #myWindow
  #myGadget
EndEnumeration

Procedure Main()
  
  OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ThreeJS", #PB_Window_ScreenCentered)
  
  ThreeJS::Gadget(#myGadget, 0, 0, WindowWidth(#myWindow), WindowHeight(#myWindow))
  
EndProcedure

ThreeJS::Init(@Main())

Greetings ... Peter

Posted: **Wed Apr 05, 2017 1:37 am**

I cant divide javascript as what i did with makeCube()
Using macro's is not a option, because i need to specify parameters.
Do i miss something obvious?

Code: Select all

! var THREE;

DeclareModule ThreeJS
 
  Global IsInitialized
 
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height, Flags = 0)
  Declare makeCube()
 
EndDeclareModule

Module ThreeJS
 
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
 
  Procedure Init(Callback)
   
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"],
    !   function(t) {
    !      THREE = t;
    IsInitialized = #True
    !     v_callback();
    !   }
    ! );   
   
  EndProcedure 
  
  
  Procedure makeCube()
    Debug "test"
    
    !  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    !  var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
    !  var cube = new THREE.Mesh( geometry, material );
    !  scene.add( cube );
    
  EndProcedure  
  
  
  Procedure Gadget(Gadget, x, y, Width, Height, Flags = 0)
   
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height, Flags)
    Else
      ContainerGadget(Gadget, x, y, Width, Height, Flags)
    EndIf
   
    CloseGadgetList()
   
    GetSelector
   
    !  var scene = new THREE.Scene();
   
    !  var camera = new THREE.PerspectiveCamera( 75, v_width/v_height, 0.1, 1000 );
   
    !  var renderer = new THREE.WebGLRenderer();
   
    !  renderer.setSize( v_width, v_height );
   
    ! selector.append( renderer.domElement );
   
    makeCube()

   
    !  camera.position.z = 5;
   
    !  var render = function () {
    !    requestAnimationFrame( render );
    !    cube.rotation.x += 0.1;
    !    cube.rotation.y += 0.1;
    !    renderer.render(scene, camera);
    !  };
   
    !  render();
   
    ProcedureReturn Gadget
   
  EndProcedure
 
EndModule

; Demo

Enumeration
  #myWindow
  #myGadget
EndEnumeration

Procedure Main()
 
  OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ThreeJS", #PB_Window_Background )
 
  ThreeJS::Gadget(#myGadget, 0, 0, WindowWidth(#myWindow), WindowHeight(#myWindow))
 
EndProcedure

ThreeJS::Init(@Main())

Posted: **Wed Apr 05, 2017 8:01 am**

this is the same code as above, but with a little bit more SpiderBasic-Syntax:

Code: Select all

EnableExplicit

! var THREE;

DeclareModule ThreeJS
  
  EnableExplicit
  
  Global IsInitialized
  
  Declare Init(Callback)
  Declare Gadget(Gadget, x, y, Width, Height, Flags = 0)
  
  Declare NewScene()
  Declare NewWebGlRenderer()
  Declare RendererSetSize(Renderer, Width, Height)
  Declare NewPerspectiveCamera(Fov.d, Aspect.d, Near.d, Far.d)
  Declare NewBoxGeometry(width, height, depth, widthSegments = #Null, heightSegments = #Null, depthSegments = #Null)
  Declare NewMeshBasicMaterial(Params)
  Declare NewMesh(Geometry = #PB_Ignore, Material = #PB_Ignore)
  Declare SceneAdd(Scene, Object)
  Declare AddRenderer(Gadget, Renderer)
  
EndDeclareModule

Module ThreeJS
  
  EnableExplicit
  
  Macro GetSelector
    !  var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
  EndMacro
  
  Procedure Init(Callback)
    
    ! require(["https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"], 
    !   function(t) {
    !      THREE = t;
    IsInitialized = #True
    !     v_callback();
    !   }
    ! );   
    
  EndProcedure  
  
  Procedure Gadget(Gadget, x, y, Width, Height, Flags = 0)
    
    If Gadget = #PB_Any
      Gadget = ContainerGadget(Gadget, x, y, Width, Height, Flags)
    Else
      ContainerGadget(Gadget, x, y, Width, Height, Flags)
    EndIf
    
    CloseGadgetList()
    
    ProcedureReturn Gadget
    
  EndProcedure
  
  Procedure NewScene()
    ! return new THREE.Scene();
  EndProcedure
  
  Procedure NewWebGlRenderer()
    ! return new THREE.WebGLRenderer();
  EndProcedure
  
  Procedure RendererSetSize(Renderer, Width, Height)
    !  v_renderer.setSize( v_width, v_height );
  EndProcedure
  
  Procedure NewPerspectiveCamera(Fov.d, Aspect.d, Near.d, Far.d)
    
    ; https://threejs.org/docs/index.html?q=camera#Reference/Cameras/PerspectiveCamera
    
    ; fov — Camera frustum vertical field of view.
    ; aspect — Camera frustum aspect ratio.
    ; near — Camera frustum near plane.
    ; far — Camera frustum far plane.
    
    ! return new THREE.PerspectiveCamera(v_fov, v_aspect, v_near, v_far);
    
  EndProcedure
  
  Procedure NewBoxGeometry(width, height, depth, widthSegments = #Null, heightSegments = #Null, depthSegments = #Null)
    
    ; https://threejs.org/docs/index.html?q=BoxGeometry#Reference/Geometries/BoxGeometry
    
    ; width — Width of the sides on the X axis.
    ; height — Height of the sides on the Y axis.
    ; depth — Depth of the sides on the Z axis.
    ; widthSegments — Optional. Number of segmented faces along the width of the sides. Default is 1.
    ; heightSegments — Optional. Number of segmented faces along the height of the sides. Default is 1.
    ; depthSegments — Optional. Number of segmented faces along the depth of the sides. Default is 1.  
    
    !  return new THREE.BoxGeometry( v_width, v_height, v_depth );  
    
  EndProcedure
  
  Procedure NewMeshBasicMaterial(Params)
    
    ; https://threejs.org/docs/index.html?q=MeshBasicMaterial#Reference/Materials/MeshBasicMaterial
    
    ! return new THREE.MeshBasicMaterial( v_params );
    
  EndProcedure
  
  Procedure NewMesh(Geometry = #PB_Ignore, Material = #PB_Ignore)
    
    If Geometry = #PB_Ignore
      ! v_geometry = undefined;
    EndIf
    
    If Material = #PB_Ignore
      ! v_material = undefined;
    EndIf
    
    ; https://threejs.org/docs/index.html?q=Mesh#Reference/Objects/Mesh
    
    ; geometry — (optional) an instance of Geometry or BufferGeometry. Default is a new BufferGeometry.
    ; material — (optional) a Material. Default is a new MeshBasicMaterial with a random color.    
    
    ! return new THREE.Mesh( v_geometry, v_material );
    
  EndProcedure
  
  Procedure SceneAdd(Scene, Object)
    !  v_scene.add( v_object );
  EndProcedure
  
  Procedure AddRenderer(Gadget, Renderer)
    GetSelector
    ! selector.append( v_renderer.domElement );
  EndProcedure
  
EndModule

; Demo

Enumeration
  #myWindow
  #myGadget
EndEnumeration

Global Cube 
Global Renderer 
Global Scene 
Global Camera 

Procedure Render()
  
  !  requestAnimationFrame( f_render );
  !  v_cube.rotation.x += 0.05;
  !  v_cube.rotation.y += 0.05;
  !  v_renderer.render(v_scene, v_camera);
  
EndProcedure

Procedure Main()
  
  OpenWindow(#myWindow, #PB_Ignore, #PB_Ignore, 800, 600, "ThreeJS", #PB_Window_ScreenCentered)
  
  ThreeJS::Gadget(#myGadget, 0, 0, WindowWidth(#myWindow), WindowHeight(#myWindow))
  
  Protected Geometry 
  Protected MeshBasicMaterialParams
  Protected Material 
  
  Scene = ThreeJS::NewScene()
  
  Camera = ThreeJS::NewPerspectiveCamera(75, GadgetWidth(#myGadget) / GadgetHeight(#myGadget), 0.1, 1000)
  
  Renderer = ThreeJS::NewWebGlRenderer()
  
  ThreeJS::AddRenderer(#myGadget, Renderer)
  
  ThreeJS::RendererSetSize(Renderer, GadgetWidth(#myGadget), GadgetHeight(#myGadget))
  
  Geometry = ThreeJS::NewBoxGeometry(1, 1, 1)
  
  ! v_meshbasicmaterialparams = { color: 0x00ff00, wireframe: true };
  
  Material = ThreeJS::NewMeshBasicMaterial(MeshBasicMaterialParams)
  
  Cube = ThreeJS::NewMesh(Geometry, Material)
  
  ThreeJS::SceneAdd(Scene, Cube)
  
  !  v_camera.position.z = 5;
  
  Render()
  
EndProcedure

ThreeJS::Init(@Main())

Greetings ... Peter

Posted: **Fri Apr 07, 2017 9:26 am**

It looks like SB team could probably add 3D and maybe even physics without reducing too much time from patch cycling existing features. There seems to be ready libraries out there.

My only thing is it should be one with formats with good pipelines and not something with buggy exporters like PB kind of has.. Something with native exports and that is indy friendly like AC3D and Zbrush and MakeHuman.

Posted: **Tue Apr 11, 2017 11:36 am**

I'd just do a webgadget and show my three-js.html stuff inside that. Complete isolated control without using it from spiderbasic ide.

Your three-je.html could use parameters using # in the url, so it can take parameters from your spiderbasic program.

Example in url and some parameters.
"3d/3d_viewer.html#d_55t22a_rem#2.8|0.0004"

Where "d_55t22a.rem" is my model
Where 2.8 was just a zoomfactor
Where 0.0004 was just an rgbshift factor

Posted: **Sat Apr 15, 2017 8:58 am**

JS canvas based libraries in theory should be simple for SB team to implement though. Else I wouldn't even support the idea in fear it would delay core updates. Even in raw JS it's typically just include and init.

Slightly off topic: Really cool long term goal: Replace PB subsystem and SB HTML5, Android, and IOS libs with Vulkan and a easy-export format for worlds and models. Future proof and far more efficient than current. I think you have to wait for WebGL support in Vulkan which is fore-sure coming.

Vulkan can basically do what next-gen AAA game engines can do but at like 30% of the footprint in some cases.. It's suppose to replace OpenGL and is already officially supported in graphics hardware.

What SB team shouldn't have to do that can be done and is really cool: Physics and AI.

Posted: **Thu May 04, 2017 4:53 pm**

Hello,

Maybe an include of https://www.babylonjs.com/ would also be a nice Option.

Regards

SpiderBasic

Native 3D support like three.js or something similar

Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar

Re: Native 3D support like three.js or something similar