Native 3D support like three.js or something similar
Native 3D support like three.js or something similar
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/
https://threejs.org/
Re: Native 3D support like three.js or something similar
-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
-
- Posts: 74
- Joined: Thu May 26, 2016 11:09 am
Re: Native 3D support like three.js or something similar
And who does it ?
Re: Native 3D support like three.js or something similar
the one who brought it uppf shadoko wrote:And who does it ?
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())
Re: Native 3D support like three.js or something similar
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?
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())
Re: Native 3D support like three.js or something similar
this is the same code as above, but with a little bit more SpiderBasic-Syntax:
Greetings ... Peter
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())
Re: Native 3D support like three.js or something similar
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.
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.
-
- Posts: 35
- Joined: Tue Apr 05, 2016 2:14 pm
- Location: Norway
- Contact:
Re: Native 3D support like three.js or something similar
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
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!
Re: Native 3D support like three.js or something similar
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.
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.