Forum Replies Created
-
AuthorPosts
-
CrunchCustomerAlright so I got html2canvas.js working with verge! I think….
https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:bddc09b7fe/applications/canvascap/canvascap.html
HTML2canvas doesn’t take a pixel based snapshot (which I would prefer as that would be an exact representation) but rather generates the image from the DOM using some form of magic.. so things can get a little wonky with how they appear, also was getting error:
v3d.WebGLState: DOMException: “The operation is insecure.”
When I tried to take a screen shot of dynamically created HTML that I created via puzzles.
So far it appears promising…
*Notes for demo above – type into the html form then click the snapshot button, it should replace the image texture on the plane. I used the first-person camera (with rotation off) and forgot that cam type has keyboard short cuts built in, so if things move around when typing something with the letters w, a, s, d keys, that is why.
Clicking on the cube clones the Kanban plane image. That was the start of my next experiment as I would like to be able to create new “notes” on the fly but I think doing that is beyond my pay grade.
Anyone know how I can create new objects (a plane with a texture image – a texture image created by html2canvas) on the fly? I want to be able to control them also, like assigning each new one a ‘on drag – move’ handler.
CrunchCustomerOk, so can I please have the recipe for getting the camera to dolly in and out with scroll wheel?
Most of my apps I use a no-control cam that is perpendicular to my scene. To get a mouse wheel zoom, I usually add some type of contraption like the one in the screenshot attached (which works off camera animations). But it always sucks. Never as smooth or as responsive as with the built version to the orbit cam.
If I could get the code or a way to replicate zoom on non-control cam that would be great, thanks!
CrunchCustomerCyber-Monday special?
CrunchCustomerScalar it sounds like you want what I also want – a “responsive” 3d scene similar to what you can do with webpages (via HTML/CSS, media queries etc) to make them “responsive”. (i.e things automatically adjust/’scale’ to accommodate the smaller screen size of mobiles including switching between mobile portrait and mobile landscape)
unfortunately, just like when you frame a photograph of a football team in your camera view finder and everything looks good, if you then suddenly flip the camera on its side into portrait mode, you’re going to cut a lot of players out of the shot.. The only solution is to back way up… and by the time you back out far enough, everyone’s faces are so small.
That’s the problem I run into when I make a beautiful looking app on desktop then bring it up on my phone in portrait only to find everything is so far away its hard for my fat fingers to navigate.
Aside from programming the app to automatically adjust the actual positions of objects (similar to telling your football players to get up on each others shoulders to all squeeze nicely into the shot), which isn’t a very practical option (it technical becomes a separate scene), the only option is to swap to a different camera/angle.
I’ve done something similar using techniques discussed here
Basically you just have to write some procedures to “survey” the scene on start, and re-size events and use that to figure which camera angle/position, fits best to corresponding screen sizes/orientation.
Unfortunately, mobile screen real estate (relatively speaking) will always have its drawbacks.
CrunchCustomeroh lord… how embarrassing i didn’t see that. thanks as always Yuri!
CrunchCustomerFirst time using the take screenshot puzzle.. did something change or am i doing it wrong? I follow directions above (and create a myDiv element) and all i get is a solid Black image. I am using Firefox quantum. Latest Verge3d build.
CrunchCustomerThanks for the tips Yuri. What I ended up doing (so I can test locally) is I changed the configuration file in Xaamp to point to my document root being my Verge applications directory, instead of the default c:/xampp/htdocs folder
Directions I found here: http://www.javadtaghia.com/clam/xampp-linux-windows/howtochangexampplocalhosttoanotherfolderoutsidexamppfolder
I then add some PHP code instead my projectname.html file and rename it with a .php extension. For testing I have xampp running and chrome (via xampp) open pointed at the file I am working on, and have firefox (my default browser for verge3d app) open where I can experiment in puzzles. Then I just tab over to chrome and refresh to quickly view the results.
Seems to be working great so far. The reason I had to get into PHP (and Mysql) in the first place is to be able to make content available only to registered users (via a login and registrations pages)
I wish there was a puzzle and ‘easy’ button for that shit!
My experiments so far show that trying to ‘envoke’ php code (even on via a local server) within puzzles isn’t going to work. I am I correct there?
For now, the code (PHP + mySQL) I am using (more like tweaking as I am not smart enough to write it) to manage logins creates a few Session variables like username and user id. I’d like to be able to access those in puzzles so for example, when a user clicks a 3d cube object,I have some HTML based puzzles that conjure up a modal window that gives a personalized message like “Great job <username>!”
To do that, I need to access the Session variables in puzzles.
Is there an easy way to do this?
So far what I have figured out, is that after the user logins I assign the Session variable value to a hidden html element, like this
<?php echo “<input type=’hidden’ id=’username’ value='”.$_SESSION[‘username’].”‘/>”;?>
Then in puzzles, I use the html get attribute puzzle to get the value of the element with id “username” and assign it to a new variable inside puzzles.
Which works, but is there a better way of doing this? Like any way to capture Session variables via puzzles or custom javascript?
ThanksCrunchCustomerOutstanding!! Good work guys!!! Thanks for your support!
CrunchCustomerOh my… let us not forget a link to a live working demo
here ya goes:CrunchCustomerand the last few figures.. i probably should have just done a screencast tutorial.
CrunchCustomerD3pixel,
Here is a solution for what I believe is your request here.
Step One: Create your project
First thing I usually do after my project is created, is get into puzzles and under the init tab (I find it best to add HTML elements in this section, although the main tab usually works fine), I add an add HTML div puzz then cut n paste into the
innerHTML attribute this simple markup:<button id=”but01″> Position 1</button>
<button id=”but02″> Position 2</button>
<button id=”but03″> Position 3</button>
<button id=”but04″> Position 4</button>(See Figure 2)
Tip: keep a scratch notepad file on your desktop with some generic HTML markup bits like this one handy for reuse in other test projects
With our ‘tween-to-tween-camera’ effect switches in place, go into blender.
Step 2 (optional*): Switch to front orthograpnic view (num pad 1) then align active camera to view (ctrl-alt-numpad )
*step 2 is not required, I usually do this to get my orientation/bearings straight in my head when I start a scene.
Tip: If you just have the default blender cube in your scene, you should probably add a few more objects to make it more appealing for the multiple number of cams we are going to be using.
Step 3: Add an empty to your scene. Select your camera, add a track-to constraint, select empty as your target with settings in (Figure 3)
From cam view (0 on numpad), select your empty and drag it around.Your cam view should track/follow (“look at”) the empty. Moving your cam around in combination with your target empty, position your Cam #1 as you see fit.
Tip: If you didn’t know, when you create a new default scene in blender, it comes standard with an orbit cam and the default “target: from object” field in verge settings (under cam properties tab) is blank. When blank, your Verge3d scene defaults the camera targeted to the global origin point.
Step 4: With your cam and empty selected, object > duplicate objects (shift D). Drag out the duplicate a bit to provide separation. Repeat process 2 more times so you have a total of 4 cameras in your scene. (fig 8)
Step 5: Select your first copy of the cam (should be Camera.001, then click view > cameras > Set active object as camera (ctrl numpad 0). Moving your now active Camera.001 around in combination with your corresponding target empty (Empty.001), position your Cam #2 to taste.
Step 6: Repeat this process for each of your remaining cams. (end result Figure 9)
Step 7: With the cams all set how you want, go back to your original Cam #1 (camera). Ctrl numpad 0 to make sure it selected as default camera for the scene. IMPORTANT. Next we need to remove the track to constraint on this, and only this camera. Otherwise Cam #1 is going to be locked to our first empty and won’t tween properly in our puzzles setup.
BUT BEFORE removing the track constraint, we first need to apply it (otherwise, the cam snaps back out of position the moment you remove the track to constraint). To do this, with your main Cam selected, from the menu Object > apply > visual transform. Now it is safe to remove the track to constraint.
Step 8: One last thing to do in Blender. Opps, I lied. Two last things:
1, Go back into the camera properties tag for your main camera (Cam #1) and make sure you fill in that blank to your original Empty (Figure 9.5)
2.With Cam #1 selected (camera), right click for the pop up menu then select Snap Cursor to Selected. (Figure 10) Add another empty. This empty will be the marker for our original camera location after we start moving the cam around in puzzles.
Step 9: Save and Export the updated scene gtlf file.
Step 10: Close down your puzzles if left the window open and re-open it to account for the new objects you added to scene in updated gtlf export.
Step 10: Making sure you are back in the “main” tab of the puzzles interface, add these 4 puzzles (see figure 11). Notice the pattern of cam001 being assigned empy001, and so on, with exception of the first button for Cam #1 which is a little different since Cam #1 is the only camera that is actually moving (or active).
Yes that is right, its all an illusion, many different camera angle but performed by only 1 camera,https://www.soft8soft.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif
Pressing the 1st button sets to Cam #1 original position, whose position was held by that extra Empty 4 marker and looking at the original Empty.
Step 11 BONUS: See if you can find my easter egg… hint, click on the glowing sphere to see someone as happy as you are all now with the knowledge of being able to set up a quasi-multicam scene with perfect tweening.
Haha-Crunch
https://www.soft8soft.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gifCrunchCustomerIf you mean make your verge3d canvas transparent on a webpage, go into puzzles and under the init tab, drag out the “configure application” puzzle onto the screen. then click the “transparent background” box.
CrunchCustomerD3 Pixel – Lets get #2 out of the way first. Are you testing/running your puzzles in the same browser window as you are working with puzzles in? In other words, are you using that “play” button in the puzzles window (the one right next to the save button?) for testing. If so, that has to be a pain.
I never use that “play” button. I open puzzles in one browser tab than in another tab I load the project.html (or index html). I save puzzles then jump to project.html (or index.html) tab and just hit refresh. So much easier and faster.
Not sure how you have your browser configured but mine is setup to open new links in new tabs.
As for question #1… I might soon publish a quick tutorial on camera movement tips and tricks as I am in process right now of documenting the results of all my “trial and errors” camera tricks for a project I am trying to wrap up right now.
Stay tuned…
As for Q #3.. not sure about that as I haven’t had to tackle any animation playhead position issues.. yet.. but I know I will. As of the moment, I don’t see any puzzles that can fetch the current animation frame property.
CrunchCustomer“pretty sneaky sis!”
lol.. Great job!CrunchCustomerI just got my hands greasy with the grease pencil.. oh how much fun would to have have access that in Verge3d projects.. not sure if that goes on the requested features list or the stop-dreaming list.
Ive been experimenting a little with SVG animations via Bodymovin plugin for After Effects.(then will try to bring them into my Verge3d scene)….but Blender’s 2.8 grease pencil.. wow.. one stop shopping would be nice.
-
AuthorPosts
