Announcement

Collapse
No announcement yet.

Unreal.js

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    @mflux - Currently javascript generated class has limited life time(created at runtime), it isn't visible to blueprint. But you can expose JS functions by overriding pre-existing blueprint class. I think this will work for your case.
    Last edited by nako_sung; 11-26-2015, 03:57 AM.

    Comment


      #17
      Nako, yep! I've done exactly that.
      1. I created a blueprint that has variables for vertices, triangles, normals, uvs, and sends it to a procedural mesh
      2. I extended this BP class in Javascript, and replaced the base-class's vertices/faces etc with values generated from THREE.js
      3. And finally I have a V8 instance BP running in the level


      The BP

      Click image for larger version

Name:	meshgraph.png
Views:	2
Size:	140.2 KB
ID:	1093990

      The JS code
      Code:
          // Blueprint class can be subclassed!    
          class ProceduralJSMesh extends Blueprint.Load('/Game/ProceduralBox').GeneratedClass {
              // constructor
              ctor() {
                  // Subobject initialization, property initialization 
                  this.bAlwaysRelevant = true
                  console.log( 'constructing procedural js mesh' );
              }
              
              // declare UPROPERTY's here
              // ; this.XXXXX/*[attribute+]+type*/;
              properties() {                                    
              }    
              
              ReceiveBeginPlay() {                                                                
                  
                  const geo = new THREE.BoxGeometry( 200, 200, 200, 1, 1, 1 );                        
                  
                  this.vertices = geo.faces.reduce( function( arr, f ){         
                      arr.push( threeVertexToUEVertex( geo.vertices[ f.a ] ) );
                      arr.push( threeVertexToUEVertex( geo.vertices[ f.b ] ) );
                      arr.push( threeVertexToUEVertex( geo.vertices[ f.c ] ) );                
                      return arr;
                  }, [] );
                  
                  this.triangles = geo.faces.reduce( function( arr, f ){
                      arr.push( f.a );
                      arr.push( f.b );
                      arr.push( f.c );                               
                      return arr;
                  }, [] );
                  
                  this.normals = geo.faces.reduce( function( arr, f ){                     
                      arr.push( threeVertexToUEVertex( f.vertexNormals[ 0 ] ) );
                      arr.push( threeVertexToUEVertex( f.vertexNormals[ 1 ] ) );
                      arr.push( threeVertexToUEVertex( f.vertexNormals[ 2 ] ) );                    
                      return arr;
                  }, [] );
                  
                  this.uvs = geo.faceVertexUvs[0].reduce( function( arr, uvs ){                
                      arr.push({
                          X: uvs[2].x,
                          Y: uvs[2].y
                      });                
                      return arr;                
                  }, [] );
             
                  super.ReceiveBeginPlay();
                  
                  console.log( 'vertices length', this.vertices.length );
                  console.log( 'triangles length', this.triangles.length );
                  console.log( 'normals length', this.normals.length );                                                  
              }
      The result:
      Click image for larger version

Name:	generatedcube.png
Views:	2
Size:	671.7 KB
ID:	1093991

      Damnit I'm so close. The winding ordering for faces is wrong, but I've tried for a few hours to fix this by flipping the vertices around with no success.

      Anyway, this has a lot of promise, gonna keep going.

      Comment


        #18
        I've been following this topic for some days, cool thing Unreal JS is
        As per the latest additions by Nako (check github!) the asset references can be resolved easily by just adding the class in the properties:

        Click image for larger version

Name:	asset_ref.jpg
Views:	1
Size:	91.1 KB
ID:	1094078

        this will help the cooking process to keep the references and also provides a simple access which is cool!

        What i am missing is the ability to include the *.js files in the PAK. I unfortunately only got the script being executed if i copy them to the cooked folder:

        Click image for larger version

Name:	package.jpg
Views:	1
Size:	38.0 KB
ID:	1094079

        Including the scripts into the PAK does not work, or did i just messed up something here?
        * Sharp and responsive Temporal Anti-Aliasing tips and tricks
        * Pitch-shift source effect (DSP) over the network (VOIP)
        * My Portfolio and Developer Blog

        Comment


          #19
          I'll investigate it.

          Comment


            #20
            IntelliSense error

            Click image for larger version

Name:	HX1AN%[Z4UW`NVW)M%B8]Z6.png
Views:	1
Size:	19.7 KB
ID:	1094172
            IntelliSense error,How to VS 2013 Use The Unreal.js IntelliSense?
            Attached Files
            Last edited by nero; 11-29-2015, 02:25 AM.

            Comment


              #21
              @nero Unfortunately VS2013 doesn't support autocompletion for javascript. Unreal.js provides *.d.ts which can be read by "Visual Studio Code". If you are coding with Typescript, VS2015 will be fine.

              Typescript support for VS 2015 can be downloaded inside VS2015. After installing that, writing *.ts instead of *.js will give you almost perfect auto completion, because TypeScript is super set of JavaScript.

              * I updated *.d.ts which loosened weight to make IDE happier (because Visual Studio Code seemed not to be capable of handling large *.d.ts). So please check out new *.d.ts (/Examples/Content/Scripts/Typings)
              Last edited by nako_sung; 11-29-2015, 07:26 AM.

              Comment


                #22
                I'm copying my message from reddit to here so maybe you can see it faster.

                I'm using ue4 from the start with blueprints cuz i'm mostly a technical artist. I'm learning c++ too. But when i see unreal.js, it made me excited cuz maybe, just maybe i won't need to learn more c++ for ue4. Here are some of my questions. (Bear that in mind cuz im not a programmer, sorry for noobish questions.)

                1. As i see you only support for visual studio with autocomplete. Is it possible to use webstorm or another IDE like that with that type definition file?

                2. Since you say, you only use unreal.js for rapid prototyping and editor extensions, is it really slow for real games when you compare it to blueprint?

                3. I can see the most of it's advantages comparing to blueprint (like having full access to whole api) but what are the disadvantages? I'm sure there are a lot of people like me that only uses blueprint and doesn't know much about how things work under hood and wondering how is unreal.js compared to blueprint or c++ for unreal engine.

                Btw, thanks for bringing more awesomeness to ue4.

                Comment


                  #23
                  @theknoppix

                  > 1. As i see you only support for visual studio with autocomplete. Is it possible to use webstorm or another IDE like that with that type definition file?

                  Javascript autocompletion is brand-new feature from Microsoft, which is only available with MS products currently (as far as I know).

                  > 2. Since you say, you only use unreal.js for rapid prototyping and editor extensions, is it really slow for real games when you compare it to blueprint?

                  No. Actualy it will be much faster than Blueprint, but it requires JIT to be completed in run time, which will introduces 'warm-up' overhead. Latest version of V8 provides 'snapshot' of memory, which allows bulk-loading. I think there are some rooms to overcome this overhead.

                  > 3. I can see the most of it's advantages comparing to blueprint (like having full access to whole api) but what are the disadvantages? I'm sure there are a lot of people like me that only uses blueprint and doesn't know much about how things work under hood and wondering how is unreal.js compared to blueprint or c++ for unreal engine.

                  I think most disadvantages are what I wrote above, and Unreal.js has no mobile port currently, this seems to be a major disadvantage of current version.

                  Thanks!

                  Comment


                    #24
                    Check it out Nako THREE.js TorusKnot now in Unreal:

                    Click image for larger version

Name:	InefJR1.jpg
Views:	2
Size:	177.1 KB
ID:	1094227

                    It's also really cool that saving will auto-update triggering the Blueprint to re-initialize the mesh. So as soon as I hit save in Sublime, UE4 immediately updates the mesh. Really really cool
                    Attached Files

                    Comment


                      #25
                      Originally posted by nako_sung View Post
                      ... and Unreal.js has no mobile port currently, this seems to be a major disadvantage of current version.
                      Just ported unreal.js to android this weekend, well, it's hardly a port since there's only couple lines of change. (Most time was spent on building V8 properly)
                      | twitter | github | #ue4tip

                      Comment


                        #26
                        @mflux it's amazing,
                        @nate Could you PR your android build?

                        Comment


                          #27
                          @nako_sung, sure, will make a PR later today.
                          | twitter | github | #ue4tip

                          Comment


                            #28
                            Originally posted by nako_sung View Post
                            @theknoppix

                            > 1. As i see you only support for visual studio with autocomplete. Is it possible to use webstorm or another IDE like that with that type definition file?

                            Javascript autocompletion is brand-new feature from Microsoft, which is only available with MS products currently (as far as I know).

                            > 2. Since you say, you only use unreal.js for rapid prototyping and editor extensions, is it really slow for real games when you compare it to blueprint?

                            No. Actualy it will be much faster than Blueprint, but it requires JIT to be completed in run time, which will introduces 'warm-up' overhead. Latest version of V8 provides 'snapshot' of memory, which allows bulk-loading. I think there are some rooms to overcome this overhead.

                            > 3. I can see the most of it's advantages comparing to blueprint (like having full access to whole api) but what are the disadvantages? I'm sure there are a lot of people like me that only uses blueprint and doesn't know much about how things work under hood and wondering how is unreal.js compared to blueprint or c++ for unreal engine.

                            I think most disadvantages are what I wrote above, and Unreal.js has no mobile port currently, this seems to be a major disadvantage of current version.

                            Thanks!
                            Wow it looks quite awesome to me. Thanks a lot for working on something like this and spending time to answer all of my questions.

                            Comment


                              #29
                              @nate thank you for PR It works!
                              @theknoppix happy hacking!
                              Last edited by nako_sung; 11-30-2015, 06:44 PM.

                              Comment


                                #30
                                I managed to implement pseudo-livereload by getting source code from gist.github.com which is triggered by clicking 'reload button'. It's fun!

                                Comment

                                Working...
                                X