Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Sign up for free
Menu
Search
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Features
All features
Private URLs
Password Protection
Custom URLS
Scheduled publishing
Remove Branding
Restrict embedding
Deck Collections
Notes
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Explore
Featured decks
Featured speakers
Programming
Technology
Storyboards
Pricing
Search
Sign in
Sign up for free
SER431 Lecture 04
Search
Javier Gonzalez-Sanchez
PRO
August 27, 2018
Programming
420
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
SER431 Lecture 04
Advanced Graphics
Skyboxes
(201808)
Javier Gonzalez-Sanchez
PRO
August 27, 2018
More Decks by Javier Gonzalez-Sanchez
See All by Javier Gonzalez-Sanchez
CSC510 Lecture 19
javiergs
PRO
0
20
CSC310 Lecture 13
javiergs
PRO
0
24
CSC510 Lecture 18
javiergs
PRO
0
29
CSC510 Lecture 17
javiergs
PRO
0
31
CSC310 Lecture 12
javiergs
PRO
0
30
3100_11.pdf
javiergs
PRO
0
59
CSC510 Lecture 16
javiergs
PRO
0
76
CSC510 Lecture 15
javiergs
PRO
0
44
CSC510 Lecture 13
javiergs
PRO
0
33
Other Decks in Programming
See All in Programming
Web Framework Benchmark Battle 2026, Any%
a_matsuda
2
2.7k
HTML-in-Canvasで作る未来のWeb UI表現
clockmaker
5
5.2k
graphql-ruby を Spinel で速くしようとした話
mtsmfm
0
110
Unity6 URPによる海底をテーマにしたVJシステムの解説 | Unity Shader 完全に理解した 勉強会
gam0022
0
370
Seven New Principles of Software Engineering
yegor256
0
210
ActionController meets Protocol Buffers
sorah
0
670
エージェントを使い続けるためのメタワーク / Meta-work for keeping using the agent
rkaga
6
1.6k
PumaからFalconに移行したRailsアプリケーションでの実践
falcon8823
0
190
AWSに止められる覚悟してますか?
morizo_1984
2
540
作って学ぶSpring BootのAuto Configuration / JJUG Night Seminar 2026-10-19
rshindo
0
200
気持ちぃ〜角丸 Squircle
ryu1013
0
330
作れる、でも消せるか?──安全に「枯らして消す」機能削除術 / Drain, Then Delete
chobishiba
2
890
Featured
See All Featured
My Coaching Mixtape
mlcsv
0
360
Google's AI Overviews - The New Search
badams
0
1.6k
Side Projects
sachag
456
43k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
310
Design in an AI World
tapps
1
360
The SEO Collaboration Effect
kristinabergwall1
1
600
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.6k
How to Talk to Developers About Accessibility
jct
2
590
How STYLIGHT went responsive
nonsquared
100
6.3k
[SF Ruby Conf 2025] Rails X
palkan
3
1.5k
Test your architecture with Archunit
thirion
2
2.4k
Building Applications with DynamoDB
mza
96
7.2k
Transcript
jgs SER 431 Advanced Graphics Lecture 04: Skyboxes Javier Gonzalez-Sanchez
[email protected]
PERALTA 230U Office Hours: By appointment
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 1 jgs
Previously
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 2 jgs
A box
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 3 jgs
A box // create a triangulated cube Mesh* createCube() { Mesh *mesh = new Mesh; // Define 8 Vertexes mesh->dot_vertex.push_back(Vec3<GLfloat>( 0.0, 32.0, 32.0)); mesh->dot_vertex.push_back(Vec3<GLfloat>( 32.0, 32.0, 32.0)); mesh->dot_vertex.push_back(Vec3<GLfloat>( 32.0, 0.0, 32.0)); mesh->dot_vertex.push_back(Vec3<GLfloat>( 0.0, 0.0, 32.0)); // .. // Define 6 Faces; 2 triangles each mesh->face_index_vertex.push_back(0); mesh->face_index_vertex.push_back(3); mesh->face_index_vertex.push_back(1); mesh->face_index_vertex.push_back(1); mesh->face_index_vertex.push_back(3); mesh->face_index_vertex.push_back(2); // continue in the next slide 3 2 1 0
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 4 jgs
// Define 8 Vertexes and Define 6 Faces; 2 triangles each // Define texture vertex mesh->dot_texture.push_back(Vec2<GLfloat>(0.0, 1.0)); mesh->dot_texture.push_back(Vec2<GLfloat>(1.0, 1.0)); mesh->dot_texture.push_back(Vec2<GLfloat>(1.0, 0.0)); mesh->dot_texture.push_back(Vec2<GLfloat>(0.0, 0.0)); // Define texture faces for (int t = 0; t<6; t++) { mesh->face_index_texture.push_back(0);//0 mesh->face_index_texture.push_back(2);//1 mesh->face_index_texture.push_back(1);//2 mesh->face_index_texture.push_back(0);//0 mesh->face_index_texture.push_back(3);//2 mesh->face_index_texture.push_back(2);//3 } return mesh; } A Texture Outside the Box
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 5 jgs
What about inside the box?
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 6 jgs
Load Textures // Create texture from a DIB or BMP file void texture_from_file(GLuint *textureArray, const char * file) { BITMAPINFO *bitmapInfo; // Bitmap information GLubyte *bitmapBits; // Bitmap data if (!file) { cout << "texture file not found!" << endl; return;} // load image bitmapBits = load_bmp_file(file, &bitmapInfo); // setup texture glGenTextures(1, textureArray); glBindTexture(GL_TEXTURE_2D, *textureArray); glPixelStorei(GL_UNPACK_ALIGNMENT, 1);// must set to 1 for compact data gluBuild2DMipmaps(GL_TEXTURE_2D, 3, bitmapInfo->bmiHeader.biWidth, bitmapInfo->bmiHeader.biHeight, GL_BGR_EXT, GL_UNSIGNED_BYTE, bitmapBits ); }
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 7 jgs
A Texture for the Horizon
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 8 jgs
A texture for a Room https://www.facebook.com/asuphotos/photos/a.1636426986668999/1691991784445852/?type=3&theater
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 9 jgs
Texture Sources § Azimuth Chrome Plugin https://chrome.google.com/webstore/detail/azimuth-download-facebook/ https://www.360toolkit.co § Skyboxes Textures http://www.custommapmakers.org/skyboxes.php
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 10 jgs
Add a Texture to a Box void init() { // CREATE MESH DATA STRUCTURES mesh_cube = createCube(); // TEXTURES (Lecture 23 in SER 332) GLuint texture_array[6]; texture_from_file(&texture_array[0], "../../bmp files/top.bmp"); texture_from_file(&texture_array[1], "../../bmp files/left.bmp"); // ... // DISPLAY LIST skybox= meshToDisplayList(1, mesh_cube, texture_array); // CONFIGURE LIGHT }
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 11 jgs
GLuint meshToDisplayList(int id, Mesh* m, GLuint texture) { GLuint listID = glGenLists(id); glNewList(listID, GL_COMPILE); glEnable(GL_TEXTURE_2D); // Other options: GL_TEXTURE_1D, GL_TEXTURE_3D, GL_TEXTURE_CUBE_MAP glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE); glBindTexture(GL_TEXTURE_2D, texture); glBegin(GL_TRIANGLES); // PER VERTEX NORMALS // TEXTURES if (!m->dot_texture.empty() && !m->face_index_texture.empty()) { glTexCoord2fv(&m->dot_texture[m->face_index_texture[i]].x); } // COLOR // VERTEX glEnd(); glDisable(GL_TEXTURE_2D); glEndList(); return listID; } Add a Texture to a Box
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 12 jgs
Texture inside a Box
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 13 jgs
Texture inside a Box https://www.facebook.com/asuphotos/photos/a.1636426986668999/1691991784445852/?type=3&theater
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 14 jgs
Quiz 1 § Work with your team § Create a Skybox § Submit your source code on Blackboard. Due: August 29, 11:59 PM
Javier Gonzalez-Sanchez | SER431 | Fall 2018 | 15 jgs
Test Yourselves Combine a sky box and a terrain. Allow the camera to be moved.
jgs SER431 Advanced Graphics Javier Gonzalez-Sanchez
[email protected]
Fall 2018 Disclaimer.
These slides can only be used as study material for the class SER431 at ASU. They cannot be distributed or used for another purpose.