Native 3D support like three.js or something similar

Got an idea for enhancing SpiderBasic? New command(s) you'd like to see?
User avatar
T4r4ntul4
Posts: 132
Joined: Wed May 21, 2014 1:57 pm
Location: Netherlands
Contact:

Native 3D support like three.js or something similar

Post by T4r4ntul4 »

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/
falsam
Posts: 280
Joined: Mon May 05, 2014 9:49 pm
Location: France
Contact:

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

Post by falsam »

-1I prefer an independent module or include !

➽ Windows 11 - JDK 1.8 - SB 2.40 - Android 13
http://falsam.com

Sorry for my poor english
pf shadoko
Posts: 74
Joined: Thu May 26, 2016 11:09 am

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

Post by pf shadoko »

And who does it ?
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

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

Post by Peter »

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
User avatar
T4r4ntul4
Posts: 132
Joined: Wed May 21, 2014 1:57 pm
Location: Netherlands
Contact:

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

Post by T4r4ntul4 »

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())
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

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

Post by Peter »

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
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

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

Post by tj1010 »

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.
StoneOakvalley
Posts: 35
Joined: Tue Apr 05, 2016 2:14 pm
Location: Norway
Contact:

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

Post by StoneOakvalley »

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
Registered owner of PureBasic and SpiderBasic :-) Good stuff!
tj1010
Posts: 201
Joined: Wed May 27, 2015 1:36 pm
Contact:

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

Post by tj1010 »

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.
HPW
Posts: 35
Joined: Thu May 04, 2017 4:25 pm

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

Post by HPW »

Hello,

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

Regards
Post Reply