WebGL - Revision history

Aidan Williamson: /* Primitive example from Aidan Log */

2019-09-23T21:15:12Z

Primitive example from Aidan Log

← Older revision		Revision as of 21:15, 23 September 2019
Line 25:		Line 25:
	##Also can add antialiasing if desired. See video:		##Also can add antialiasing if desired. See video:
	##{{YoutubePopup\|18nL5wN8Pbg}}		##{{YoutubePopup\|18nL5wN8Pbg}}
	#Optional: make an index.html file		#Optional: make an index.html file. Embedding the index seems to be more stable.
	#Create a github.io page		#Create a github.io page
	##In your github account: Make a new repo with name ''username''.github.io		##In your github account: Make a new repo with name ''username''.github.io
	###My username is CabbageBreath		###My username is CabbageBreath
	##Upload your project files to that repo		##Upload your project files to that repo
	##<nowiki>https://username.github.io/modelname.html</nowiki> is where the project will be hosted		##<nowiki>https://username.github.io/modelname.html</nowiki> is where the project will be hosted.
	##Mine is cabbagebreath.github.io/~~WebGL%Pendulum~~.html This produces the below render if you embed it using an iframe		##Mine is cabbagebreath.github.io/Index.html This produces the below render if you embed it using an iframe

	<html><iframe src="https://cabbagebreath.github.io/~~WebGL%20Pendulum~~.html" width="~~200~~" height="~~200~~"></iframe></html>		<html><iframe src="https://cabbagebreath.github.io/Index.html" width="1000" height="500"></iframe></html>

			'''Note:''' Embedding the file directly worked for a few hours then starting giving 400 bad request errors. Embedding the index.html seems to be a better option for now.

	=Links=		=Links=

Aidan Williamson at 16:29, 23 September 2019

2019-09-23T16:29:52Z

← Older revision		Revision as of 16:29, 23 September 2019
Line 14:		Line 14:

	<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>		<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>

			==Primitive example from [[Aidan Log]]==
			Playing around with WebGL stuff. Here's a VERY primitive workflow:
			#Starting with A2+ assembly file
			#Select all on object tree
			#Export to WebGL.
			#Put resulting .html file in a folder with a subfolder containing three.min.js
			#Open resulting .html file in a text editor
			#Edit three.min.js source as per [[Michel_Log\|Michel's]] instructions
			##Also can add antialiasing if desired. See video:
			##{{YoutubePopup\|18nL5wN8Pbg}}
			#Optional: make an index.html file
			#Create a github.io page
			##In your github account: Make a new repo with name ''username''.github.io
			###My username is CabbageBreath
			##Upload your project files to that repo
			##<nowiki>https://username.github.io/modelname.html</nowiki> is where the project will be hosted
			##Mine is cabbagebreath.github.io/WebGL%Pendulum.html This produces the below render if you embed it using an iframe

			<html><iframe src="https://cabbagebreath.github.io/WebGL%20Pendulum.html" width="200" height="200"></iframe></html>


	=Links=		=Links=

Marcin: /* Intro */

2019-08-21T00:38:59Z

Intro

← Older revision		Revision as of 00:38, 21 August 2019
Line 1:		Line 1:
	=Intro=		=Intro=

	WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.		WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

			=Update=
			First explosion view model on gitlab and embedded.

			*The code https://gitlab.com/mi_shell/models_online/tree/master/ose_webgl
			*The model https://mi_shell.gitlab.io/models_online/ose_webgl/d3d_explosion.html
			*Embedded https://wiki.opensourceecology.org/wiki/Michel_Log

	=Example=		=Example=

Marcin: /* Example */

2019-08-15T21:26:42Z

Example

← Older revision		Revision as of 21:26, 15 August 2019
Line 4:		Line 4:

	=Example=		=Example=
	[[File:webglexample.~~png~~]]		[[File:webglexample.jpg\|200px]]

	<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>		<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>

Marcin: /* Example */

2019-08-15T21:24:46Z

Example

← Older revision		Revision as of 21:24, 15 August 2019
Line 4:		Line 4:

	=Example=		=Example=
			[[File:webglexample.png]]

	<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>		<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>

Marcin at 01:25, 15 August 2019

2019-08-15T01:25:43Z

← Older revision		Revision as of 01:25, 15 August 2019
Line 1:		Line 1:
			=Intro=

	WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.		WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins.

			=Example=

			<html><iframe width="560" height="315" src="https://www.youtube.com/embed/18nL5wN8Pbg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></html>

	=Links=		=Links=

Marcin: /* =Aug 30, 2017 */

2019-07-28T19:28:25Z

=Aug 30, 2017

@@ Line 38: / Line 38: @@
-==Aug 30, 2017=
+==Aug 30, 2017==
 Hi,
 it's taking a bit longer than anticipated but one of these days the webGL template will be ready. I had to get used to the new setup and test the new features of the exporter.
@@ Line 48: / Line 48: @@
 [[File:exlosion.png]]

Marcin: /* Communications */

2019-07-28T19:26:45Z

Communications

← Older revision		Revision as of 19:26, 28 July 2019
Line 36:		Line 36:
	Or does it necessarily involve lots of iterating & expertise with		Or does it necessarily involve lots of iterating & expertise with
	FreeCAD, Blender, Gimp, and coding in JS?		FreeCAD, Blender, Gimp, and coding in JS?


			==Aug 30, 2017=
			Hi,
			it's taking a bit longer than anticipated but one of these days the webGL template will be ready. I had to get used to the new setup and test the new features of the exporter.

			A little preview in attachment.
			Cheers,

			Michel.

			[[File:exlosion.png]]

Marcin: /* =Sun Jul 28, 2019 */

2019-07-28T19:24:31Z

=Sun Jul 28, 2019

← Older revision		Revision as of 19:24, 28 July 2019
Line 13:		Line 13:

	=Communications=		=Communications=
	==Sun Jul 28, 2019=		==Sun Jul 28, 2019==
	*Michel,		*Michel,

Marcin at 19:20, 28 July 2019

2019-07-28T19:20:44Z

← Older revision		Revision as of 19:20, 28 July 2019
Line 11:		Line 11:
	*[[WebGL Export from Sweet Home 3D]]		*[[WebGL Export from Sweet Home 3D]]
	*Hydronics control panel - [https://www.openbuildinginstitute.org/portfolio/hydronic-control-panel/] - actual WebGL in wiki - [[Open Source Hydronic System]]		*Hydronics control panel - [https://www.openbuildinginstitute.org/portfolio/hydronic-control-panel/] - actual WebGL in wiki - [[Open Source Hydronic System]]

			=Communications=
			==Sun Jul 28, 2019=
			*Michel,

			Do we have any documentation anywhere that describes how to go from a
			FreeCAD file -> WebGL model like the one on the OBI website:

			*
			https://www.openbuildinginstitute.org/wp-content/3Dmodels/hydronics_panel/

			Your work looks really amazing! We're launching an Open Source
			Everything e-commerce store for selling our products, such as the D3D --
			Open Source Ecology's 3D Printer. We would love to add corresponding
			WebGL models on the product pages so customers know exactly what items
			we'll be shipping them and how it will be assembled.

			Is there some automated process for generating these files like
			dat.gui.min.js?

			*
			https://www.openbuildinginstitute.org/wp-content/3Dmodels/hydronics_panel/js/dat.gui.min.js

			Or does it necessarily involve lots of iterating & expertise with
			FreeCAD, Blender, Gimp, and coding in JS?