论坛

由用户创建的信息 smokedawg
04 February 2016 00:43
Ok i think this is the solution!

https://github.com/PixelsCommander/HTML-GL

I also found

http://people.mozilla.org/~roc/rendering-HTML-elements-to-canvas.html

But i just have no clue whats going on However I did notice there was a webgl conference couple years ago about rendering html dom subtree as a texture

https://www.youtube.com/watch?v=6YYFsmjCKX4&feature=player_detailpage#t=403s

I hope this helps out a bit. I also looked into voodoo.js which seemed to be able to mix webgl and html perfectly but there discontinued and website is offline.
03 February 2016 19:28
Looking at the webgl inspector all vertex and fragment shaders have nothing to do with the iframe material.. I looked at voodoo.js mixing webgl with html but that got discontinued it seems… Anyway ill update this post if i have make any progress in making a iframe plane fixed inside of blend 4 web scene.
03 February 2016 12:48
** UPDATE **

From further investigation it seems the camera transform needs to be in sync with the users input in the tquery which seems dumb to do, but since it is using a lambert material there might be a way to assign an object the material and just hide the extra layer getting the material for now.

In any case if anyone is going to go forward with trying to embed an iframe with the css3drenderer and tquery here are two lines of code to note.



//make links in web pages clickable by setting z-index to negative -1
rendererMain.domElement.style.zIndex = -1;

//remove camera control to fix the iframe in place
world.removeCameraControls();



I might try to sync the camera translation to the b4w input and i will try to see if i can assign the material to a plane. Im pretty noob but ill give it a stab.

03 February 2016 02:00
Hey i have linked css3drenderer.js and t-query-bundle.js and have successfully added an iframe inside my blend 4 web json file with the following code inside the canvas divider

<script>
	var world	= tQuery.createWorld().boilerplate().start();
	tQuery.createPlane().addTo(world)
		.scaleBy(16)
		.setBasicMaterial()
			// .wireframe(true)
			// .wireframeLinewidth(3)
			.opacity(0.5)
			.blending(THREE.NoBlending)
			.color('black')
			.back()
		
		
	var rendererCSS	= new THREE.CSS3DRenderer();
	rendererCSS.setSize( window.innerWidth, window.innerHeight );
	rendererCSS.domElement.style.position	= 'relative';
	rendererCSS.domElement.style.top	= 0;
	rendererCSS.domElement.style.margin	= 0;
	rendererCSS.domElement.style.padding	= 0;
	document.body.appendChild( rendererCSS.domElement );

	THREEx.WindowResize.bind(rendererCSS, world.camera().get(0));		

	// put the mainRenderer on top
	var rendererMain	= world.tRenderer();
	rendererMain.domElement.style.position	= 'relative';
	rendererMain.domElement.style.top	= 0;
	rendererMain.domElement.style.zIndex	= 1;
	rendererCSS.domElement.appendChild( rendererMain.domElement );

	var element	= document.createElement('iframe')
	element.src	= 'https://apprtc.appspot.com/r/707795761'
	element.style.width = '1024px';
	element.style.height = '1024px';

	// var element = document.createElement( 'div' );
	// element.style.width = '100px';
	// element.style.height = '100px';
	// element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();

	var sceneCSS	= new THREE.Scene();
	var objectCSS 	= new THREE.CSS3DObject( element );
window.objectCSS	= objectCSS
	objectCSS.scale.multiplyScalar(1/63.5)
	sceneCSS.add( objectCSS );

	world.loop().hookPostRender(function(delta, now){
		rendererCSS.render( sceneCSS, world.tCamera() );
	})
</script>



It really is just like an extra layer of webgl in the canvas with a transparent back ground but if i find a way to disconnect the camera controls and fix it in position some where in the code (late right now) while i wander in blend 4 web scene it is a temporary solution for someone.

Original demonstration of the website inside webgl -

http://learningthreejs.com/data/2013-04-30-closing-the-gap-between-html-and-webgl/index.html
31 January 2016 13:50
I was wondering when you guys would make a 2d / 3d website! I think integrating html elements would be vital in making blend4web websites, maybe even an iframe material node. This way it would be simple to do things like a webrtc video chat like a 3d skype. Super game changer, keep going guys! I would love to make it to the blend4web first ever conference, maybe in europe?
03 December 2015 01:07
With the announcement from flash being dead i have been looking into webrtc, and i have found a huge massive gold mine of fully functional open source material! https://www.webrtc-experiment.com/ Theres a massive amount of things ranging from screen recording, video to video, video to all, video confrence, record screen file share ect. all done in a couple lines of html5/js… really neat stuff, even white board ect. Just shooting it to you guys, congradulations on the new release a couple days ago you guys are way ahead of the game! you make me too happy, loved the blender conference in october!!
16 September 2015 23:15
Here is the github discussion me and my wife opened with the lead developer https://github.com/aerys/minko/issues/220#issuecomment-140693674 . They have decided to open source the plugin
15 September 2015 22:42
!!
14 September 2015 16:49
Hey guys, round of applause for the amazing progress you all have made over the year its amazing (i love your node logic!!) . My wife came across an open source sdk you guys might be interested in looking into. Aparently this minko engine takes native c++ code and targets various platforms especially web. I thought you guys would like to look into how they are compressing the javascript because i just saw that simple scene video of susan the monkey made in blend4web coming out to 25 mb and in their video from 2012 you can see they took 85 mb scene with 500,000 poly's into 3.5 mb that loads in 4 seconds on adsl 10mbps. https://www.youtube.com/watch?v=Uzj5lkniPVY ( view video @ 4 min :47 seconds )

We attempted to contact minko engine about the minko studio but it is deprecated and they are making a blender plugin .. Maybe you guys can come together, you both seem to have the same goal while you are farther in the integration with blender, they seem to be farther in the compression. Any way once again i dont know too much of what im talking about so just thought this might be usefull knowing the engine is open sourced!
13 February 2015 17:45
Guys, what about html elements? Radios checkboxes text input… Javascript and html go hand in hand. I believe it is vital for developing web apps, as well as a new form of webdesign it would blow blend4web out the water.