Skip to content

Commit b461191

Browse files
kornerrkornerr
committed
Web readme draft
1 parent 281dfac commit b461191

File tree

5 files changed

+75
-171
lines changed

5 files changed

+75
-171
lines changed

‎1.10.SampleWeb/README.md

Lines changed: 63 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -8,32 +8,12 @@ Table of contents
88
* [1.10.2. Download Emscripten portable SDK archive](#step-dl-emscripten)
99
* [1.10.3. Extract Emscripten portable SDK](#step-extract-emscripten)
1010
* [1.10.4. Install Emscripten portable SDK](#step-install-emscripten)
11-
12-
13-
* [1.10.3. Create build directory](#step-build-dir)
14-
15-
16-
* [1.5.3. Configure the build](#step-cfg)
17-
* [1.5.4. Build application](#step-build)
18-
* [1.5.5. Run application](#step-run)
19-
20-
21-
22-
* [1.9.2. Launch CMake](#step-open-cmake)
23-
* [1.9.3. Specify build and source directories](#step-dirs)
24-
* [1.9.4. Configure osgNativeLib and OSG](#step-cfg)
25-
* [1.9.5. Generate Xcode project file](#step-generate)
26-
* [1.9.6. Build osgNativeLib and OSG](#step-build)
27-
* [1.9.7. Start a new Xcode project](#step-xcode)
28-
* [1.9.8. Select Single View Application](#step-single-view)
29-
* [1.9.9. Select Objective-C language](#step-objc)
30-
* [1.9.10. Finish project creation](#step-proj)
31-
* [1.9.11. Copy combined library](#step-copy-lib)
32-
* [1.9.12. Copy view controller and model](#step-copy)
33-
* [1.9.13. Add copied files to the project](#step-add)
34-
* [1.9.14. Select RenderVC as the main interface](#step-main)
35-
* [1.9.15. Reference osgNativeLib headers](#step-headers)
36-
* [1.9.16. Run the project](#step-run)
11+
* [1.10.5. Patch OpenSceneGraph](#step-patch)
12+
* [1.10.6. Create build directory](#step-build-dir)
13+
* [1.10.7. Configure the build](#step-cfg)
14+
* [1.10.8. Build application](#step-build)
15+
* [1.10.9. Run application (Firefox only)](#step-run-ff)
16+
* [1.10.10. Run application (All browsers)](#step-run)
3717

3818
<a name="overview"/>
3919

@@ -50,7 +30,7 @@ under Linux for Web. The application displays provided model with simple GLSL sh
5030
* OpenSceneGraph model (see [1.1. Create a cube](../1.1.CreateCube))
5131
* CMake and git installations (see [1.2. Install OpenSceneGraph under Linux](../1.2.InstallUnderLinux))
5232
* OpenSceneGraph sources (see [1.2. Install OpenSceneGraph under Linux](../1.2.InstallUnderLinux))
53-
* sample OpenSceneGraph application sources (see [1.5. Build and run sample OpenSceneGraph application under Linux](../1.5.SampleUnderLinux))
33+
* sample OpenSceneGraph application sources (see [1.5. Build and run sample OpenSceneGraph application under Linux](../1.5.SampleUnderLinux)) **alongside OpenSceneGraph sources**
5434

5535
<a name="video"/>
5636

@@ -123,185 +103,106 @@ Watch the video to see all details.
123103
**Note**: the above commands come from the
124104
[official Emscripten installation instructions](http://kripken.github.io/emscripten-site/docs/getting_started/downloads.html).
125105

106+
<a name="step-patch"/>
126107

108+
1.10.5. Patch OpenSceneGraph
109+
----------------------------
127110

111+
![Screenshot](readme/f?.png)
128112

113+
**Note**: this step is only necessary if my
114+
[osgemscripten pull request](https://github.com/openscenegraph/OpenSceneGraph/pull/267)
115+
is still not accepted into upstream OpenSceneGraph.
129116

117+
As of now, OpenSceneGraph cannot run under Emscripten unchanged.
130118

119+
Patch OpenSceneGraph by running the following commands:
131120

121+
`cd /path/to/OpenSceneGraph`
132122

123+
`patch -p1 < /path/to/openscenegraph-cross-platform-guide-application/web/OpenSceneGraph-Emscripten.patch`
133124

125+
<a name="step-build-dir"/>
134126

135-
Create build directory for iOS simulator build of osgNativeLib,
136-
a native C++ library to be used in Objective-C.
137-
138-
osgNativeLib also builds OpenSceneGraph inside
139-
`/path/to/openscenegraph-cross-platform-guide-application/../OpenSceneGraph/build/Simulator`.
140-
141-
**Note**: iOS simulator build only works under iOS simulator. If you need
142-
to build for a real device, you need to build osgNativeLib
143-
with `BUILD_SIMULATOR=NO` in a separate directory. In such a case
144-
OpenSceneGraph is built inside
145-
`/path/to/openscenegraph-cross-platform-guide-application/../OpenSceneGraph/build/Device`.
146-
147-
<a name="step-open-cmake"/>
148-
149-
1.9.2. Launch CMake
150-
-------------------
151-
152-
![Screenshot](readme/f033.png)
153-
154-
Open CMake
155-
156-
<a name="step-dirs"/>
157-
158-
1.9.3. Specify build and source directories
159-
-------------------------------------------
127+
1.10.6. Create build directory
128+
------------------------------
160129

161-
![Screenshot](readme/f068.png)
130+
![Screenshot](readme/f?.png)
162131

163-
Specify build and source directories.
132+
Create build directory for sample application.
164133

165134
<a name="step-cfg"/>
166135

167-
1.9.4. Configure osgNativeLib and OSG
168-
-------------------------------------
169-
170-
![Screenshot](readme/f083.png)
171-
172-
Press `Configure`. Select `Xcode` generator when prompted.
136+
1.10.7. Configure the build
137+
---------------------------
173138

174-
<a name="step-generate"/>
139+
![Screenshot](readme/f?.png)
175140

176-
1.9.5. Generate Xcode project file
177-
-----------------------------------
141+
Configure sample application build with the following commands:
142+
143+
`cd /path/to/build/dir`
178144

179-
![Screenshot](readme/f145.png)
145+
`cmake -DCMAKE_TOOLCHAIN_FILE=/path/to/emsdk-portable/emscripten/<version>/cmake/Modules/Platform/Emscripten.cmake /path/to/source/dir`
180146

181-
Press `Generate` to generate Xcode specific project file.
147+
**Note**: make sure to specify Emscripten CMake toolchain file.
182148

183149
<a name="step-build"/>
184150

185-
1.9.6. Build osgNativeLib and OSG
186-
---------------------------------
151+
1.10.8. Build application
152+
-------------------------
187153

188-
![Screenshot](readme/f180.png)
154+
![Screenshot](readme/f?.png)
189155

190-
Build osgNativeLib and OpenSceneGraph with the following commands:
156+
Build sample application with the following commands:
191157

192158
`cd /path/to/build/dir`
193159

194-
`xcodebuild -IDEBuildOperationMaxNumberOfConcurrentCompileTasks=8 -configuration Release`
195-
196-
At the end the build process combines osgNativeLib and several OpenSceneGraph
197-
libraries into single `libosglib.a` library. This is done for convenience.
198-
199-
<a name="step-xcode"/>
200-
201-
1.9.7. Start a new Xcode project
202-
--------------------------------
203-
204-
![Screenshot](readme/f233.png)
205-
206-
Start a new Xcode project.
207-
208-
<a name="step-single-view"/>
209-
210-
1.9.8. Select Single View Application
211-
--------------------------------
212-
213-
![Screenshot](readme/f250.png)
160+
`make -j10`
214161

215-
Select Single View Application.
162+
This also builds OpenSceneGraph inside
163+
`/path/to/openscenegraph-cross-platform-guide-application/../OpenSceneGraph/build/Emscripten`.
216164

217-
<a name="step-objc"/>
165+
Once the build has finished, you will have the following files:
166+
* `sample-ems.html` is the main file you should open in a web browser
167+
* `sample-ems.data` contains box.osgt (and other) resources
168+
* `sample-ems.mem` special Emscripten auxiliary file
169+
* `sample-ems.js` is sample application compiled into JavaScript
218170

219-
1.9.9. Select Objective-C language
220-
----------------------------------
171+
<a name="step-run-ff"/>
221172

222-
![Screenshot](readme/f280.png)
223-
224-
Select Objective-C language and provide application specific
225-
information like title, organization, etc.
226-
227-
<a name="step-proj"/>
228-
229-
1.9.10. Finish project creation
230-
-------------------------------
231-
232-
![Screenshot](readme/f299.png)
233-
234-
Select project directory and finish project creation.
235-
236-
<a name="step-copy-lib"/>
237-
238-
1.9.11. Copy combined library
239-
-----------------------------
240-
241-
![Screenshot](readme/f330.png)
242-
243-
Copy combined library into project directory with the following command:
244-
245-
`cp /path/to/build/dir/libosglib.a /path/to/xcode/project/subdir/`
246-
247-
<a name="step-copy"/>
248-
249-
1.9.12. Copy view controller and model
173+
1.10.9. Run application (Firefox only)
250174
--------------------------------------
251175

252-
![Screenshot](readme/f365.png)
253-
254-
Copy view controller and model with the following command:
255-
256-
`cp -R /path/to/openscenegraph-cross-platform-guide-application/ios/project/* /path/to/xcode/project/subdir`
257-
258-
Sample OpenSceneGraph application's *ios/project* directory contains
259-
a box model and `RenderVC`. `RenderVC` is a view controller that renders
260-
the model with osgNativeLib.
261-
262-
<a name="step-add"/>
263-
264-
1.9.13. Add copied files to the project
265-
---------------------------------------
266-
267-
![Screenshot](readme/f382.png)
268-
269-
For Xcode to see the files, they should be added to the project.
270-
271-
<a name="step-main"/>
176+
![Screenshot](readme/f?.png)
272177

273-
1.9.14. Select RenderVC as the main interface
274-
---------------------------------------------
178+
To run sample application in Firefox web browser,
179+
navigate to the build directory and open `sample-ems.html` file.
275180

276-
![Screenshot](readme/f396.png)
181+
You should see red cube displayed.
277182

278-
Go to `General` project page and select `RenderVC.storyboard` as
279-
the main interface.
183+
**Note**: you can simply open local file, because Firefox supports [XHR requests for local files](http://kripken.github.io/emscripten-site/docs/getting_started/Tutorial.html).
280184

281-
<a name="step-headers"/>
185+
<a name="step-run"/>
282186

283-
1.9.15. Reference osgNativeLib headers
187+
1.10.10. Run application (All browsers)
284188
--------------------------------------
285189

286-
![Screenshot](readme/f456.png)
287-
288-
Since we have not added osgNativeLib headers to the project, we should
289-
reference them to be able to call osgNativeLib functions.
290-
291-
Go to project's `Build Settings`, find `Header Search Paths` section,
292-
then add the following search paths:
190+
![Screenshot](readme/f?.png)
293191

294-
`/path/to/openscenegraph-cross-platform-guide-application/ios/src`
192+
To see the result in any web browser (including Firefox), you need to serve sample
193+
application with a web server.
295194

296-
`/path/to/openscenegraph-cross-platform-guide-application/ios/src-gen`
195+
If you have Python installed (Xubuntu 16.04 does), you can serve sample application
196+
with the following commands:
297197

298-
<a name="step-run"/>
198+
`cd /path/to/build/dir`
299199

300-
1.9.16. Run the project
301-
-----------------------
200+
`python -m SimpleHTTPServer`
302201

303-
![Screenshot](readme/f527.png)
202+
Now you can open sample application with this link:
203+
[http://localhost:8000/sample-ems.html](http://localhost:8000/sample-ems.html).
304204

305-
Select iPhone simulator and run the project.
306205
You should see red cube displayed.
307206

207+
**Note**: link to sample application served by Github Pages: [todo](todo)
208+

‎1.10.SampleWeb/tutorial/sample_web-04.mp4

336 KB
Binary file not shown.

‎1.10.SampleWeb/tutorial/sample_web-05.mp4

121 KB
Binary file not shown.

‎1.10.SampleWeb/tutorial/script

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,15 @@ text 5 1.10. Run sample OSG application in Web
99
#text 5 1.10.3. Extract Emscripten portable SDK
1010
#video 57:68 sample_web-01.mp4
1111
#video 95:111 sample_web-01.mp4
12-
text 5 1.10.4. Install Emscripten portable SDK
13-
video 1:21 sample_web-02.mp4
14-
video 25:35 sample_web-02.mp4
15-
video 2:15 sample_web-03.mp4
16-
video 20:27 sample_web-03.mp4
17-
video 45:51 sample_web-03.mp4
18-
video 53:64 sample_web-03.mp4
19-
video 67:79 sample_web-03.mp4
12+
#text 5 1.10.4. Install Emscripten portable SDK
13+
#video 1:21 sample_web-02.mp4
14+
#video 25:35 sample_web-02.mp4
15+
#video 2:15 sample_web-03.mp4
16+
#video 20:27 sample_web-03.mp4
17+
#video 45:51 sample_web-03.mp4
18+
#video 53:64 sample_web-03.mp4
19+
#video 67:79 sample_web-03.mp4
20+
text 5 1.10.5. Patch OpenSceneGraph
21+
video 1:25 sample_web-04.mp4
22+
2023
text 5 1.10. That's it for running sample OSG application in Web

‎1.9.SampleUnderIOS/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ under iOS. The application displays provided model with simple GLSL shaders.
3636
* OpenSceneGraph model (see [1.1. Create a cube](../1.1.CreateCube))
3737
* Xcode and CMake installations (see [1.4. Install OpenSceneGraph under macOS](../1.4.InstallUnderMacOS))
3838
* OpenSceneGraph sources (see [1.4. Install OpenSceneGraph under macOS](../1.4.InstallUnderMacOS))
39-
* sample OpenSceneGraph application sources (see [1.7. Build and run sample OpenSceneGraph application under macOS](../1.7.SampleUnderMacOS))
39+
* sample OpenSceneGraph application sources (see [1.7. Build and run sample OpenSceneGraph application under macOS](../1.7.SampleUnderMacOS)) **alongside OpenSceneGraph sources**
4040

4141
<a name="video"/>
4242

0 commit comments

Comments
 (0)