├── 05-Matrix ├── public │ ├── main.css │ ├── index.html │ └── main.js ├── server.js ├── package.json └── package-lock.json ├── .gitignore ├── 11-Lighting ├── .vscode │ └── settings.json ├── textures │ ├── invent-box-logo-512px.jpg │ └── invent-box-logo-900px.jpg ├── main.css ├── index.html └── main.js ├── Demo ├── Sandbox │ ├── tex.png │ ├── laser-yellow.png │ ├── vertex-shader.glsl │ ├── fragment-shader.glsl │ ├── main.css │ ├── index.html │ ├── program.js │ ├── vertex.js │ ├── laser.svg │ └── main.js ├── server.js ├── Color-Rect │ ├── fragment.glsl │ ├── main.css │ ├── index.html │ ├── vertex.glsl │ └── main.js ├── Point-Cloud │ ├── fragment.glsl │ ├── main.css │ ├── index.html │ ├── vertex.glsl │ └── main.js ├── package.json ├── index.html └── package-lock.json ├── 10-Textures ├── public │ ├── textures │ │ ├── heart.png │ │ ├── bubble.png │ │ ├── player.png │ │ ├── gui_formbg.png │ │ ├── gui_hb_bg.png │ │ ├── gui_hotbar.png │ │ ├── wieldhand.png │ │ ├── default_apple.png │ │ ├── default_book.png │ │ ├── default_brick.png │ │ ├── default_clay.png │ │ ├── default_cloud.png │ │ ├── default_dirt.png │ │ ├── default_glass.png │ │ ├── default_grass.png │ │ ├── default_ice.png │ │ ├── default_lava.png │ │ ├── default_nc_rb.png │ │ ├── default_paper.png │ │ ├── default_rail.png │ │ ├── default_sand.png │ │ ├── default_sign.png │ │ ├── default_snow.png │ │ ├── default_stick.png │ │ ├── default_stone.png │ │ ├── default_torch.png │ │ ├── default_tree.png │ │ ├── default_water.png │ │ ├── default_wood.png │ │ ├── player_back.png │ │ ├── crack_anylength.png │ │ ├── default_cobble.png │ │ ├── default_diamond.png │ │ ├── default_grass_1.png │ │ ├── default_grass_2.png │ │ ├── default_grass_3.png │ │ ├── default_grass_4.png │ │ ├── default_grass_5.png │ │ ├── default_gravel.png │ │ ├── default_ladder.png │ │ ├── default_leaves.png │ │ ├── default_nc_back.png │ │ ├── default_nc_side.png │ │ ├── default_papyrus.png │ │ ├── default_sapling.png │ │ ├── default_tnt_top.png │ │ ├── default_bookshelf.png │ │ ├── default_cactus_top.png │ │ ├── default_chest_lock.png │ │ ├── default_chest_side.png │ │ ├── default_chest_top.png │ │ ├── default_clay_brick.png │ │ ├── default_clay_lump.png │ │ ├── default_coal_block.png │ │ ├── default_coal_lump.png │ │ ├── default_dry_grass.png │ │ ├── default_dry_shrub.png │ │ ├── default_footprint.png │ │ ├── default_gold_block.png │ │ ├── default_gold_ingot.png │ │ ├── default_gold_lump.png │ │ ├── default_grass_side.png │ │ ├── default_iron_lump.png │ │ ├── default_jungletree.png │ │ ├── default_junglewood.png │ │ ├── default_mese_block.png │ │ ├── default_meselamp.png │ │ ├── default_nc_front.png │ │ ├── default_obsidian.png │ │ ├── default_pine_tree.png │ │ ├── default_pine_wood.png │ │ ├── default_sandstone.png │ │ ├── default_sign_wall.png │ │ ├── default_snow_side.png │ │ ├── default_snowball.png │ │ ├── default_tnt_bottom.png │ │ ├── default_tnt_side.png │ │ ├── default_tree_top.png │ │ ├── default_acacia_tree.png │ │ ├── default_acacia_wood.png │ │ ├── default_brick_normal.png │ │ ├── default_bronze_block.png │ │ ├── default_bronze_ingot.png │ │ ├── default_cactus_side.png │ │ ├── default_chest_front.png │ │ ├── default_copper_block.png │ │ ├── default_copper_ingot.png │ │ ├── default_copper_lump.png │ │ ├── default_desert_sand.png │ │ ├── default_desert_stone.png │ │ ├── default_dirt_normal.png │ │ ├── default_dry_grass_1.png │ │ ├── default_dry_grass_2.png │ │ ├── default_dry_grass_3.png │ │ ├── default_dry_grass_4.png │ │ ├── default_dry_grass_5.png │ │ ├── default_furnace_side.png │ │ ├── default_furnace_top.png │ │ ├── default_glass_detail.png │ │ ├── default_grass_normal.png │ │ ├── default_junglegrass.png │ │ ├── default_jungleleaves.png │ │ ├── default_mese_crystal.png │ │ ├── default_mineral_coal.png │ │ ├── default_mineral_gold.png │ │ ├── default_mineral_iron.png │ │ ├── default_mineral_mese.png │ │ ├── default_mossycobble.png │ │ ├── default_pine_needles.png │ │ ├── default_pine_sapling.png │ │ ├── default_rail_curved.png │ │ ├── default_river_water.png │ │ ├── default_sand_normal.png │ │ ├── default_steel_block.png │ │ ├── default_steel_ingot.png │ │ ├── default_stone_brick.png │ │ ├── default_stone_normal.png │ │ ├── default_tool_meseaxe.png │ │ ├── default_tool_woodaxe.png │ │ ├── default_tree_normal.png │ │ ├── default_wood_normal.png │ │ ├── gui_furnace_arrow_bg.png │ │ ├── gui_furnace_arrow_fg.png │ │ ├── gui_hotbar_selected.png │ │ ├── default_acacia_leaves.png │ │ ├── default_acacia_sapling.png │ │ ├── default_acacia_tree_top.png │ │ ├── default_cobble_normal.png │ │ ├── default_desert_cobble.png │ │ ├── default_diamond_block.png │ │ ├── default_dry_grass_side.png │ │ ├── default_fence_overlay.png │ │ ├── default_furnace_bottom.png │ │ ├── default_furnace_fire_bg.png │ │ ├── default_furnace_fire_fg.png │ │ ├── default_furnace_front.png │ │ ├── default_junglesapling.png │ │ ├── default_jungletree_top.png │ │ ├── default_leaves_simple.png │ │ ├── default_mineral_copper.png │ │ ├── default_mineral_diamond.png │ │ ├── default_obsidian_brick.png │ │ ├── default_obsidian_glass.png │ │ ├── default_obsidian_shard.png │ │ ├── default_pine_tree_top.png │ │ ├── default_rail_crossing.png │ │ ├── default_rail_t_junction.png │ │ ├── default_sandstone_brick.png │ │ ├── default_tool_bronzeaxe.png │ │ ├── default_tool_bronzepick.png │ │ ├── default_tool_diamondaxe.png │ │ ├── default_tool_mesepick.png │ │ ├── default_tool_meseshovel.png │ │ ├── default_tool_mesesword.png │ │ ├── default_tool_steelaxe.png │ │ ├── default_tool_steelpick.png │ │ ├── default_tool_steelsword.png │ │ ├── default_tool_stoneaxe.png │ │ ├── default_tool_stonepick.png │ │ ├── default_tool_stonesword.png │ │ ├── default_tool_woodpick.png │ │ ├── default_tool_woodshovel.png │ │ ├── default_tool_woodsword.png │ │ ├── default_torch_animated.png │ │ ├── default_torch_on_floor.png │ │ ├── default_tree_top_normal.png │ │ ├── default_cactus_top_normal.png │ │ ├── default_dry_grass_normal.png │ │ ├── default_grass_side_normal.png │ │ ├── default_jungletree_normal.png │ │ ├── default_junglewood_normal.png │ │ ├── default_tool_bronzeshovel.png │ │ ├── default_tool_bronzesword.png │ │ ├── default_tool_diamondpick.png │ │ ├── default_tool_diamondsword.png │ │ ├── default_tool_steelshovel.png │ │ ├── default_tool_stoneshovel.png │ │ ├── default_torch_on_ceiling.png │ │ ├── default_cactus_side_normal.png │ │ ├── default_desert_sand_normal.png │ │ ├── default_desert_stone_brick.png │ │ ├── default_desert_stone_normal.png │ │ ├── default_furnace_front_active.png │ │ ├── default_jungleleaves_simple.png │ │ ├── default_lava_source_animated.png │ │ ├── default_mineral_coal_normal.png │ │ ├── default_mineral_gold_normal.png │ │ ├── default_mineral_iron_normal.png │ │ ├── default_mineral_mese_normal.png │ │ ├── default_stone_brick_normal.png │ │ ├── default_tool_diamondshovel.png │ │ ├── default_dry_grass_side_normal.png │ │ ├── default_jungletree_top_normal.png │ │ ├── default_lava_flowing_animated.png │ │ ├── default_mese_crystal_fragment.png │ │ ├── default_mineral_copper_normal.png │ │ ├── default_mineral_diamond_normal.png │ │ ├── default_sandstone_brick_normal.png │ │ ├── default_water_flowing_animated.png │ │ ├── default_water_source_animated.png │ │ ├── default_desert_stone_brick_normal.png │ │ ├── default_torch_on_ceiling_animated.png │ │ ├── default_torch_on_floor_animated.png │ │ ├── default_river_water_source_animated.png │ │ └── default_river_water_flowing_animated.png │ ├── main.css │ ├── index.html │ └── main.js ├── server.js └── package.json ├── 06-Box ├── server.js ├── public │ ├── main.css │ ├── index.html │ └── main.js ├── package.json └── package-lock.json ├── 08-Camera ├── server.js ├── public │ ├── main.css │ ├── index.html │ └── main.js ├── package.json └── package-lock.json ├── 03-Quickstart ├── server.js ├── package.json └── public │ ├── index.html │ └── main.js ├── 04-Attributes ├── server.js ├── package.json └── public │ ├── index.html │ └── main.js ├── 07-Projection ├── server.js ├── public │ ├── main.css │ ├── index.html │ └── main.js └── package.json ├── 01-Getting-Started ├── server.js ├── public │ ├── main.js │ └── index.html └── package.json ├── 09-Point-Cloud-Demo ├── server.js ├── public │ ├── main.css │ ├── index.html │ ├── main.js │ └── point-functions.js └── package.json ├── README.md └── LICENSE /05-Matrix/public/main.css: -------------------------------------------------------------------------------- 1 | canvas { 2 | border: 1px solid black; 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | Production 2 | Old_Takes 3 | 4 | # Node 5 | **/node_modules 6 | -------------------------------------------------------------------------------- /11-Lighting/.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "git.ignoreLimitWarning": true 3 | } -------------------------------------------------------------------------------- /Demo/Sandbox/tex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/Demo/Sandbox/tex.png -------------------------------------------------------------------------------- /Demo/Sandbox/laser-yellow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/Demo/Sandbox/laser-yellow.png -------------------------------------------------------------------------------- /10-Textures/public/textures/heart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/heart.png -------------------------------------------------------------------------------- /10-Textures/public/textures/bubble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/bubble.png -------------------------------------------------------------------------------- /10-Textures/public/textures/player.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/player.png -------------------------------------------------------------------------------- /10-Textures/public/textures/gui_formbg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/gui_formbg.png -------------------------------------------------------------------------------- /10-Textures/public/textures/gui_hb_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/gui_hb_bg.png -------------------------------------------------------------------------------- /10-Textures/public/textures/gui_hotbar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/gui_hotbar.png -------------------------------------------------------------------------------- /10-Textures/public/textures/wieldhand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/wieldhand.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_apple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_apple.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_book.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_brick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_clay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_clay.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cloud.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dirt.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_glass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_glass.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_ice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_ice.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_lava.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_lava.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_nc_rb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_nc_rb.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_paper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_paper.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_rail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_rail.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sand.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sign.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sign.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_snow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_snow.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_stick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_stick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_stone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_stone.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_torch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_torch.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tree.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_water.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_wood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_wood.png -------------------------------------------------------------------------------- /10-Textures/public/textures/player_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/player_back.png -------------------------------------------------------------------------------- /10-Textures/public/textures/crack_anylength.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/crack_anylength.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cobble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cobble.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_diamond.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_1.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_2.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_3.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_4.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_5.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_gravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_gravel.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_ladder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_ladder.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_leaves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_leaves.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_nc_back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_nc_back.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_nc_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_nc_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_papyrus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_papyrus.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sapling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sapling.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tnt_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tnt_top.png -------------------------------------------------------------------------------- /11-Lighting/textures/invent-box-logo-512px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/11-Lighting/textures/invent-box-logo-512px.jpg -------------------------------------------------------------------------------- /11-Lighting/textures/invent-box-logo-900px.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/11-Lighting/textures/invent-box-logo-900px.jpg -------------------------------------------------------------------------------- /Demo/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | 3 | const app = express() 4 | 5 | app.use(express.static('./')) 6 | 7 | app.listen(3030) 8 | -------------------------------------------------------------------------------- /05-Matrix/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /06-Box/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /08-Camera/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /10-Textures/public/textures/default_bookshelf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_bookshelf.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cactus_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cactus_top.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_chest_lock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_chest_lock.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_chest_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_chest_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_chest_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_chest_top.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_clay_brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_clay_brick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_clay_lump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_clay_lump.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_coal_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_coal_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_coal_lump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_coal_lump.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_shrub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_shrub.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_footprint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_footprint.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_gold_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_gold_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_gold_ingot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_gold_ingot.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_gold_lump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_gold_lump.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_iron_lump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_iron_lump.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_jungletree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_jungletree.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_junglewood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_junglewood.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mese_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mese_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_meselamp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_meselamp.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_nc_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_nc_front.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_obsidian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_obsidian.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_pine_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_pine_tree.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_pine_wood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_pine_wood.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sandstone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sandstone.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sign_wall.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sign_wall.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_snow_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_snow_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_snowball.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_snowball.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tnt_bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tnt_bottom.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tnt_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tnt_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tree_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tree_top.png -------------------------------------------------------------------------------- /03-Quickstart/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /04-Attributes/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /07-Projection/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /10-Textures/public/textures/default_acacia_tree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_acacia_tree.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_acacia_wood.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_acacia_wood.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_brick_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_brick_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_bronze_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_bronze_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_bronze_ingot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_bronze_ingot.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cactus_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cactus_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_chest_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_chest_front.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_copper_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_copper_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_copper_ingot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_copper_ingot.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_copper_lump.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_copper_lump.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_sand.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_sand.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_stone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_stone.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dirt_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dirt_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_1.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_2.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_3.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_4.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_5.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_top.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_glass_detail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_glass_detail.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_junglegrass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_junglegrass.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_jungleleaves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_jungleleaves.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mese_crystal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mese_crystal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_coal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_coal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_gold.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_gold.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_iron.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_iron.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_mese.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_mese.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mossycobble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mossycobble.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_pine_needles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_pine_needles.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_pine_sapling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_pine_sapling.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_rail_curved.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_rail_curved.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_river_water.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_river_water.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sand_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sand_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_steel_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_steel_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_steel_ingot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_steel_ingot.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_stone_brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_stone_brick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_stone_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_stone_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_meseaxe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_meseaxe.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_woodaxe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_woodaxe.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tree_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tree_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_wood_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_wood_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/gui_furnace_arrow_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/gui_furnace_arrow_bg.png -------------------------------------------------------------------------------- /10-Textures/public/textures/gui_furnace_arrow_fg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/gui_furnace_arrow_fg.png -------------------------------------------------------------------------------- /10-Textures/public/textures/gui_hotbar_selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/gui_hotbar_selected.png -------------------------------------------------------------------------------- /10-Textures/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /01-Getting-Started/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /09-Point-Cloud-Demo/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | 3 | const app = express(); 4 | 5 | app.use(express.static('public')); 6 | 7 | app.listen(3000); -------------------------------------------------------------------------------- /10-Textures/public/textures/default_acacia_leaves.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_acacia_leaves.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_acacia_sapling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_acacia_sapling.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_acacia_tree_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_acacia_tree_top.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cobble_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cobble_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_cobble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_cobble.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_diamond_block.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_diamond_block.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_side.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_side.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_fence_overlay.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_fence_overlay.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_bottom.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_fire_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_fire_bg.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_fire_fg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_fire_fg.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_front.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_front.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_junglesapling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_junglesapling.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_jungletree_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_jungletree_top.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_leaves_simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_leaves_simple.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_copper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_copper.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_diamond.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_diamond.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_obsidian_brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_obsidian_brick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_obsidian_glass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_obsidian_glass.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_obsidian_shard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_obsidian_shard.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_pine_tree_top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_pine_tree_top.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_rail_crossing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_rail_crossing.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_rail_t_junction.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_rail_t_junction.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sandstone_brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sandstone_brick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_bronzeaxe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_bronzeaxe.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_bronzepick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_bronzepick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_diamondaxe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_diamondaxe.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_mesepick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_mesepick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_meseshovel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_meseshovel.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_mesesword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_mesesword.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_steelaxe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_steelaxe.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_steelpick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_steelpick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_steelsword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_steelsword.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_stoneaxe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_stoneaxe.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_stonepick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_stonepick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_stonesword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_stonesword.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_woodpick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_woodpick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_woodshovel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_woodshovel.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_woodsword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_woodsword.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_torch_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_torch_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_torch_on_floor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_torch_on_floor.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tree_top_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tree_top_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cactus_top_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cactus_top_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_grass_side_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_grass_side_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_jungletree_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_jungletree_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_junglewood_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_junglewood_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_bronzeshovel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_bronzeshovel.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_bronzesword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_bronzesword.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_diamondpick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_diamondpick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_diamondsword.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_diamondsword.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_steelshovel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_steelshovel.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_stoneshovel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_stoneshovel.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_torch_on_ceiling.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_torch_on_ceiling.png -------------------------------------------------------------------------------- /06-Box/public/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | canvas { 6 | /* border: 1px solid black; */ 7 | width: 100%; 8 | height: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /08-Camera/public/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | canvas { 6 | /* border: 1px solid black; */ 7 | width: 100%; 8 | height: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /10-Textures/public/textures/default_cactus_side_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_cactus_side_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_sand_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_sand_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_stone_brick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_stone_brick.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_stone_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_stone_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_furnace_front_active.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_furnace_front_active.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_jungleleaves_simple.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_jungleleaves_simple.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_lava_source_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_lava_source_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_coal_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_coal_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_gold_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_gold_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_iron_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_iron_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_mese_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_mese_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_stone_brick_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_stone_brick_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_tool_diamondshovel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_tool_diamondshovel.png -------------------------------------------------------------------------------- /07-Projection/public/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | canvas { 6 | /* border: 1px solid black; */ 7 | width: 100%; 8 | height: 100%; 9 | } 10 | -------------------------------------------------------------------------------- /10-Textures/public/textures/default_dry_grass_side_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_dry_grass_side_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_jungletree_top_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_jungletree_top_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_lava_flowing_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_lava_flowing_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mese_crystal_fragment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mese_crystal_fragment.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_copper_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_copper_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_mineral_diamond_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_mineral_diamond_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_sandstone_brick_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_sandstone_brick_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_water_flowing_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_water_flowing_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_water_source_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_water_source_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_desert_stone_brick_normal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_desert_stone_brick_normal.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_torch_on_ceiling_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_torch_on_ceiling_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_torch_on_floor_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_torch_on_floor_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_river_water_source_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_river_water_source_animated.png -------------------------------------------------------------------------------- /10-Textures/public/textures/default_river_water_flowing_animated.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/invent-box/Learn-WebGL/HEAD/10-Textures/public/textures/default_river_water_flowing_animated.png -------------------------------------------------------------------------------- /10-Textures/public/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: #ffeedd; 4 | } 5 | 6 | canvas { 7 | /* border: 1px solid black; */ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /09-Point-Cloud-Demo/public/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: black; 4 | } 5 | 6 | canvas { 7 | /* border: 1px solid black; */ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /11-Lighting/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | background: linear-gradient(#f0f8ff, #000); 4 | } 5 | 6 | canvas { 7 | /* border: 1px solid black; */ 8 | width: 100%; 9 | height: 100%; 10 | } 11 | -------------------------------------------------------------------------------- /01-Getting-Started/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | alert(`Everything's peachy hear with WebGL`) -------------------------------------------------------------------------------- /Demo/Color-Rect/fragment.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec3 fragment_position; 4 | 5 | void main() { 6 | gl_FragColor = vec4( 7 | (fragment_position.x+1.0)*0.5, 8 | (fragment_position.y+1.0)*0.5, 9 | 1, 10 | 1); 11 | } -------------------------------------------------------------------------------- /Demo/Point-Cloud/fragment.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | varying vec3 fragment_position; 4 | 5 | void main() { 6 | gl_FragColor = vec4( 7 | (fragment_position.x+1.0)*0.5, 8 | (fragment_position.y+1.0)*0.5, 9 | 1, 10 | 1); 11 | } -------------------------------------------------------------------------------- /Demo/Sandbox/vertex-shader.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec3 position; 4 | attribute vec2 textureCoord; 5 | 6 | varying vec2 vTextureCoord; 7 | 8 | uniform mat4 mvpMatrix; 9 | 10 | void main() { 11 | vTextureCoord = textureCoord; 12 | 13 | gl_Position = mvpMatrix * vec4(position, 1); 14 | } -------------------------------------------------------------------------------- /06-Box/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /05-Matrix/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /08-Camera/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /10-Textures/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /03-Quickstart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /04-Attributes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /07-Projection/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /01-Getting-Started/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /09-Point-Cloud-Demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "express": "^4.16.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /Demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl-tutorials", 3 | "version": "1.0.0", 4 | "description": "App for WebGL tutorials", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js" 9 | }, 10 | "author": "DariusMontez ", 11 | "license": "MIT", 12 | "dependencies": { 13 | "express": "^4.16.3" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Demo/Sandbox/fragment-shader.glsl: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | varying vec2 vTextureCoord; 4 | 5 | uniform sampler2D texture; 6 | 7 | float quintic(float x) { 8 | return pow(x, 5.0); 9 | } 10 | 11 | void main() { 12 | 13 | vec4 texel = texture2D(texture, vTextureCoord); 14 | 15 | gl_FragColor = texel; 16 | // gl_FragColor = vec4(0.6,1.6,0.7, 0.9) * ; 17 | // gl_FragColor = vec4(0.6, 1.6, 0.7, quintic(vTextureCoord.x)); 18 | } -------------------------------------------------------------------------------- /03-Quickstart/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 |

WebGL!!

13 | 14 | 15 | -------------------------------------------------------------------------------- /04-Attributes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 |

WebGL!!

13 | 14 | 15 | -------------------------------------------------------------------------------- /01-Getting-Started/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Page Title 7 | 8 | 9 | 10 | 11 | 12 |

WebGL!!

13 | 14 | 15 | -------------------------------------------------------------------------------- /Demo/Color-Rect/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | justify-content: center; 4 | align-content: center; 5 | height: 100vh; 6 | 7 | background: #303030; 8 | color: white; 9 | margin: 0; 10 | } 11 | 12 | h1 { 13 | grid-row: 1/2; 14 | grid-column: 1/2; 15 | align-self: center; 16 | z-index: 100; 17 | 18 | text-align: center; 19 | font-family: arial; 20 | 21 | font-size: 5em; 22 | } 23 | 24 | canvas { 25 | grid-row: 1/2; 26 | grid-column: 1/2; 27 | } -------------------------------------------------------------------------------- /Demo/Point-Cloud/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | justify-content: center; 4 | align-content: center; 5 | height: 100vh; 6 | 7 | background: #303030; 8 | color: white; 9 | margin: 0; 10 | } 11 | 12 | h1 { 13 | grid-row: 1/2; 14 | grid-column: 1/2; 15 | align-self: center; 16 | z-index: 100; 17 | 18 | text-align: center; 19 | font-family: arial; 20 | 21 | font-size: 5em; 22 | } 23 | 24 | canvas { 25 | grid-row: 1/2; 26 | grid-column: 1/2; 27 | } -------------------------------------------------------------------------------- /Demo/Sandbox/main.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: grid; 3 | justify-content: center; 4 | align-content: center; 5 | height: 100vh; 6 | 7 | background: #303030; 8 | /* background: black; */ 9 | color: white; 10 | margin: 0; 11 | } 12 | 13 | h1 { 14 | display: none; 15 | grid-row: 1/2; 16 | grid-column: 1/2; 17 | align-self: center; 18 | z-index: 100; 19 | 20 | text-align: center; 21 | font-family: arial; 22 | 23 | font-size: 5em; 24 | } 25 | 26 | canvas { 27 | grid-row: 1/2; 28 | grid-column: 1/2; 29 | } -------------------------------------------------------------------------------- /05-Matrix/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #5 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

WebGL!!

15 | 16 | 17 | -------------------------------------------------------------------------------- /Demo/Sandbox/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Sandbox 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

WebGL!!

17 | 18 | 19 | -------------------------------------------------------------------------------- /Demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial Index 7 | 8 | 9 | 10 | 11 | 12 | WebGL Demos 13 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Demo/Point-Cloud/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

WebGL!

17 | 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # InventBox WebGL Video Tutorial Course 2 | 3 | This repository contains the code used in the WebGL tutorial series, organized by video. 4 | 5 | __Watch the [video playlist](https://www.youtube.com/playlist?list=PL2935W76vRNHFpPUuqmLoGCzwx_8eq5yK) on Youtube.__ 6 | 7 | These tutorials require using a basic HTTP web server since they load resources 8 | via Fetch API (AJAX). 9 | There are *many* options. The first ten tutorials each have a NodeJS Express 10 | server in the project folder, but any server may be used. 11 | 12 | My recommendation: 13 | 14 | ``` 15 | python -m http.server 8000 16 | ``` 17 | 18 | No installation needed, provided Python 3.x is already installed 19 | 20 | Or, for Python 2: `python2 -m SimpleHTTPServer 8000` 21 | -------------------------------------------------------------------------------- /11-Lighting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #11 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /06-Box/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #6 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /08-Camera/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #8 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /07-Projection/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #6 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /10-Textures/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #10 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | -------------------------------------------------------------------------------- /Demo/Color-Rect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

WebGL!

19 | 20 | 21 | -------------------------------------------------------------------------------- /Demo/Color-Rect/vertex.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | attribute vec3 vertex_position; 4 | 5 | // transformations in world-space, like translating an object 6 | // Without the model matrix, all objects would remain at the origin (0,0,0) 7 | uniform mat4 model_matrix; 8 | 9 | // transformations in camera-space, like rotating the camera 10 | // The view matrix determines what region of the world will be on-screen. 11 | uniform mat4 view_matrix; 12 | 13 | // transformation in screen-space, like applying perspective. 14 | // Without the projection matrix, the world would be viewed orthographically 15 | uniform mat4 projection_matrix; 16 | 17 | varying vec3 fragment_position; 18 | 19 | void main() { 20 | fragment_position = vertex_position; 21 | 22 | mat4 mvp = projection_matrix * view_matrix * model_matrix; 23 | gl_Position = mvp * vec4(vertex_position, 1); 24 | } -------------------------------------------------------------------------------- /09-Point-Cloud-Demo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | WebGL Tutorial #9 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | -------------------------------------------------------------------------------- /Demo/Point-Cloud/vertex.glsl: -------------------------------------------------------------------------------- 1 | precision mediump float; 2 | 3 | attribute vec3 vertex_position; 4 | 5 | // transformations in world-space, like translating an object 6 | // Without the model matrix, all objects would remain at the origin (0,0,0) 7 | uniform mat4 model_matrix; 8 | 9 | // transformations in camera-space, like rotating the camera 10 | // The view matrix determines what region of the world will be on-screen. 11 | uniform mat4 view_matrix; 12 | 13 | // transformation in screen-space, like applying perspective. 14 | // Without the projection matrix, the world would be viewed orthographically 15 | uniform mat4 projection_matrix; 16 | 17 | varying vec3 fragment_position; 18 | 19 | void main() { 20 | fragment_position = vertex_position; 21 | 22 | mat4 mvp = projection_matrix * view_matrix * model_matrix; 23 | gl_Position = mvp * vec4(vertex_position, 1); 24 | gl_PointSize = 1.0; 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 INVENT BOX 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /03-Quickstart/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | // vertexData = [...] 9 | 10 | // create buffer 11 | // load vertexData into buffer 12 | 13 | // create vertex shader 14 | // create fragment shader 15 | // create program 16 | // attach shaders to program 17 | 18 | // enable vertex attributes 19 | 20 | // draw 21 | 22 | const vertexData = [ 23 | 0, 1, 0, 24 | 1, -1, 0, 25 | -1, -1, 0, 26 | ]; 27 | 28 | const buffer = gl.createBuffer(); 29 | gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 30 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 31 | 32 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 33 | gl.shaderSource(vertexShader, ` 34 | attribute vec3 position; 35 | void main() { 36 | gl_Position = vec4(position, 1); 37 | } 38 | `); 39 | gl.compileShader(vertexShader); 40 | 41 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 42 | gl.shaderSource(fragmentShader, ` 43 | void main() { 44 | gl_FragColor = vec4(1, 0, 0, 1); 45 | } 46 | `); 47 | gl.compileShader(fragmentShader); 48 | 49 | const program = gl.createProgram(); 50 | gl.attachShader(program, vertexShader); 51 | gl.attachShader(program, fragmentShader); 52 | gl.linkProgram(program); 53 | 54 | const positionLocation = gl.getAttribLocation(program, `position`); 55 | gl.enableVertexAttribArray(positionLocation); 56 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 57 | 58 | gl.useProgram(program); 59 | gl.drawArrays(gl.TRIANGLES, 0, 3); -------------------------------------------------------------------------------- /Demo/Sandbox/program.js: -------------------------------------------------------------------------------- 1 | const Program = { 2 | async create(gl, vertexShaderURL, fragmentShaderURL) { 3 | const vertexShader = await Program._createShader(gl, gl.VERTEX_SHADER, vertexShaderURL); 4 | const fragmentShader = await Program._createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderURL); 5 | 6 | const program = gl.createProgram(); 7 | gl.attachShader(program, vertexShader); 8 | gl.attachShader(program, fragmentShader); 9 | gl.linkProgram(program); 10 | 11 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 12 | const err = gl.getProgramInfoLog(program); 13 | throw new Error(`(WebGL program link) ${err}`); 14 | } 15 | 16 | // program.u = Program.locateUniforms(gl, program); 17 | 18 | 19 | return program; 20 | }, 21 | 22 | async _createShader(gl, type, url) { 23 | const shader = gl.createShader(type); 24 | 25 | const res = await fetch(url); 26 | const sourceCode = await res.text(); 27 | 28 | gl.shaderSource(shader, sourceCode); 29 | gl.compileShader(shader); 30 | 31 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 32 | const err = gl.getShaderInfoLog(shader); 33 | const map = {[gl.VERTEX_SHADER]: `vertex`, [gl.FRAGMENT_SHADER]: `fragment`}; 34 | throw new Error(`(WebGL ${map[type]} shader) ${err}`); 35 | } 36 | 37 | return shader; 38 | }, 39 | 40 | locateUniforms(gl, program) { 41 | let uniforms = {}; 42 | 43 | const numUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); 44 | for (let i = 0; i < numUniforms; ++i) { 45 | const info = gl.getActiveUniform(program, i); 46 | console.log('name:', info.name, 'type:', info.type, 'size:', info.size); 47 | uniforms[info.name] = gl.getUniformLocation(program, info.name); 48 | } 49 | 50 | 51 | return uniforms; 52 | }, 53 | }; -------------------------------------------------------------------------------- /Demo/Sandbox/vertex.js: -------------------------------------------------------------------------------- 1 | // Vertex helper 2 | const Vertex = { 3 | attributes(attrs) { 4 | let props = {}; 5 | let byteCount = 0; 6 | 7 | attrs.forEach((attr, i) => { 8 | const {name, id=i, type=gl.FLOAT, size=1} = attr; 9 | const prop = props[name] = {id, type, size}; 10 | prop.offset = byteCount; 11 | byteCount += prop.size * Float32Array.BYTES_PER_ELEMENT; 12 | }); 13 | 14 | props.STRIDE = byteCount; 15 | 16 | return props; 17 | }, 18 | 19 | getAttributes(vertexDef) { 20 | return Object.entries(vertexDef) 21 | .filter(([k, v]) => (v instanceof Object) && v.id !== undefined) 22 | .sort((a, b) => a[1].id - b[1].id) 23 | .map(([k, v]) => k); 24 | }, 25 | 26 | interleave(vertexDef, vertices) { 27 | let data1D = []; 28 | const order = Vertex.getAttributes(vertexDef); 29 | 30 | vertices.forEach(vertex => { 31 | order.forEach(prop => { 32 | const value = vertex[prop]; 33 | 34 | if (Array.isArray(value) || value instanceof Float32Array) { 35 | data1D.push(...value); 36 | // value.forEach(item => data1D.push(item)); 37 | } else { 38 | data1D.push(value); 39 | } 40 | }); 41 | }); 42 | 43 | return new Float32Array(data1D); 44 | }, 45 | 46 | attributePointer(gl, vertexDef, attribute, normalized=false) { 47 | gl.vertexAttribPointer( 48 | vertexDef[attribute].id, 49 | vertexDef[attribute].size, 50 | vertexDef[attribute].type, 51 | normalized, 52 | vertexDef.STRIDE, 53 | vertexDef[attribute].offset 54 | ); 55 | }, 56 | 57 | attributePointers(gl, vertexDef) { 58 | Vertex.getAttributes(vertexDef).forEach(attribute => { 59 | Vertex.attributePointer(gl, vertexDef, attribute); 60 | }); 61 | }, 62 | 63 | connectProgram(gl, vertexDef, program) { 64 | Vertex.getAttributes(vertexDef).forEach(attribute => { 65 | gl.enableVertexAttribArray(vertexDef[attribute].id); 66 | gl.bindAttribLocation(program, vertexDef[attribute].id, attribute); 67 | }); 68 | 69 | gl.linkProgram(program); 70 | gl.useProgram(program); 71 | }, 72 | }; -------------------------------------------------------------------------------- /04-Attributes/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | // vertexData = [...] 9 | 10 | // create buffer 11 | // load vertexData into buffer 12 | 13 | // create vertex shader 14 | // create fragment shader 15 | // create program 16 | // attach shaders to program 17 | 18 | // enable vertex attributes 19 | 20 | // draw 21 | 22 | const vertexData = [ 23 | 0, 1, 0, // V1.position 24 | 1, -1, 0, // V2.position 25 | -1, -1, 0, // V3.position 26 | ]; 27 | 28 | const colorData = [ 29 | 1, 0, 0, // V1.color 30 | 0, 1, 0, // V2.color 31 | 0, 0, 1, // V3.color 32 | ]; 33 | 34 | const positionBuffer = gl.createBuffer(); 35 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 36 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 37 | 38 | const colorBuffer = gl.createBuffer(); 39 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 40 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW); 41 | 42 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 43 | gl.shaderSource(vertexShader, ` 44 | precision mediump float; 45 | 46 | attribute vec3 position; 47 | attribute vec3 color; 48 | varying vec3 vColor; 49 | 50 | void main() { 51 | vColor = color; 52 | gl_Position = vec4(position, 1); 53 | } 54 | `); 55 | gl.compileShader(vertexShader); 56 | 57 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 58 | gl.shaderSource(fragmentShader, ` 59 | precision mediump float; 60 | 61 | varying vec3 vColor; 62 | 63 | void main() { 64 | gl_FragColor = vec4(vColor, 1); 65 | } 66 | `); 67 | gl.compileShader(fragmentShader); 68 | console.log(gl.getShaderInfoLog(fragmentShader)); 69 | 70 | const program = gl.createProgram(); 71 | gl.attachShader(program, vertexShader); 72 | gl.attachShader(program, fragmentShader); 73 | 74 | gl.linkProgram(program); 75 | 76 | const positionLocation = gl.getAttribLocation(program, `position`); 77 | gl.enableVertexAttribArray(positionLocation); 78 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 79 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 80 | 81 | const colorLocation = gl.getAttribLocation(program, `color`); 82 | gl.enableVertexAttribArray(colorLocation); 83 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 84 | gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); 85 | 86 | gl.useProgram(program); 87 | gl.drawArrays(gl.TRIANGLES, 0, 3); 88 | -------------------------------------------------------------------------------- /05-Matrix/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | const vertexData = [ 9 | 0, 1, 0, // V1.position 10 | 1, -1, 0, // V2.position 11 | -1, -1, 0, // V3.position 12 | ]; 13 | 14 | const colorData = [ 15 | 1, 0, 0, // V1.color 16 | 0, 1, 0, // V2.color 17 | 0, 0, 1, // V3.color 18 | ]; 19 | 20 | const positionBuffer = gl.createBuffer(); 21 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 22 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 23 | 24 | const colorBuffer = gl.createBuffer(); 25 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 26 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW); 27 | 28 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 29 | gl.shaderSource(vertexShader, ` 30 | precision mediump float; 31 | 32 | attribute vec3 position; 33 | attribute vec3 color; 34 | varying vec3 vColor; 35 | 36 | uniform mat4 matrix; 37 | 38 | void main() { 39 | vColor = color; 40 | gl_Position = matrix * vec4(position, 1); 41 | } 42 | `); 43 | gl.compileShader(vertexShader); 44 | 45 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 46 | gl.shaderSource(fragmentShader, ` 47 | precision mediump float; 48 | 49 | varying vec3 vColor; 50 | 51 | void main() { 52 | gl_FragColor = vec4(vColor, 1); 53 | } 54 | `); 55 | gl.compileShader(fragmentShader); 56 | console.log(gl.getShaderInfoLog(fragmentShader)); 57 | 58 | const program = gl.createProgram(); 59 | gl.attachShader(program, vertexShader); 60 | gl.attachShader(program, fragmentShader); 61 | 62 | gl.linkProgram(program); 63 | 64 | const positionLocation = gl.getAttribLocation(program, `position`); 65 | gl.enableVertexAttribArray(positionLocation); 66 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 67 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 68 | 69 | const colorLocation = gl.getAttribLocation(program, `color`); 70 | gl.enableVertexAttribArray(colorLocation); 71 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 72 | gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); 73 | 74 | gl.useProgram(program); 75 | 76 | const uniformLocations = { 77 | matrix: gl.getUniformLocation(program, `matrix`), 78 | }; 79 | 80 | const matrix = mat4.create(); 81 | 82 | mat4.translate(matrix, matrix, [.2, .5, 0]); 83 | 84 | mat4.scale(matrix, matrix, [0.25, 0.25, 0.25]); 85 | 86 | function animate() { 87 | requestAnimationFrame(animate); 88 | mat4.rotateZ(matrix, matrix, Math.PI/2 / 70); 89 | gl.uniformMatrix4fv(uniformLocations.matrix, false, matrix); 90 | gl.drawArrays(gl.TRIANGLES, 0, 3); 91 | } 92 | 93 | animate(); 94 | -------------------------------------------------------------------------------- /09-Point-Cloud-Demo/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | function spherePointCloud(pointCount) { 9 | let points = []; 10 | for (let i = 0; i < pointCount; i++) { 11 | const r = () => Math.random() - 0.5; // -.5 < x < 0.5 12 | const inputPoint = [r(), r(), r()]; 13 | 14 | const outputPoint = vec3.normalize(vec3.create(), inputPoint); 15 | 16 | points.push(...outputPoint); 17 | 18 | } 19 | 20 | return points; 21 | } 22 | 23 | const vertexData = spherePointCloud(1e5); 24 | 25 | const positionBuffer = gl.createBuffer(); 26 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 27 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 28 | 29 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 30 | gl.shaderSource(vertexShader, ` 31 | precision mediump float; 32 | 33 | attribute vec3 position; 34 | varying vec3 vColor; 35 | 36 | uniform mat4 matrix; 37 | 38 | void main() { 39 | vColor = vec3(position.xy, 1); 40 | gl_Position = matrix * vec4(position, 1); 41 | } 42 | `); 43 | gl.compileShader(vertexShader); 44 | 45 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 46 | gl.shaderSource(fragmentShader, ` 47 | precision mediump float; 48 | 49 | varying vec3 vColor; 50 | 51 | void main() { 52 | gl_FragColor = vec4(vColor, 1); 53 | } 54 | `); 55 | gl.compileShader(fragmentShader); 56 | console.log(gl.getShaderInfoLog(fragmentShader)); 57 | 58 | const program = gl.createProgram(); 59 | gl.attachShader(program, vertexShader); 60 | gl.attachShader(program, fragmentShader); 61 | 62 | gl.linkProgram(program); 63 | 64 | const positionLocation = gl.getAttribLocation(program, `position`); 65 | gl.enableVertexAttribArray(positionLocation); 66 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 67 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 68 | 69 | gl.useProgram(program); 70 | gl.enable(gl.DEPTH_TEST); 71 | 72 | const uniformLocations = { 73 | matrix: gl.getUniformLocation(program, `matrix`), 74 | }; 75 | 76 | const modelMatrix = mat4.create(); 77 | const viewMatrix = mat4.create(); 78 | const projectionMatrix = mat4.create(); 79 | mat4.perspective(projectionMatrix, 80 | 75 * Math.PI/180, // vertical field-of-view (angle, radians) 81 | canvas.width/canvas.height, // aspect W/H 82 | 1e-4, // near cull distance 83 | 1e4 // far cull distance 84 | ); 85 | 86 | const mvMatrix = mat4.create(); 87 | const mvpMatrix = mat4.create(); 88 | 89 | mat4.translate(modelMatrix, modelMatrix, [0, 0, 0]); 90 | 91 | mat4.translate(viewMatrix, viewMatrix, [0, 0.1, 2]); 92 | mat4.invert(viewMatrix, viewMatrix); 93 | 94 | function animate() { 95 | requestAnimationFrame(animate); 96 | 97 | mat4.rotateY(modelMatrix, modelMatrix, 0.03); 98 | 99 | mat4.multiply(mvMatrix, viewMatrix, modelMatrix); 100 | mat4.multiply(mvpMatrix, projectionMatrix, mvMatrix); 101 | gl.uniformMatrix4fv(uniformLocations.matrix, false, mvpMatrix); 102 | gl.drawArrays(gl.POINTS, 0, vertexData.length / 3); 103 | } 104 | 105 | animate(); 106 | -------------------------------------------------------------------------------- /06-Box/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | const vertexData = [ 9 | 10 | // Front 11 | 0.5, 0.5, 0.5, 12 | 0.5, -.5, 0.5, 13 | -.5, 0.5, 0.5, 14 | -.5, 0.5, 0.5, 15 | 0.5, -.5, 0.5, 16 | -.5, -.5, 0.5, 17 | 18 | // Left 19 | -.5, 0.5, 0.5, 20 | -.5, -.5, 0.5, 21 | -.5, 0.5, -.5, 22 | -.5, 0.5, -.5, 23 | -.5, -.5, 0.5, 24 | -.5, -.5, -.5, 25 | 26 | // Back 27 | -.5, 0.5, -.5, 28 | -.5, -.5, -.5, 29 | 0.5, 0.5, -.5, 30 | 0.5, 0.5, -.5, 31 | -.5, -.5, -.5, 32 | 0.5, -.5, -.5, 33 | 34 | // Right 35 | 0.5, 0.5, -.5, 36 | 0.5, -.5, -.5, 37 | 0.5, 0.5, 0.5, 38 | 0.5, 0.5, 0.5, 39 | 0.5, -.5, 0.5, 40 | 0.5, -.5, -.5, 41 | 42 | // Top 43 | 0.5, 0.5, 0.5, 44 | 0.5, 0.5, -.5, 45 | -.5, 0.5, 0.5, 46 | -.5, 0.5, 0.5, 47 | 0.5, 0.5, -.5, 48 | -.5, 0.5, -.5, 49 | 50 | // Bottom 51 | 0.5, -.5, 0.5, 52 | 0.5, -.5, -.5, 53 | -.5, -.5, 0.5, 54 | -.5, -.5, 0.5, 55 | 0.5, -.5, -.5, 56 | -.5, -.5, -.5, 57 | ]; 58 | 59 | // const colorData = [ 60 | // 1, 0, 0, // V1.color 61 | // 0, 1, 0, // V2.color 62 | // 0, 0, 1, // V3.color 63 | // ]; 64 | 65 | function randomColor() { 66 | return [Math.random(), Math.random(), Math.random()]; 67 | } 68 | 69 | // let colorData = [ 70 | // ...randomColor(), 71 | // ...randomColor(), 72 | // ...randomColor(), 73 | // ]; 74 | 75 | let colorData = []; 76 | for (let face = 0; face < 6; face++) { 77 | let faceColor = randomColor(); 78 | for (let vertex = 0; vertex < 6; vertex++) { 79 | colorData.push(...faceColor); 80 | } 81 | } 82 | 83 | const positionBuffer = gl.createBuffer(); 84 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 85 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 86 | 87 | const colorBuffer = gl.createBuffer(); 88 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 89 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW); 90 | 91 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 92 | gl.shaderSource(vertexShader, ` 93 | precision mediump float; 94 | 95 | attribute vec3 position; 96 | attribute vec3 color; 97 | varying vec3 vColor; 98 | 99 | uniform mat4 matrix; 100 | 101 | void main() { 102 | vColor = color; 103 | gl_Position = matrix * vec4(position, 1); 104 | } 105 | `); 106 | gl.compileShader(vertexShader); 107 | 108 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 109 | gl.shaderSource(fragmentShader, ` 110 | precision mediump float; 111 | 112 | varying vec3 vColor; 113 | 114 | void main() { 115 | gl_FragColor = vec4(vColor, 1); 116 | } 117 | `); 118 | gl.compileShader(fragmentShader); 119 | console.log(gl.getShaderInfoLog(fragmentShader)); 120 | 121 | const program = gl.createProgram(); 122 | gl.attachShader(program, vertexShader); 123 | gl.attachShader(program, fragmentShader); 124 | 125 | gl.linkProgram(program); 126 | 127 | const positionLocation = gl.getAttribLocation(program, `position`); 128 | gl.enableVertexAttribArray(positionLocation); 129 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 130 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 131 | 132 | const colorLocation = gl.getAttribLocation(program, `color`); 133 | gl.enableVertexAttribArray(colorLocation); 134 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 135 | gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); 136 | 137 | gl.useProgram(program); 138 | gl.enable(gl.DEPTH_TEST); 139 | 140 | const uniformLocations = { 141 | matrix: gl.getUniformLocation(program, `matrix`), 142 | }; 143 | 144 | const matrix = mat4.create(); 145 | 146 | mat4.translate(matrix, matrix, [.2, .5, 0]); 147 | 148 | mat4.scale(matrix, matrix, [0.25, 0.25, 0.25]); 149 | 150 | function animate() { 151 | requestAnimationFrame(animate); 152 | mat4.rotateZ(matrix, matrix, Math.PI/2 / 70); 153 | mat4.rotateX(matrix, matrix, Math.PI/2 / 70); 154 | gl.uniformMatrix4fv(uniformLocations.matrix, false, matrix); 155 | gl.drawArrays(gl.TRIANGLES, 0, vertexData.length / 3); 156 | } 157 | 158 | animate(); 159 | -------------------------------------------------------------------------------- /07-Projection/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | const vertexData = [ 9 | 10 | // Front 11 | 0.5, 0.5, 0.5, 12 | 0.5, -.5, 0.5, 13 | -.5, 0.5, 0.5, 14 | -.5, 0.5, 0.5, 15 | 0.5, -.5, 0.5, 16 | -.5, -.5, 0.5, 17 | 18 | // Left 19 | -.5, 0.5, 0.5, 20 | -.5, -.5, 0.5, 21 | -.5, 0.5, -.5, 22 | -.5, 0.5, -.5, 23 | -.5, -.5, 0.5, 24 | -.5, -.5, -.5, 25 | 26 | // Back 27 | -.5, 0.5, -.5, 28 | -.5, -.5, -.5, 29 | 0.5, 0.5, -.5, 30 | 0.5, 0.5, -.5, 31 | -.5, -.5, -.5, 32 | 0.5, -.5, -.5, 33 | 34 | // Right 35 | 0.5, 0.5, -.5, 36 | 0.5, -.5, -.5, 37 | 0.5, 0.5, 0.5, 38 | 0.5, 0.5, 0.5, 39 | 0.5, -.5, 0.5, 40 | 0.5, -.5, -.5, 41 | 42 | // Top 43 | 0.5, 0.5, 0.5, 44 | 0.5, 0.5, -.5, 45 | -.5, 0.5, 0.5, 46 | -.5, 0.5, 0.5, 47 | 0.5, 0.5, -.5, 48 | -.5, 0.5, -.5, 49 | 50 | // Bottom 51 | 0.5, -.5, 0.5, 52 | 0.5, -.5, -.5, 53 | -.5, -.5, 0.5, 54 | -.5, -.5, 0.5, 55 | 0.5, -.5, -.5, 56 | -.5, -.5, -.5, 57 | ]; 58 | 59 | function randomColor() { 60 | return [Math.random(), Math.random(), Math.random()]; 61 | } 62 | 63 | let colorData = []; 64 | for (let face = 0; face < 6; face++) { 65 | let faceColor = randomColor(); 66 | for (let vertex = 0; vertex < 6; vertex++) { 67 | colorData.push(...faceColor); 68 | } 69 | } 70 | 71 | const positionBuffer = gl.createBuffer(); 72 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 73 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 74 | 75 | const colorBuffer = gl.createBuffer(); 76 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 77 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW); 78 | 79 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 80 | gl.shaderSource(vertexShader, ` 81 | precision mediump float; 82 | 83 | attribute vec3 position; 84 | attribute vec3 color; 85 | varying vec3 vColor; 86 | 87 | uniform mat4 matrix; 88 | 89 | void main() { 90 | vColor = color; 91 | gl_Position = matrix * vec4(position, 1); 92 | } 93 | `); 94 | gl.compileShader(vertexShader); 95 | 96 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 97 | gl.shaderSource(fragmentShader, ` 98 | precision mediump float; 99 | 100 | varying vec3 vColor; 101 | 102 | void main() { 103 | gl_FragColor = vec4(vColor, 1); 104 | } 105 | `); 106 | gl.compileShader(fragmentShader); 107 | console.log(gl.getShaderInfoLog(fragmentShader)); 108 | 109 | const program = gl.createProgram(); 110 | gl.attachShader(program, vertexShader); 111 | gl.attachShader(program, fragmentShader); 112 | 113 | gl.linkProgram(program); 114 | 115 | const positionLocation = gl.getAttribLocation(program, `position`); 116 | gl.enableVertexAttribArray(positionLocation); 117 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 118 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 119 | 120 | const colorLocation = gl.getAttribLocation(program, `color`); 121 | gl.enableVertexAttribArray(colorLocation); 122 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 123 | gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); 124 | 125 | gl.useProgram(program); 126 | gl.enable(gl.DEPTH_TEST); 127 | 128 | const uniformLocations = { 129 | matrix: gl.getUniformLocation(program, `matrix`), 130 | }; 131 | 132 | const matrix = mat4.create(); 133 | const projectionMatrix = mat4.create(); 134 | mat4.perspective(projectionMatrix, 135 | 75 * Math.PI/180, // vertical field-of-view (angle, radians) 136 | canvas.width/canvas.height, // aspect W/H 137 | 1e-4, // near cull distance 138 | 1e4 // far cull distance 139 | ); 140 | 141 | const finalMatrix = mat4.create(); 142 | 143 | mat4.translate(matrix, matrix, [.2, .5, -2]); 144 | 145 | function animate() { 146 | requestAnimationFrame(animate); 147 | // mat4.rotateZ(matrix, matrix, Math.PI/2 / 70); 148 | // mat4.rotateX(matrix, matrix, 0.09); 149 | 150 | mat4.multiply(finalMatrix, projectionMatrix, matrix); 151 | gl.uniformMatrix4fv(uniformLocations.matrix, false, finalMatrix); 152 | gl.drawArrays(gl.TRIANGLES, 0, vertexData.length / 3); 153 | } 154 | 155 | animate(); 156 | -------------------------------------------------------------------------------- /09-Point-Cloud-Demo/public/point-functions.js: -------------------------------------------------------------------------------- 1 | function createPointCloud(pointFunction, pointCount) { 2 | const pointCloud = []; 3 | for (let i = 0; i < pointCount; i++) { 4 | const r = () => Math.random() - 0.5; 5 | const point = pointFunction(r(), r(), r()); 6 | pointCloud.push(...point); 7 | } 8 | return pointCloud; 9 | } 10 | 11 | const shapes = { 12 | 13 | box(...position) { 14 | return position; 15 | }, 16 | 17 | boxShell(...position) { 18 | const distToWall = a => 0.5-Math.abs(a); 19 | const normalize1D = n => n/Math.abs(n); 20 | 21 | const dists = position.map(distToWall); 22 | const minDistToWall = Math.min(...dists); 23 | 24 | if (minDistToWall == dists[0]) { 25 | position[0] = 0.5 * normalize1D(position[0]); 26 | } else if (minDistToWall == dists[1]) { 27 | position[1] = 0.5 * normalize1D(position[1]); 28 | } else if (minDistToWall == dists[2]) { 29 | position[2] = 0.5 * normalize1D(position[2]); 30 | } 31 | 32 | return position; 33 | }, 34 | 35 | sphere(...position) { 36 | const R = 1; 37 | 38 | const normalize1D = n => n/Math.abs(n); 39 | let [r, a, b] = position.map(n=> n + 0.5); 40 | r *= R; 41 | a *= 2 * Math.PI; // 0 < a < 2PI 42 | b = position[2] * 2; // -1 < b < 1 43 | 44 | let x = r * Math.cos(a); 45 | let y = r * Math.sin(a); 46 | let z = b * Math.sqrt(R*R-r*r); 47 | 48 | return [x,y,z]; 49 | }, 50 | 51 | sphereShell(...position) { 52 | return vec3.normalize(vec3.create(), position); 53 | }, 54 | 55 | sphereShell2(...position) { 56 | 57 | const R = 1; 58 | 59 | const normalize1D = n => n/Math.abs(n); 60 | let [r, a, b] = position.map(n=> n + 0.5); 61 | r *= R; 62 | a *= 2 * Math.PI; // 0 < a < 2PI 63 | b = position[2] * 2; // -1 < b < 1 64 | 65 | let x = r * Math.cos(a); 66 | let y = r * Math.sin(a); 67 | let z = normalize1D(b) * Math.sqrt(R*R-r*r); 68 | 69 | return [x,y,z]; 70 | }, 71 | 72 | cylinderShellInfinte(...position) { 73 | const R = 1; 74 | 75 | let [_, a, b] = position.map(n=> n + 0.5); 76 | a *= 2 * Math.PI; // 0 < a < 2PI 77 | b *= 2 * Math.PI; // 0 < b < 2PI 78 | 79 | let x = R * Math.cos(a); 80 | let y = R * Math.sin(a); 81 | let z = Math.tan(b); 82 | 83 | return [x,y,z]; 84 | }, 85 | 86 | cone(...position) { 87 | const R = 1; 88 | 89 | let [r, a, b] = position.map(n=> n + 0.5); 90 | r *= R; 91 | a *= 2 * Math.PI; // 0 < a < 2PI 92 | 93 | let x = r * Math.cos(a); 94 | let y = r * Math.sin(a); 95 | let z = b * (R-r); 96 | 97 | return [x,y,z]; 98 | }, 99 | 100 | coneShell(...position) { 101 | const R = 1; 102 | 103 | let [r, a, b] = position.map(n=> n + 0.5); 104 | r *= R; 105 | a *= 2 * Math.PI; // 0 < a < 2PI 106 | 107 | let x = r * Math.cos(a); 108 | let y = r * Math.sin(a); 109 | let z = R-r; 110 | 111 | return [x,y,z]; 112 | }, 113 | 114 | cylinder(...position) { 115 | const R = 1; 116 | 117 | let [r, a, _] = position.map(n=> n + 0.5); 118 | r *= R; 119 | a *= 2 * Math.PI; // 0 < a < 2PI 120 | 121 | let x = r * Math.cos(a); 122 | let y = r * Math.sin(a); 123 | let z = position[2]; 124 | 125 | return [x,y,z]; 126 | }, 127 | 128 | cylinderShell(...position) { 129 | const R = 1; 130 | 131 | let [r, a, _] = position.map(n=> n + 0.5); 132 | r *= R; 133 | a *= 2 * Math.PI; // 0 < a < 2PI 134 | 135 | let x = R * Math.cos(a); 136 | let y = R * Math.sin(a); 137 | let z = position[2]; 138 | 139 | return [x,y,z]; 140 | }, 141 | 142 | circularHyperboloid(...position) { // maybe?? 143 | let [_, a, b] = position.map(n=> n + 0.5); 144 | a *= 2 * Math.PI; // 0 < a < 2PI 145 | b *= 2 * Math.PI; // 0 < b < 2PI 146 | 147 | let x = Math.cos(a) / Math.cos(b); 148 | let y = Math.sin(a) / Math.cos(b); 149 | let z = Math.sin(b); 150 | 151 | return [x,y,z]; 152 | }, 153 | }; -------------------------------------------------------------------------------- /Demo/Sandbox/laser.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 23 | 25 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60 | 61 | 71 | 72 | 94 | 96 | 97 | 99 | image/svg+xml 100 | 102 | 103 | 104 | 105 | 106 | 111 | 118 | 127 | 128 | 129 | -------------------------------------------------------------------------------- /Demo/Color-Rect/main.js: -------------------------------------------------------------------------------- 1 | let canvas 2 | let gl 3 | 4 | async function loadShaderProgram(vertexURL, fragmentURL) { 5 | 6 | // Fetch shader source code from given URLs 7 | 8 | let res; 9 | 10 | res = await fetch(vertexURL); 11 | const vertexSource = await res.text(); 12 | 13 | res = await fetch(fragmentURL); 14 | const fragmentSource = await res.text(); 15 | 16 | // Util for loading individual shaders 17 | 18 | function loadShader(type, source) { 19 | const shader = gl.createShader(type); 20 | gl.shaderSource(shader, source); 21 | gl.compileShader(shader); 22 | 23 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 24 | if (type === gl.VERTEX_SHADER) { 25 | throw new Error(`(WebGL vertex shader) ${gl.getShaderInfoLog(shader)}`); 26 | } else if (type === gl.FRAGMENT_SHADER) { 27 | throw new Error(`(WebGL fragment shader) ${gl.getShaderInfoLog(shader)}`); 28 | } 29 | } 30 | 31 | return shader; 32 | } 33 | 34 | const vertexShader = loadShader(gl.VERTEX_SHADER, vertexSource); 35 | const fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentSource); 36 | 37 | const program = gl.createProgram(); 38 | gl.attachShader(program, vertexShader); 39 | gl.attachShader(program, fragmentShader); 40 | gl.linkProgram(program); 41 | 42 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 43 | throw new Error(`(WebGL shader program) ${gl.getProgramInfoLog(vertexShader)}`) 44 | } 45 | 46 | return program; 47 | } 48 | 49 | const FourCorners = new Float32Array([ 50 | // Z=0 51 | // 1 --> 2 52 | // | \ | 53 | // | \ | 54 | // 0 <-- 3 55 | 56 | -1, -1, 0, 57 | -1, 1, 0, 58 | 1, -1, 0, 59 | 1, 1, 0, 60 | ]); 61 | 62 | const myVertices = FourCorners; 63 | 64 | class App { 65 | constructor() { 66 | this.modelMatrix = mat4.create(); 67 | this.viewMatrix = mat4.create(); 68 | this.projectionMatrix = mat4.create(); 69 | 70 | this.camera = {}; 71 | this.camera.translation = vec3.create(); 72 | this.camera.rotation = quat.create(); 73 | } 74 | 75 | async main() { 76 | canvas = document.querySelector(`canvas`); 77 | canvas.width = 720;//window.innerWidth; 78 | canvas.height = canvas.width*9/16;//window.innerHeight; 79 | gl = canvas.getContext(`webgl`); 80 | 81 | if (!gl) { 82 | throw new Error(`This browser does not support WebGL`); 83 | } 84 | 85 | 86 | const program = await loadShaderProgram(`vertex.glsl`, `fragment.glsl`); 87 | gl.useProgram(program); 88 | 89 | const attributes = { 90 | position: gl.getAttribLocation(program, `vertex_position`) 91 | }; 92 | 93 | this.uniforms = { 94 | model_matrix: gl.getUniformLocation(program, `model_matrix`), 95 | view_matrix: gl.getUniformLocation(program, `view_matrix`), 96 | projection_matrix: gl.getUniformLocation(program, `projection_matrix`), 97 | } 98 | 99 | const buffers = { 100 | vertex: gl.createBuffer(), 101 | index: gl.createBuffer(), 102 | } 103 | 104 | // bind buffers and load data to GPU 105 | gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertex); 106 | gl.bufferData(gl.ARRAY_BUFFER, myVertices, gl.STATIC_DRAW); 107 | 108 | // descripe data layout of the `position` attribute 109 | gl.vertexAttribPointer( 110 | attributes.position, 111 | 3, /* size */ 112 | gl.FLOAT, /* type */ 113 | false, /* normalized? */ 114 | 12, /* stride */ 115 | 0, /* offset */ 116 | ); 117 | 118 | 119 | gl.enableVertexAttribArray(attributes.position); 120 | 121 | gl.enable(gl.DEPTH_TEST); 122 | 123 | this.render(); 124 | } 125 | 126 | update() { 127 | // set uniforms 128 | gl.uniformMatrix4fv(this.uniforms.model_matrix, false, this.modelMatrix); 129 | gl.uniformMatrix4fv(this.uniforms.view_matrix, false, this.viewMatrix); 130 | gl.uniformMatrix4fv(this.uniforms.projection_matrix, false, this.projectionMatrix); 131 | } 132 | 133 | render() { 134 | this.update(); 135 | 136 | // gl.clearColor(1, 1, 1, 1); 137 | // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 138 | 139 | gl.drawArrays(gl.TRIANGLE_STRIP, 0, myVertices.length/3); 140 | requestAnimationFrame(this.render.bind(this)); 141 | } 142 | } 143 | 144 | const app = new App(); 145 | app.main(); -------------------------------------------------------------------------------- /10-Textures/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | const vertexData = [ 9 | 10 | // Front 11 | 0.5, 0.5, 0.5, // top right 12 | 0.5, -.5, 0.5, // bottom right 13 | -.5, 0.5, 0.5, // top left 14 | -.5, 0.5, 0.5, // top left 15 | 0.5, -.5, 0.5, // bottom right 16 | -.5, -.5, 0.5, // bottom left 17 | 18 | // Left 19 | -.5, 0.5, 0.5, 20 | -.5, -.5, 0.5, 21 | -.5, 0.5, -.5, 22 | -.5, 0.5, -.5, 23 | -.5, -.5, 0.5, 24 | -.5, -.5, -.5, 25 | 26 | // Back 27 | -.5, 0.5, -.5, 28 | -.5, -.5, -.5, 29 | 0.5, 0.5, -.5, 30 | 0.5, 0.5, -.5, 31 | -.5, -.5, -.5, 32 | 0.5, -.5, -.5, 33 | 34 | // Right 35 | 0.5, 0.5, -.5, 36 | 0.5, -.5, -.5, 37 | 0.5, 0.5, 0.5, 38 | 0.5, 0.5, 0.5, 39 | 0.5, -.5, 0.5, 40 | 0.5, -.5, -.5, 41 | 42 | // Top 43 | 0.5, 0.5, 0.5, 44 | 0.5, 0.5, -.5, 45 | -.5, 0.5, 0.5, 46 | -.5, 0.5, 0.5, 47 | 0.5, 0.5, -.5, 48 | -.5, 0.5, -.5, 49 | 50 | // Underside 51 | 0.5, -.5, 0.5, 52 | 0.5, -.5, -.5, 53 | -.5, -.5, 0.5, 54 | -.5, -.5, 0.5, 55 | 0.5, -.5, -.5, 56 | -.5, -.5, -.5, 57 | ]; 58 | 59 | 60 | 61 | 62 | // Construct an Array by repeating `pattern` n times 63 | function repeat(n, pattern) { 64 | return [...Array(n)].reduce(sum => sum.concat(pattern), []); 65 | } 66 | 67 | const uvData = repeat(6, [ 68 | 1, 1, // top right 69 | 1, 0, // bottom right 70 | 0, 1, // top left 71 | 72 | 0, 1, // top left 73 | 1, 0, // bottom right 74 | 0, 0 // bottom left 75 | ]); 76 | 77 | const positionBuffer = gl.createBuffer(); 78 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 79 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 80 | 81 | const uvBuffer = gl.createBuffer(); 82 | gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer); 83 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvData), gl.STATIC_DRAW); 84 | 85 | 86 | // RESOURCE LOADING 87 | // ================ 88 | 89 | function loadTexture(url) { 90 | const texture = gl.createTexture(); 91 | const image = new Image(); 92 | 93 | image.onload = e => { 94 | gl.bindTexture(gl.TEXTURE_2D, texture); 95 | 96 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 97 | 98 | gl.generateMipmap(gl.TEXTURE_2D); 99 | }; 100 | 101 | image.src = url; 102 | return texture; 103 | } 104 | 105 | 106 | 107 | const brick = loadTexture(`textures/default_brick.png`); 108 | 109 | gl.activeTexture(gl.TEXTURE0); 110 | gl.bindTexture(gl.TEXTURE_2D, brick); 111 | 112 | // SHADER PROGRAM 113 | // ============== 114 | let uniformLocations; 115 | (function shaderProgram() { 116 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 117 | gl.shaderSource(vertexShader, ` 118 | precision mediump float; 119 | 120 | attribute vec3 position; 121 | attribute vec2 uv; 122 | 123 | varying vec2 vUV; 124 | 125 | uniform mat4 matrix; 126 | 127 | void main() { 128 | vUV = uv; 129 | gl_Position = matrix * vec4(position, 1); 130 | } 131 | `); 132 | gl.compileShader(vertexShader); 133 | 134 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 135 | gl.shaderSource(fragmentShader, ` 136 | precision mediump float; 137 | 138 | varying vec2 vUV; 139 | uniform sampler2D textureID; 140 | 141 | void main() { 142 | gl_FragColor = texture2D(textureID, vUV); 143 | } 144 | `); 145 | gl.compileShader(fragmentShader); 146 | console.log(gl.getShaderInfoLog(fragmentShader)); 147 | 148 | const program = gl.createProgram(); 149 | gl.attachShader(program, vertexShader); 150 | gl.attachShader(program, fragmentShader); 151 | 152 | gl.linkProgram(program); 153 | 154 | const positionLocation = gl.getAttribLocation(program, `position`); 155 | gl.enableVertexAttribArray(positionLocation); 156 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 157 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 158 | 159 | const uvLocation = gl.getAttribLocation(program, `uv`); 160 | gl.enableVertexAttribArray(uvLocation); 161 | gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer); 162 | gl.vertexAttribPointer(uvLocation, 2, gl.FLOAT, false, 0, 0); 163 | 164 | gl.useProgram(program); 165 | gl.enable(gl.DEPTH_TEST); 166 | 167 | uniformLocations = { 168 | matrix: gl.getUniformLocation(program, `matrix`), 169 | textureID: gl.getUniformLocation(program, 'textureID'), 170 | }; 171 | 172 | gl.uniform1i(uniformLocations.textureID, 0); 173 | })(); 174 | 175 | 176 | // MATRICES 177 | // ======== 178 | const modelMatrix = mat4.create(); 179 | const viewMatrix = mat4.create(); 180 | const projectionMatrix = mat4.create(); 181 | mat4.perspective(projectionMatrix, 182 | 75 * Math.PI / 180, // vertical field-of-view (angle, radians) 183 | canvas.width / canvas.height, // aspect W/H 184 | 1e-4, // near cull distance 185 | 1e4 // far cull distance 186 | ); 187 | 188 | const mvMatrix = mat4.create(); 189 | const mvpMatrix = mat4.create(); 190 | 191 | mat4.translate(viewMatrix, viewMatrix, [0, 0.1, 2]); 192 | mat4.invert(viewMatrix, viewMatrix); 193 | 194 | 195 | // ANIMATION LOOP 196 | // ============== 197 | 198 | function animate() { 199 | requestAnimationFrame(animate); 200 | 201 | mat4.rotateX(modelMatrix, modelMatrix, Math.PI/60); 202 | mat4.rotateY(modelMatrix, modelMatrix, Math.PI/160); 203 | 204 | mat4.multiply(mvMatrix, viewMatrix, modelMatrix); 205 | mat4.multiply(mvpMatrix, projectionMatrix, mvMatrix); 206 | gl.uniformMatrix4fv(uniformLocations.matrix, false, mvpMatrix); 207 | gl.drawArrays(gl.TRIANGLES, 0, vertexData.length / 3); 208 | } 209 | 210 | animate(); 211 | -------------------------------------------------------------------------------- /Demo/Point-Cloud/main.js: -------------------------------------------------------------------------------- 1 | let canvas 2 | let gl 3 | 4 | async function loadShaderProgram(vertexURL, fragmentURL) { 5 | 6 | // Fetch shader source code from given URLs 7 | 8 | let res; 9 | 10 | res = await fetch(vertexURL); 11 | const vertexSource = await res.text(); 12 | 13 | res = await fetch(fragmentURL); 14 | const fragmentSource = await res.text(); 15 | 16 | // Util for loading individual shaders 17 | 18 | function loadShader(type, source) { 19 | const shader = gl.createShader(type); 20 | gl.shaderSource(shader, source); 21 | gl.compileShader(shader); 22 | 23 | if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 24 | if (type === gl.VERTEX_SHADER) { 25 | throw new Error(`(WebGL vertex shader) ${gl.getShaderInfoLog(shader)}`); 26 | } else if (type === gl.FRAGMENT_SHADER) { 27 | throw new Error(`(WebGL fragment shader) ${gl.getShaderInfoLog(shader)}`); 28 | } 29 | } 30 | 31 | return shader; 32 | } 33 | 34 | const vertexShader = loadShader(gl.VERTEX_SHADER, vertexSource); 35 | const fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentSource); 36 | 37 | const program = gl.createProgram(); 38 | gl.attachShader(program, vertexShader); 39 | gl.attachShader(program, fragmentShader); 40 | gl.linkProgram(program); 41 | 42 | if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 43 | throw new Error(`(WebGL shader program) ${gl.getProgramInfoLog(vertexShader)}`) 44 | } 45 | 46 | return program; 47 | } 48 | 49 | const FourCorners = new Float32Array([ 50 | // Z=0 51 | // 1 --> 2 52 | // | \ | 53 | // | \ | 54 | // 0 <-- 3 55 | 56 | -1, -1, 0, 57 | -1, 1, 0, 58 | 1, -1, 0, 59 | 1, 1, 0, 60 | ]); 61 | 62 | // const myVertices = FourCorners; 63 | 64 | function pointCloudSphere(radius, n) { 65 | points = []; 66 | 67 | for (let i = 0; i < n; i++) { 68 | let a = (Math.random() * 2) - 1; 69 | let b = (Math.random() * 2) - 1; 70 | let c = (Math.random() * 2) - 1; 71 | let axis = [a, b, c]; 72 | vec3.normalize(axis, axis); 73 | 74 | let point = vec3.scale(vec3.create(), axis, radius); 75 | 76 | point.forEach(element => { 77 | points.push(element); 78 | }); 79 | } 80 | 81 | return new Float32Array(points); 82 | } 83 | 84 | const myVertices = pointCloudSphere(0.75, 1e5); 85 | 86 | const myIndices = new Int8Array([ 87 | 0, 1, 3, 2 88 | ]); 89 | 90 | class App { 91 | constructor() { 92 | this.modelMatrix = mat4.create(); 93 | this.viewMatrix = mat4.create(); 94 | this.projectionMatrix = mat4.create(); 95 | 96 | this.camera = {}; 97 | this.camera.translation = [0, 0, 0]; 98 | this.camera.rotation = quat.create(); 99 | } 100 | 101 | async main() { 102 | canvas = document.querySelector(`canvas`); 103 | canvas.width = window.innerWidth; 104 | canvas.height = window.innerHeight; 105 | gl = canvas.getContext(`webgl`); 106 | 107 | if (!gl) { 108 | throw new Error(`This browser does not support WebGL`); 109 | } 110 | 111 | 112 | const program = await loadShaderProgram(`vertex.glsl`, `fragment.glsl`); 113 | gl.useProgram(program); 114 | 115 | const attributes = { 116 | position: gl.getAttribLocation(program, `vertex_position`) 117 | }; 118 | 119 | this.uniforms = { 120 | model_matrix: gl.getUniformLocation(program, `model_matrix`), 121 | view_matrix: gl.getUniformLocation(program, `view_matrix`), 122 | projection_matrix: gl.getUniformLocation(program, `projection_matrix`), 123 | } 124 | 125 | const buffers = { 126 | vertex: gl.createBuffer(), 127 | index: gl.createBuffer(), 128 | } 129 | 130 | mat4.perspective(this.projectionMatrix, Math.PI/2, 16/9, 1e-4, 1e4); 131 | // mat4.ortho(this.projectionMatrix, -1, 1, -1, 1, -1, 0.1, 1); 132 | 133 | window.onkeypress = e => { 134 | if (e.key == 'w') { 135 | this.camera.translation[2] += 0.25; 136 | } else if (e.key == 's') { 137 | this.camera.translation[2] -= 0.25; 138 | } else if (e.key == 'a') { 139 | this.camera.translation[0] -= 0.25; 140 | } else if (e.key == 'd') { 141 | this.camera.translation[0] += 0.25; 142 | } 143 | 144 | } 145 | 146 | canvas.onmousemove = e => { 147 | const r = quat.create(); 148 | 149 | const radiansX = (2 * (e.pageX - canvas.offsetLeft) / canvas.width) - 1; 150 | quat.rotateY(r, r, radiansX); 151 | 152 | const radiansY = (2 * (e.pageY - canvas.offsetTop) / canvas.height) - 1; 153 | quat.rotateX(r, r, radiansY); 154 | 155 | mat4.fromQuat(this.modelMatrix, r); 156 | } 157 | 158 | document.querySelector('h1').onmousemove = canvas.onmousemove; 159 | 160 | // bind buffers and load data to GPU 161 | gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertex); 162 | gl.bufferData(gl.ARRAY_BUFFER, myVertices, gl.STATIC_DRAW); 163 | 164 | // gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.index); 165 | // gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, myIndices, gl.STATIC_DRAW); 166 | 167 | // descripe data layout of the `position` attribute 168 | gl.vertexAttribPointer( 169 | attributes.position, 170 | 3, /* size */ 171 | gl.FLOAT, /* type */ 172 | false, /* normalized? */ 173 | 0, /* stride */ 174 | 0, /* offset */ 175 | ); 176 | 177 | gl.enableVertexAttribArray(attributes.position); 178 | 179 | gl.enable(gl.DEPTH_TEST); 180 | 181 | this.render(); 182 | } 183 | 184 | update() { 185 | mat4.rotateY(this.modelMatrix, this.modelMatrix, Math.PI/300); 186 | 187 | const center = vec3.add(vec3.create(), this.camera.translation, [0, 0, 1]); 188 | 189 | mat4.lookAt(this.viewMatrix, this.camera.translation, center, [0, 1, 0]); 190 | 191 | // set uniforms 192 | gl.uniformMatrix4fv(this.uniforms.model_matrix, false, this.modelMatrix); 193 | gl.uniformMatrix4fv(this.uniforms.view_matrix, false, this.viewMatrix); 194 | gl.uniformMatrix4fv(this.uniforms.projection_matrix, false, this.projectionMatrix); 195 | } 196 | 197 | render() { 198 | this.update(); 199 | 200 | // gl.clearColor(1, 1, 1, 1); 201 | // gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 202 | 203 | gl.drawArrays(gl.POINTS, 0, myVertices.length/3); 204 | requestAnimationFrame(this.render.bind(this)); 205 | } 206 | } 207 | 208 | const app = new App(); 209 | app.main(); -------------------------------------------------------------------------------- /11-Lighting/main.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Title: Learn WebGL #11 - Lighting 3 | * Author: Darius @ InventBox 4 | */ 5 | 6 | const canvas = document.querySelector('canvas'); 7 | const gl = canvas.getContext('webgl'); 8 | 9 | if (!gl) { 10 | throw new Error('WebGL not supported'); 11 | } 12 | 13 | // F|L|B|R|T|U 14 | const vertexData = [ 15 | 16 | // Front 17 | 0.5, 0.5, 0.5, // top right 18 | 0.5, -.5, 0.5, // bottom right 19 | -.5, 0.5, 0.5, // top left 20 | -.5, 0.5, 0.5, // top left 21 | 0.5, -.5, 0.5, // bottom right 22 | -.5, -.5, 0.5, // bottom left 23 | 24 | // Left 25 | -.5, 0.5, 0.5, 26 | -.5, -.5, 0.5, 27 | -.5, 0.5, -.5, 28 | -.5, 0.5, -.5, 29 | -.5, -.5, 0.5, 30 | -.5, -.5, -.5, 31 | 32 | // Back 33 | -.5, 0.5, -.5, 34 | -.5, -.5, -.5, 35 | 0.5, 0.5, -.5, 36 | 0.5, 0.5, -.5, 37 | -.5, -.5, -.5, 38 | 0.5, -.5, -.5, 39 | 40 | 0.5, 0.5, -.5, 41 | 0.5, -.5, -.5, 42 | 0.5, 0.5, 0.5, 43 | 0.5, 0.5, 0.5, 44 | 0.5, -.5, -0.5, 45 | 0.5, -.5, 0.5, 46 | 47 | // Top 48 | 0.5, 0.5, 0.5, 49 | 0.5, 0.5, -.5, 50 | -.5, 0.5, 0.5, 51 | -.5, 0.5, 0.5, 52 | 0.5, 0.5, -.5, 53 | -.5, 0.5, -.5, 54 | 55 | // Underside 56 | 0.5, -.5, 0.5, 57 | 0.5, -.5, -.5, 58 | -.5, -.5, 0.5, 59 | -.5, -.5, 0.5, 60 | 0.5, -.5, -.5, 61 | -.5, -.5, -.5, 62 | ]; 63 | 64 | // Construct an Array by repeating `pattern` n times 65 | function repeat(n, pattern) { 66 | return [...Array(n)].reduce(sum => sum.concat(pattern), []); 67 | } 68 | 69 | const uvData = repeat(6, [ 70 | 1, 1, // top right 71 | 1, 0, // bottom right 72 | 0, 1, // top left 73 | 74 | 0, 1, // top left 75 | 1, 0, // bottom right 76 | 0, 0 // bottom left 77 | ]); 78 | 79 | // F|L|B|R|T|U 80 | const normalData = [ 81 | ...repeat(6, [0, 0, 1]), // Z+ 82 | ...repeat(6, [-1, 0, 0]), // X- 83 | ...repeat(6, [0, 0, -1]), // Z- 84 | ...repeat(6, [1, 0, 0]), // X+ 85 | ...repeat(6, [0, 1, 0]), // Y+ 86 | ...repeat(6, [0, -1, 0]), // Y- 87 | ] 88 | 89 | const positionBuffer = gl.createBuffer(); 90 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 91 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 92 | 93 | const uvBuffer = gl.createBuffer(); 94 | gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer); 95 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(uvData), gl.STATIC_DRAW); 96 | 97 | const normalBuffer = gl.createBuffer(); 98 | gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); 99 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normalData), gl.STATIC_DRAW); 100 | 101 | // RESOURCE LOADING 102 | // ================ 103 | 104 | function loadTexture(url) { 105 | const texture = gl.createTexture(); 106 | const image = new Image(); 107 | 108 | image.onload = e => { 109 | gl.bindTexture(gl.TEXTURE_2D, texture); 110 | 111 | gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 112 | 113 | gl.generateMipmap(gl.TEXTURE_2D); 114 | }; 115 | 116 | image.src = url; 117 | return texture; 118 | } 119 | 120 | const brick = loadTexture(`textures/invent-box-logo-512px.jpg`); 121 | 122 | gl.activeTexture(gl.TEXTURE0); 123 | gl.bindTexture(gl.TEXTURE_2D, brick); 124 | 125 | // SHADER PROGRAM 126 | // ============== 127 | let uniformLocations; 128 | (function shaderProgram() { 129 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 130 | gl.shaderSource(vertexShader, ` 131 | precision mediump float; 132 | 133 | const vec3 lightDirection = normalize(vec3(0, 1.0, 1.0)); 134 | const float ambient = 0.1; 135 | 136 | attribute vec3 position; 137 | attribute vec2 uv; 138 | attribute vec3 normal; 139 | 140 | varying vec2 vUV; 141 | varying float vBrightness; 142 | 143 | uniform mat4 matrix; 144 | uniform mat4 normalMatrix; 145 | 146 | void main() { 147 | vec3 worldNormal = (normalMatrix * vec4(normal, 1)).xyz; 148 | float diffuse = max(0.0, dot(worldNormal, lightDirection)); 149 | 150 | vUV = uv; 151 | vBrightness = ambient + diffuse; 152 | 153 | gl_Position = matrix * vec4(position, 1); 154 | } 155 | `); 156 | gl.compileShader(vertexShader); 157 | 158 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 159 | gl.shaderSource(fragmentShader, ` 160 | precision mediump float; 161 | 162 | varying vec2 vUV; 163 | varying float vBrightness; 164 | 165 | uniform sampler2D textureID; 166 | 167 | void main() { 168 | vec4 texel = texture2D(textureID, vUV); 169 | texel.xyz *= vBrightness; 170 | gl_FragColor = texel; 171 | } 172 | `); 173 | gl.compileShader(fragmentShader); 174 | console.log(gl.getShaderInfoLog(fragmentShader)); 175 | 176 | const program = gl.createProgram(); 177 | gl.attachShader(program, vertexShader); 178 | gl.attachShader(program, fragmentShader); 179 | 180 | gl.linkProgram(program); 181 | 182 | const positionLocation = gl.getAttribLocation(program, `position`); 183 | gl.enableVertexAttribArray(positionLocation); 184 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 185 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 186 | 187 | const uvLocation = gl.getAttribLocation(program, `uv`); 188 | gl.enableVertexAttribArray(uvLocation); 189 | gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer); 190 | gl.vertexAttribPointer(uvLocation, 2, gl.FLOAT, false, 0, 0); 191 | 192 | const normalLocation = gl.getAttribLocation(program, `normal`); 193 | gl.enableVertexAttribArray(normalLocation); 194 | gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer); 195 | gl.vertexAttribPointer(normalLocation, 3, gl.FLOAT, false, 0, 0); 196 | 197 | gl.useProgram(program); 198 | gl.enable(gl.DEPTH_TEST); 199 | 200 | uniformLocations = { 201 | matrix: gl.getUniformLocation(program, `matrix`), 202 | normalMatrix: gl.getUniformLocation(program, `normalMatrix`), 203 | textureID: gl.getUniformLocation(program, 'textureID'), 204 | }; 205 | 206 | gl.uniform1i(uniformLocations.textureID, 0); 207 | })(); 208 | 209 | 210 | // MATRICES 211 | // ======== 212 | const modelMatrix = mat4.create(); 213 | const viewMatrix = mat4.create(); 214 | const projectionMatrix = mat4.create(); 215 | mat4.perspective(projectionMatrix, 216 | 75 * Math.PI / 180, // vertical field-of-view (angle, radians) 217 | canvas.width / canvas.height, // aspect W/H 218 | 1e-4, // near cull distance 219 | 1e4 // far cull distance 220 | ); 221 | 222 | const mvMatrix = mat4.create(); 223 | const mvpMatrix = mat4.create(); 224 | 225 | mat4.translate(viewMatrix, viewMatrix, [0, 0.1, 2]); 226 | mat4.invert(viewMatrix, viewMatrix); 227 | 228 | const normalMatrix = mat4.create(); 229 | 230 | // ANIMATION LOOP 231 | // ============== 232 | 233 | function animate() { 234 | requestAnimationFrame(animate); 235 | 236 | mat4.rotateX(modelMatrix, modelMatrix, Math.PI/100); 237 | mat4.rotateY(modelMatrix, modelMatrix, Math.PI/200); 238 | 239 | mat4.multiply(mvMatrix, viewMatrix, modelMatrix); 240 | mat4.multiply(mvpMatrix, projectionMatrix, mvMatrix); 241 | 242 | mat4.invert(normalMatrix, mvMatrix); 243 | mat4.transpose(normalMatrix, normalMatrix); 244 | 245 | gl.uniformMatrix4fv(uniformLocations.normalMatrix, false, normalMatrix); 246 | gl.uniformMatrix4fv(uniformLocations.matrix, false, mvpMatrix); 247 | 248 | gl.drawArrays(gl.TRIANGLES, 0, vertexData.length / 3); 249 | } 250 | 251 | animate(); 252 | -------------------------------------------------------------------------------- /08-Camera/public/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | const gl = canvas.getContext('webgl'); 3 | 4 | if (!gl) { 5 | throw new Error('WebGL not supported'); 6 | } 7 | 8 | const vertexData = [ 9 | 10 | // Front 11 | 0.5, 0.5, 0.5, 12 | 0.5, -.5, 0.5, 13 | -.5, 0.5, 0.5, 14 | -.5, 0.5, 0.5, 15 | 0.5, -.5, 0.5, 16 | -.5, -.5, 0.5, 17 | 18 | // Left 19 | -.5, 0.5, 0.5, 20 | -.5, -.5, 0.5, 21 | -.5, 0.5, -.5, 22 | -.5, 0.5, -.5, 23 | -.5, -.5, 0.5, 24 | -.5, -.5, -.5, 25 | 26 | // Back 27 | -.5, 0.5, -.5, 28 | -.5, -.5, -.5, 29 | 0.5, 0.5, -.5, 30 | 0.5, 0.5, -.5, 31 | -.5, -.5, -.5, 32 | 0.5, -.5, -.5, 33 | 34 | // Right 35 | 0.5, 0.5, -.5, 36 | 0.5, -.5, -.5, 37 | 0.5, 0.5, 0.5, 38 | 0.5, 0.5, 0.5, 39 | 0.5, -.5, 0.5, 40 | 0.5, -.5, -.5, 41 | 42 | // Top 43 | 0.5, 0.5, 0.5, 44 | 0.5, 0.5, -.5, 45 | -.5, 0.5, 0.5, 46 | -.5, 0.5, 0.5, 47 | 0.5, 0.5, -.5, 48 | -.5, 0.5, -.5, 49 | 50 | // Bottom 51 | 0.5, -.5, 0.5, 52 | 0.5, -.5, -.5, 53 | -.5, -.5, 0.5, 54 | -.5, -.5, 0.5, 55 | 0.5, -.5, -.5, 56 | -.5, -.5, -.5, 57 | ]; 58 | 59 | function randomColor() { 60 | return [Math.random(), Math.random(), Math.random()]; 61 | } 62 | 63 | let colorData = [ 64 | 0.8208771372239099, 65 | 0.8377264682056472, 66 | 0.5595970833259835, 67 | 0.8208771372239099, 68 | 0.8377264682056472, 69 | 0.5595970833259835, 70 | 0.8208771372239099, 71 | 0.8377264682056472, 72 | 0.5595970833259835, 73 | 0.8208771372239099, 74 | 0.8377264682056472, 75 | 0.5595970833259835, 76 | 0.8208771372239099, 77 | 0.8377264682056472, 78 | 0.5595970833259835, 79 | 0.8208771372239099, 80 | 0.8377264682056472, 81 | 0.5595970833259835, 82 | 0.6383697899098857, 83 | 0.7542970804033661, 84 | 0.15987469526874187, 85 | 0.6383697899098857, 86 | 0.7542970804033661, 87 | 0.15987469526874187, 88 | 0.6383697899098857, 89 | 0.7542970804033661, 90 | 0.15987469526874187, 91 | 0.6383697899098857, 92 | 0.7542970804033661, 93 | 0.15987469526874187, 94 | 0.6383697899098857, 95 | 0.7542970804033661, 96 | 0.15987469526874187, 97 | 0.6383697899098857, 98 | 0.7542970804033661, 99 | 0.15987469526874187, 100 | 0.4748058969160487, 101 | 0.1434985986967683, 102 | 0.33132941767944335, 103 | 0.4748058969160487, 104 | 0.1434985986967683, 105 | 0.33132941767944335, 106 | 0.4748058969160487, 107 | 0.1434985986967683, 108 | 0.33132941767944335, 109 | 0.4748058969160487, 110 | 0.1434985986967683, 111 | 0.33132941767944335, 112 | 0.4748058969160487, 113 | 0.1434985986967683, 114 | 0.33132941767944335, 115 | 0.4748058969160487, 116 | 0.1434985986967683, 117 | 0.33132941767944335, 118 | 0.6797687963970465, 119 | 0.497134726814609, 120 | 0.8521957428261815, 121 | 0.6797687963970465, 122 | 0.497134726814609, 123 | 0.8521957428261815, 124 | 0.6797687963970465, 125 | 0.497134726814609, 126 | 0.8521957428261815, 127 | 0.6797687963970465, 128 | 0.497134726814609, 129 | 0.8521957428261815, 130 | 0.6797687963970465, 131 | 0.497134726814609, 132 | 0.8521957428261815, 133 | 0.6797687963970465, 134 | 0.497134726814609, 135 | 0.8521957428261815, 136 | 0.18835062149041593, 137 | 0.3262350267153872, 138 | 0.6784154021153825, 139 | 0.18835062149041593, 140 | 0.3262350267153872, 141 | 0.6784154021153825, 142 | 0.18835062149041593, 143 | 0.3262350267153872, 144 | 0.6784154021153825, 145 | 0.18835062149041593, 146 | 0.3262350267153872, 147 | 0.6784154021153825, 148 | 0.18835062149041593, 149 | 0.3262350267153872, 150 | 0.6784154021153825, 151 | 0.18835062149041593, 152 | 0.3262350267153872, 153 | 0.6784154021153825, 154 | 0.5548753105818753, 155 | 0.9993365733813392, 156 | 0.9789370174013655, 157 | 0.5548753105818753, 158 | 0.9993365733813392, 159 | 0.9789370174013655, 160 | 0.5548753105818753, 161 | 0.9993365733813392, 162 | 0.9789370174013655, 163 | 0.5548753105818753, 164 | 0.9993365733813392, 165 | 0.9789370174013655, 166 | 0.5548753105818753, 167 | 0.9993365733813392, 168 | 0.9789370174013655, 169 | 0.5548753105818753, 170 | 0.9993365733813392, 171 | 0.9789370174013655 172 | ]; 173 | 174 | // let colorData = []; 175 | // for (let face = 0; face < 6; face++) { 176 | // let faceColor = randomColor(); 177 | // for (let vertex = 0; vertex < 6; vertex++) { 178 | // colorData.push(...faceColor); 179 | // } 180 | // } 181 | 182 | const positionBuffer = gl.createBuffer(); 183 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 184 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW); 185 | 186 | const colorBuffer = gl.createBuffer(); 187 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 188 | gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colorData), gl.STATIC_DRAW); 189 | 190 | const vertexShader = gl.createShader(gl.VERTEX_SHADER); 191 | gl.shaderSource(vertexShader, ` 192 | precision mediump float; 193 | 194 | attribute vec3 position; 195 | attribute vec3 color; 196 | varying vec3 vColor; 197 | 198 | uniform mat4 matrix; 199 | 200 | void main() { 201 | vColor = color; 202 | gl_Position = matrix * vec4(position, 1); 203 | } 204 | `); 205 | gl.compileShader(vertexShader); 206 | 207 | const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); 208 | gl.shaderSource(fragmentShader, ` 209 | precision mediump float; 210 | 211 | varying vec3 vColor; 212 | 213 | void main() { 214 | gl_FragColor = vec4(vColor, 1); 215 | } 216 | `); 217 | gl.compileShader(fragmentShader); 218 | console.log(gl.getShaderInfoLog(fragmentShader)); 219 | 220 | const program = gl.createProgram(); 221 | gl.attachShader(program, vertexShader); 222 | gl.attachShader(program, fragmentShader); 223 | 224 | gl.linkProgram(program); 225 | 226 | const positionLocation = gl.getAttribLocation(program, `position`); 227 | gl.enableVertexAttribArray(positionLocation); 228 | gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); 229 | gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0); 230 | 231 | const colorLocation = gl.getAttribLocation(program, `color`); 232 | gl.enableVertexAttribArray(colorLocation); 233 | gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); 234 | gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); 235 | 236 | gl.useProgram(program); 237 | gl.enable(gl.DEPTH_TEST); 238 | 239 | const uniformLocations = { 240 | matrix: gl.getUniformLocation(program, `matrix`), 241 | }; 242 | 243 | const modelMatrix = mat4.create(); 244 | const viewMatrix = mat4.create(); 245 | const projectionMatrix = mat4.create(); 246 | mat4.perspective(projectionMatrix, 247 | 75 * Math.PI/180, // vertical field-of-view (angle, radians) 248 | canvas.width/canvas.height, // aspect W/H 249 | 1e-4, // near cull distance 250 | 1e4 // far cull distance 251 | ); 252 | 253 | const mvMatrix = mat4.create(); 254 | const mvpMatrix = mat4.create(); 255 | 256 | mat4.translate(modelMatrix, modelMatrix, [-1.5, 0, -2]); 257 | 258 | mat4.translate(viewMatrix, viewMatrix, [-3, 0, 1]); 259 | mat4.invert(viewMatrix, viewMatrix); 260 | 261 | function animate() { 262 | requestAnimationFrame(animate); 263 | 264 | mat4.multiply(mvMatrix, viewMatrix, modelMatrix); 265 | mat4.multiply(mvpMatrix, projectionMatrix, mvMatrix); 266 | gl.uniformMatrix4fv(uniformLocations.matrix, false, mvpMatrix); 267 | gl.drawArrays(gl.TRIANGLES, 0, vertexData.length / 3); 268 | } 269 | 270 | animate(); 271 | -------------------------------------------------------------------------------- /Demo/Sandbox/main.js: -------------------------------------------------------------------------------- 1 | const canvas = document.querySelector('canvas'); 2 | canvas.width = window.innerWidth; 3 | canvas.height = window.innerHeight; 4 | const gl = canvas.getContext('webgl2'); 5 | 6 | if (!gl) { throw new Error('WebGL not supported') } 7 | 8 | class Mesh { 9 | constructor(gl, type, vertexDef, vertices) { 10 | this.type = type; 11 | this.gl = gl; 12 | this.vertexDef = vertexDef; 13 | this.vertices = vertices; 14 | 15 | this.texture = null; 16 | 17 | this.position = vec3.create(); 18 | this.rotation = quat.create(); 19 | this.scale = [1, 1, 1]; 20 | 21 | this.vertexBuffer = gl.createBuffer(); 22 | gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); 23 | Vertex.attributePointers(gl, vertexDef); 24 | 25 | if (vertices !== undefined) { 26 | this.updateVertices(vertices); 27 | } 28 | } 29 | 30 | updateVertices(vertices) { 31 | const gl = this.gl; 32 | this.vertexData = Vertex.interleave(this.vertexDef, vertices); 33 | 34 | gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); 35 | gl.bufferData(gl.ARRAY_BUFFER, this.vertexData, gl.STATIC_DRAW); 36 | } 37 | 38 | drawArrays() { 39 | const gl = this.gl; 40 | 41 | if (this.texture !== undefined) { 42 | gl.activeTexture(gl.TEXTURE0); 43 | gl.bindTexture(gl.TEXTURE_2D, this.texture); 44 | } 45 | 46 | gl.bindBuffer(gl.ARRAY_BUFFER, this.vertexBuffer); 47 | gl.drawArrays(this.type, 0, this.vertices.length); 48 | } 49 | 50 | get matrix() { 51 | return mat4.fromRotationTranslationScale( 52 | mat4.create(), 53 | this.rotation, this.position, this.scale); 54 | } 55 | 56 | set matrix(m) { 57 | mat4.getScaling(this.scale, m); 58 | mat4.getRotation(this.rotation, m); 59 | mat4.getTranslation(this.position, m); 60 | } 61 | } 62 | 63 | class PerspectiveCamera { 64 | constructor(aspect=16/9, fieldOfView=75) { 65 | this.position = vec3.create(); 66 | this.center = vec3.add(vec3.create(), this.position, [0, 0, 1]); 67 | 68 | this.viewMatrix = mat4.create(); 69 | this.projectionMatrix = mat4.create(); 70 | mat4.perspective(this.projectionMatrix, fieldOfView * Math.PI/180, aspect, 1e-5, 1e5); 71 | } 72 | 73 | get matrix() { 74 | mat4.lookAt(this.viewMatrix, this.position, this.center, [0, 1, 0]); 75 | return mat4.multiply(mat4.create(), this.projectionMatrix, this.viewMatrix); 76 | } 77 | } 78 | 79 | class Renderer { 80 | constructor(gl, program) { 81 | this.gl = gl; 82 | this.program = program; 83 | this.program.u = Program.locateUniforms(gl, program); 84 | } 85 | 86 | render(scene, camera) { 87 | const gl = this.gl; 88 | gl.useProgram(this.program); 89 | gl.enable(gl.DEPTH_TEST); 90 | gl.enable(gl.BLEND); 91 | gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); 92 | gl.uniform1i(this.program.u.texture, 0); 93 | 94 | scene.forEach(mesh => { 95 | const cameraProjectionViewMatrix = camera.matrix; 96 | const meshMatrix = mesh.matrix; 97 | const modelViewMatrix = mat4.multiply(mat4.create(), camera.viewMatrix, meshMatrix); 98 | 99 | if (mesh.billBoardY) { 100 | const m = modelViewMatrix; 101 | m[0]=1; 102 | // m[2]=0; 103 | // m[4]=0; 104 | 105 | // m[6]=0; 106 | // m[9]=0; 107 | m[11]=1; 108 | } 109 | 110 | const mvpMatrix = mat4.multiply(mat4.create(), camera.projectionMatrix, modelViewMatrix); 111 | // const mvpMatrix = mat4.multiply(mat4.create(), camera.matrix, mesh.matrix); 112 | gl.uniformMatrix4fv(this.program.u.mvpMatrix, false, mvpMatrix); 113 | 114 | mesh.drawArrays(); 115 | }); 116 | } 117 | } 118 | 119 | const Scene = Array; 120 | 121 | const Geometry = { 122 | rect([w=1, h=1]) { 123 | const kx = w*.5; 124 | const ky = h*.5; 125 | return [ 126 | {position: [-kx, -ky, 0]}, 127 | {position: [-kx, ky, 0]}, 128 | {position: [ kx, -ky, 0]}, 129 | {position: [ kx, ky, 0]}, 130 | ]; 131 | }, 132 | 133 | texturedRect([w=1, h=1]) { 134 | const kx = w*.5; 135 | const ky = h*.5; 136 | return [ 137 | {position: [-kx, -ky, 0], textureCoord: [0, 0]}, 138 | {position: [-kx, ky, 0], textureCoord: [0, 1]}, 139 | {position: [ kx, -ky, 0], textureCoord: [1, 0]}, 140 | {position: [ kx, ky, 0], textureCoord: [1, 1]}, 141 | ]; 142 | }, 143 | 144 | cube() { 145 | return [ 146 | [-1, 1, 1], // Front-top-left 147 | [1, 1, 1], // Front-top-right 148 | [-1, -1, 1], // Front-bottom-left 149 | [1, -1, 1], // Front-bottom-right 150 | [1, -1, -1], // Back-bottom-right 151 | [1, 1, 1], // Front-top-right 152 | [1, 1, -1], // Back-top-right 153 | [-1, 1, 1], // Front-top-left 154 | [-1, 1, -1], // Back-top-left 155 | [-1, -1, 1], // Front-bottom-left 156 | [-1, -1, -1], // Back-bottom-left 157 | [1, -1, -1], // Back-bottom-right 158 | [-1, 1, -1], // Back-top-left 159 | [1, 1, -1] // Back-top-right 160 | ].map(position => {position}); 161 | } 162 | } 163 | 164 | // 165 | // Initialize a texture and load an image. 166 | // When the image finished loading copy it into the texture. 167 | // 168 | function loadTexture(gl, url) { 169 | const texture = gl.createTexture(); 170 | gl.bindTexture(gl.TEXTURE_2D, texture); 171 | 172 | // Because images have to be download over the internet 173 | // they might take a moment until they are ready. 174 | // Until then put a single pixel in the texture so we can 175 | // use it immediately. When the image has finished downloading 176 | // we'll update the texture with the contents of the image. 177 | const level = 0; 178 | const internalFormat = gl.RGBA; 179 | const width = 1; 180 | const height = 1; 181 | const border = 0; 182 | const srcFormat = gl.RGBA; 183 | const srcType = gl.UNSIGNED_BYTE; 184 | const pixel = new Uint8Array([0, 0, 255, 255]); // opaque blue 185 | gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, 186 | width, height, border, srcFormat, srcType, 187 | pixel); 188 | 189 | const image = new Image(); 190 | image.onload = function() { 191 | gl.bindTexture(gl.TEXTURE_2D, texture); 192 | gl.texImage2D(gl.TEXTURE_2D, level, internalFormat, 193 | srcFormat, srcType, image); 194 | 195 | function isPowerOf2(value) { 196 | return (value & (value - 1)) == 0; 197 | } 198 | 199 | // WebGL1 has different requirements for power of 2 images 200 | // vs non power of 2 images so check if the image is a 201 | // power of 2 in both dimensions. 202 | if (isPowerOf2(image.width) && isPowerOf2(image.height)) { 203 | // Yes, it's a power of 2. Generate mips. 204 | gl.generateMipmap(gl.TEXTURE_2D); 205 | } else { 206 | // No, it's not a power of 2. Turn of mips and set 207 | // wrapping to clamp to edge 208 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 209 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 210 | gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 211 | } 212 | }; 213 | 214 | image.src = url; 215 | 216 | return texture; 217 | } 218 | 219 | // Descripe Vertex 220 | const MyVertex = { 221 | ...Vertex.attributes([ 222 | {name: `position`, size: 3}, 223 | {name: `textureCoord`, size: 2}, 224 | ]), 225 | 226 | create([x = 0, y = 0, z = 0], [u=0, v=0]) { 227 | return {position: [x, y, z], textureCoord: [u, v]}; 228 | } 229 | }; 230 | 231 | function createLaser(length=1e3) { 232 | const laser = new Mesh(gl, gl.TRIANGLE_STRIP, MyVertex, Geometry.texturedRect([.03, length])); 233 | laser.texture = loadTexture(gl, 'laser-yellow.png'); 234 | laser.position[1] = length/2; 235 | laser.length = length; 236 | laser.billBoardY = true; 237 | return laser; 238 | } 239 | 240 | function setLaserSpread(lasers, spread) { 241 | const divisions = lasers.length - 1; 242 | 243 | lasers.forEach((laser, i) => { 244 | const division = i - divisions/2; 245 | const angle = spread * division; 246 | 247 | const m = laser.matrix; 248 | mat4.translate(m, mat4.create(), [-division*1e-4,0,-division*1e-3]); 249 | mat4.rotateZ(m, m, angle); 250 | mat4.translate(m, m, [0,laser.length/2,0]); 251 | laser.matrix = m; 252 | }); 253 | } 254 | 255 | // const cube = new Mesh(gl, gl.LINE_STRIP, MyVertex, Geometry.cube()); 256 | 257 | const floor = new Mesh(gl, gl.TRIANGLE_STRIP, MyVertex, Geometry.texturedRect([-10, 10])); 258 | floor.texture = loadTexture(gl, 'tex.png'); 259 | quat.rotateX(floor.rotation, quat.create(), Math.PI/2); 260 | 261 | const camera = new PerspectiveCamera(aspect=canvas.width/canvas.height); 262 | camera.position = [0, 0.15, -3]; 263 | camera.center = vec3.create(); 264 | 265 | const lasers = [...Array(9)].map(createLaser); 266 | 267 | 268 | async function main() { 269 | const program = await Program.create(gl, 270 | `vertex-shader.glsl`, `fragment-shader.glsl`); 271 | 272 | Vertex.connectProgram(gl, MyVertex, program); 273 | 274 | const renderer = new Renderer(gl, program); 275 | 276 | let time = Date.now() * 0.001; 277 | (function animate() { 278 | requestAnimationFrame(animate); 279 | const dt = (Date.now() * 0.001 - time); 280 | time = Date.now() * 0.001; 281 | 282 | let sint = Math.sin(time); 283 | 284 | vec3.rotateY(camera.position, camera.position, camera.center, sint * Math.PI/1000); 285 | setLaserSpread(lasers, (5+5*sint)*Math.PI/180); 286 | renderer.render([floor, ...lasers], camera); 287 | })(); 288 | 289 | window.program = program; 290 | } 291 | 292 | main(); -------------------------------------------------------------------------------- /Demo/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webgl-tutorials", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "~2.1.18", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | } 137 | }, 138 | "finalhandler": { 139 | "version": "1.1.1", 140 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 141 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 142 | "requires": { 143 | "debug": "2.6.9", 144 | "encodeurl": "~1.0.2", 145 | "escape-html": "~1.0.3", 146 | "on-finished": "~2.3.0", 147 | "parseurl": "~1.3.2", 148 | "statuses": "~1.4.0", 149 | "unpipe": "~1.0.0" 150 | } 151 | }, 152 | "forwarded": { 153 | "version": "0.1.2", 154 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 155 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 156 | }, 157 | "fresh": { 158 | "version": "0.5.2", 159 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 160 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 161 | }, 162 | "http-errors": { 163 | "version": "1.6.3", 164 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 165 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 166 | "requires": { 167 | "depd": "~1.1.2", 168 | "inherits": "2.0.3", 169 | "setprototypeof": "1.1.0", 170 | "statuses": ">= 1.4.0 < 2" 171 | } 172 | }, 173 | "iconv-lite": { 174 | "version": "0.4.19", 175 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 176 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 177 | }, 178 | "inherits": { 179 | "version": "2.0.3", 180 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 181 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 182 | }, 183 | "ipaddr.js": { 184 | "version": "1.6.0", 185 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz", 186 | "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" 187 | }, 188 | "media-typer": { 189 | "version": "0.3.0", 190 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 191 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 192 | }, 193 | "merge-descriptors": { 194 | "version": "1.0.1", 195 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 196 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 197 | }, 198 | "methods": { 199 | "version": "1.1.2", 200 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 201 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 202 | }, 203 | "mime": { 204 | "version": "1.4.1", 205 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 206 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 207 | }, 208 | "mime-db": { 209 | "version": "1.33.0", 210 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", 211 | "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" 212 | }, 213 | "mime-types": { 214 | "version": "2.1.18", 215 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", 216 | "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", 217 | "requires": { 218 | "mime-db": "~1.33.0" 219 | } 220 | }, 221 | "ms": { 222 | "version": "2.0.0", 223 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 224 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 225 | }, 226 | "negotiator": { 227 | "version": "0.6.1", 228 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 229 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 230 | }, 231 | "on-finished": { 232 | "version": "2.3.0", 233 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 234 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 235 | "requires": { 236 | "ee-first": "1.1.1" 237 | } 238 | }, 239 | "parseurl": { 240 | "version": "1.3.2", 241 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 242 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 243 | }, 244 | "path-to-regexp": { 245 | "version": "0.1.7", 246 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 247 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 248 | }, 249 | "proxy-addr": { 250 | "version": "2.0.3", 251 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz", 252 | "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==", 253 | "requires": { 254 | "forwarded": "~0.1.2", 255 | "ipaddr.js": "1.6.0" 256 | } 257 | }, 258 | "qs": { 259 | "version": "6.5.1", 260 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 261 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 262 | }, 263 | "range-parser": { 264 | "version": "1.2.0", 265 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 266 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 267 | }, 268 | "raw-body": { 269 | "version": "2.3.2", 270 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 271 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 272 | "requires": { 273 | "bytes": "3.0.0", 274 | "http-errors": "1.6.2", 275 | "iconv-lite": "0.4.19", 276 | "unpipe": "1.0.0" 277 | }, 278 | "dependencies": { 279 | "depd": { 280 | "version": "1.1.1", 281 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 282 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 283 | }, 284 | "http-errors": { 285 | "version": "1.6.2", 286 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 287 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 288 | "requires": { 289 | "depd": "1.1.1", 290 | "inherits": "2.0.3", 291 | "setprototypeof": "1.0.3", 292 | "statuses": ">= 1.3.1 < 2" 293 | } 294 | }, 295 | "setprototypeof": { 296 | "version": "1.0.3", 297 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 298 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 299 | } 300 | } 301 | }, 302 | "safe-buffer": { 303 | "version": "5.1.1", 304 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 305 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 306 | }, 307 | "send": { 308 | "version": "0.16.2", 309 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 310 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 311 | "requires": { 312 | "debug": "2.6.9", 313 | "depd": "~1.1.2", 314 | "destroy": "~1.0.4", 315 | "encodeurl": "~1.0.2", 316 | "escape-html": "~1.0.3", 317 | "etag": "~1.8.1", 318 | "fresh": "0.5.2", 319 | "http-errors": "~1.6.2", 320 | "mime": "1.4.1", 321 | "ms": "2.0.0", 322 | "on-finished": "~2.3.0", 323 | "range-parser": "~1.2.0", 324 | "statuses": "~1.4.0" 325 | } 326 | }, 327 | "serve-static": { 328 | "version": "1.13.2", 329 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 330 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 331 | "requires": { 332 | "encodeurl": "~1.0.2", 333 | "escape-html": "~1.0.3", 334 | "parseurl": "~1.3.2", 335 | "send": "0.16.2" 336 | } 337 | }, 338 | "setprototypeof": { 339 | "version": "1.1.0", 340 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 341 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 342 | }, 343 | "statuses": { 344 | "version": "1.4.0", 345 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 346 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 347 | }, 348 | "type-is": { 349 | "version": "1.6.16", 350 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 351 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 352 | "requires": { 353 | "media-typer": "0.3.0", 354 | "mime-types": "~2.1.18" 355 | } 356 | }, 357 | "unpipe": { 358 | "version": "1.0.0", 359 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 360 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 361 | }, 362 | "utils-merge": { 363 | "version": "1.0.1", 364 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 365 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 366 | }, 367 | "vary": { 368 | "version": "1.1.2", 369 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 370 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 371 | } 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /05-Matrix/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "~2.1.18", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | } 137 | }, 138 | "finalhandler": { 139 | "version": "1.1.1", 140 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 141 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 142 | "requires": { 143 | "debug": "2.6.9", 144 | "encodeurl": "~1.0.2", 145 | "escape-html": "~1.0.3", 146 | "on-finished": "~2.3.0", 147 | "parseurl": "~1.3.2", 148 | "statuses": "~1.4.0", 149 | "unpipe": "~1.0.0" 150 | } 151 | }, 152 | "forwarded": { 153 | "version": "0.1.2", 154 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 155 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 156 | }, 157 | "fresh": { 158 | "version": "0.5.2", 159 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 160 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 161 | }, 162 | "http-errors": { 163 | "version": "1.6.3", 164 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 165 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 166 | "requires": { 167 | "depd": "~1.1.2", 168 | "inherits": "2.0.3", 169 | "setprototypeof": "1.1.0", 170 | "statuses": ">= 1.4.0 < 2" 171 | } 172 | }, 173 | "iconv-lite": { 174 | "version": "0.4.19", 175 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 176 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 177 | }, 178 | "inherits": { 179 | "version": "2.0.3", 180 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 181 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 182 | }, 183 | "ipaddr.js": { 184 | "version": "1.6.0", 185 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz", 186 | "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" 187 | }, 188 | "media-typer": { 189 | "version": "0.3.0", 190 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 191 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 192 | }, 193 | "merge-descriptors": { 194 | "version": "1.0.1", 195 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 196 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 197 | }, 198 | "methods": { 199 | "version": "1.1.2", 200 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 201 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 202 | }, 203 | "mime": { 204 | "version": "1.4.1", 205 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 206 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 207 | }, 208 | "mime-db": { 209 | "version": "1.33.0", 210 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", 211 | "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" 212 | }, 213 | "mime-types": { 214 | "version": "2.1.18", 215 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", 216 | "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", 217 | "requires": { 218 | "mime-db": "~1.33.0" 219 | } 220 | }, 221 | "ms": { 222 | "version": "2.0.0", 223 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 224 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 225 | }, 226 | "negotiator": { 227 | "version": "0.6.1", 228 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 229 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 230 | }, 231 | "on-finished": { 232 | "version": "2.3.0", 233 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 234 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 235 | "requires": { 236 | "ee-first": "1.1.1" 237 | } 238 | }, 239 | "parseurl": { 240 | "version": "1.3.2", 241 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 242 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 243 | }, 244 | "path-to-regexp": { 245 | "version": "0.1.7", 246 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 247 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 248 | }, 249 | "proxy-addr": { 250 | "version": "2.0.3", 251 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz", 252 | "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==", 253 | "requires": { 254 | "forwarded": "~0.1.2", 255 | "ipaddr.js": "1.6.0" 256 | } 257 | }, 258 | "qs": { 259 | "version": "6.5.1", 260 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 261 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 262 | }, 263 | "range-parser": { 264 | "version": "1.2.0", 265 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 266 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 267 | }, 268 | "raw-body": { 269 | "version": "2.3.2", 270 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 271 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 272 | "requires": { 273 | "bytes": "3.0.0", 274 | "http-errors": "1.6.2", 275 | "iconv-lite": "0.4.19", 276 | "unpipe": "1.0.0" 277 | }, 278 | "dependencies": { 279 | "depd": { 280 | "version": "1.1.1", 281 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 282 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 283 | }, 284 | "http-errors": { 285 | "version": "1.6.2", 286 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 287 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 288 | "requires": { 289 | "depd": "1.1.1", 290 | "inherits": "2.0.3", 291 | "setprototypeof": "1.0.3", 292 | "statuses": ">= 1.3.1 < 2" 293 | } 294 | }, 295 | "setprototypeof": { 296 | "version": "1.0.3", 297 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 298 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 299 | } 300 | } 301 | }, 302 | "safe-buffer": { 303 | "version": "5.1.1", 304 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 305 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 306 | }, 307 | "send": { 308 | "version": "0.16.2", 309 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 310 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 311 | "requires": { 312 | "debug": "2.6.9", 313 | "depd": "~1.1.2", 314 | "destroy": "~1.0.4", 315 | "encodeurl": "~1.0.2", 316 | "escape-html": "~1.0.3", 317 | "etag": "~1.8.1", 318 | "fresh": "0.5.2", 319 | "http-errors": "~1.6.2", 320 | "mime": "1.4.1", 321 | "ms": "2.0.0", 322 | "on-finished": "~2.3.0", 323 | "range-parser": "~1.2.0", 324 | "statuses": "~1.4.0" 325 | } 326 | }, 327 | "serve-static": { 328 | "version": "1.13.2", 329 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 330 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 331 | "requires": { 332 | "encodeurl": "~1.0.2", 333 | "escape-html": "~1.0.3", 334 | "parseurl": "~1.3.2", 335 | "send": "0.16.2" 336 | } 337 | }, 338 | "setprototypeof": { 339 | "version": "1.1.0", 340 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 341 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 342 | }, 343 | "statuses": { 344 | "version": "1.4.0", 345 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 346 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 347 | }, 348 | "type-is": { 349 | "version": "1.6.16", 350 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 351 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 352 | "requires": { 353 | "media-typer": "0.3.0", 354 | "mime-types": "~2.1.18" 355 | } 356 | }, 357 | "unpipe": { 358 | "version": "1.0.0", 359 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 360 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 361 | }, 362 | "utils-merge": { 363 | "version": "1.0.1", 364 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 365 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 366 | }, 367 | "vary": { 368 | "version": "1.1.2", 369 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 370 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 371 | } 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /06-Box/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "~2.1.18", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | } 137 | }, 138 | "finalhandler": { 139 | "version": "1.1.1", 140 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 141 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 142 | "requires": { 143 | "debug": "2.6.9", 144 | "encodeurl": "~1.0.2", 145 | "escape-html": "~1.0.3", 146 | "on-finished": "~2.3.0", 147 | "parseurl": "~1.3.2", 148 | "statuses": "~1.4.0", 149 | "unpipe": "~1.0.0" 150 | } 151 | }, 152 | "forwarded": { 153 | "version": "0.1.2", 154 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 155 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 156 | }, 157 | "fresh": { 158 | "version": "0.5.2", 159 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 160 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 161 | }, 162 | "http-errors": { 163 | "version": "1.6.3", 164 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 165 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 166 | "requires": { 167 | "depd": "~1.1.2", 168 | "inherits": "2.0.3", 169 | "setprototypeof": "1.1.0", 170 | "statuses": ">= 1.4.0 < 2" 171 | } 172 | }, 173 | "iconv-lite": { 174 | "version": "0.4.19", 175 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 176 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 177 | }, 178 | "inherits": { 179 | "version": "2.0.3", 180 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 181 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 182 | }, 183 | "ipaddr.js": { 184 | "version": "1.6.0", 185 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz", 186 | "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" 187 | }, 188 | "media-typer": { 189 | "version": "0.3.0", 190 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 191 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 192 | }, 193 | "merge-descriptors": { 194 | "version": "1.0.1", 195 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 196 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 197 | }, 198 | "methods": { 199 | "version": "1.1.2", 200 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 201 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 202 | }, 203 | "mime": { 204 | "version": "1.4.1", 205 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 206 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 207 | }, 208 | "mime-db": { 209 | "version": "1.33.0", 210 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", 211 | "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" 212 | }, 213 | "mime-types": { 214 | "version": "2.1.18", 215 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", 216 | "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", 217 | "requires": { 218 | "mime-db": "~1.33.0" 219 | } 220 | }, 221 | "ms": { 222 | "version": "2.0.0", 223 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 224 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 225 | }, 226 | "negotiator": { 227 | "version": "0.6.1", 228 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 229 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 230 | }, 231 | "on-finished": { 232 | "version": "2.3.0", 233 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 234 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 235 | "requires": { 236 | "ee-first": "1.1.1" 237 | } 238 | }, 239 | "parseurl": { 240 | "version": "1.3.2", 241 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 242 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 243 | }, 244 | "path-to-regexp": { 245 | "version": "0.1.7", 246 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 247 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 248 | }, 249 | "proxy-addr": { 250 | "version": "2.0.3", 251 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz", 252 | "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==", 253 | "requires": { 254 | "forwarded": "~0.1.2", 255 | "ipaddr.js": "1.6.0" 256 | } 257 | }, 258 | "qs": { 259 | "version": "6.5.1", 260 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 261 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 262 | }, 263 | "range-parser": { 264 | "version": "1.2.0", 265 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 266 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 267 | }, 268 | "raw-body": { 269 | "version": "2.3.2", 270 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 271 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 272 | "requires": { 273 | "bytes": "3.0.0", 274 | "http-errors": "1.6.2", 275 | "iconv-lite": "0.4.19", 276 | "unpipe": "1.0.0" 277 | }, 278 | "dependencies": { 279 | "depd": { 280 | "version": "1.1.1", 281 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 282 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 283 | }, 284 | "http-errors": { 285 | "version": "1.6.2", 286 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 287 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 288 | "requires": { 289 | "depd": "1.1.1", 290 | "inherits": "2.0.3", 291 | "setprototypeof": "1.0.3", 292 | "statuses": ">= 1.3.1 < 2" 293 | } 294 | }, 295 | "setprototypeof": { 296 | "version": "1.0.3", 297 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 298 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 299 | } 300 | } 301 | }, 302 | "safe-buffer": { 303 | "version": "5.1.1", 304 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 305 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 306 | }, 307 | "send": { 308 | "version": "0.16.2", 309 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 310 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 311 | "requires": { 312 | "debug": "2.6.9", 313 | "depd": "~1.1.2", 314 | "destroy": "~1.0.4", 315 | "encodeurl": "~1.0.2", 316 | "escape-html": "~1.0.3", 317 | "etag": "~1.8.1", 318 | "fresh": "0.5.2", 319 | "http-errors": "~1.6.2", 320 | "mime": "1.4.1", 321 | "ms": "2.0.0", 322 | "on-finished": "~2.3.0", 323 | "range-parser": "~1.2.0", 324 | "statuses": "~1.4.0" 325 | } 326 | }, 327 | "serve-static": { 328 | "version": "1.13.2", 329 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 330 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 331 | "requires": { 332 | "encodeurl": "~1.0.2", 333 | "escape-html": "~1.0.3", 334 | "parseurl": "~1.3.2", 335 | "send": "0.16.2" 336 | } 337 | }, 338 | "setprototypeof": { 339 | "version": "1.1.0", 340 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 341 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 342 | }, 343 | "statuses": { 344 | "version": "1.4.0", 345 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 346 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 347 | }, 348 | "type-is": { 349 | "version": "1.6.16", 350 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 351 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 352 | "requires": { 353 | "media-typer": "0.3.0", 354 | "mime-types": "~2.1.18" 355 | } 356 | }, 357 | "unpipe": { 358 | "version": "1.0.0", 359 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 360 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 361 | }, 362 | "utils-merge": { 363 | "version": "1.0.1", 364 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 365 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 366 | }, 367 | "vary": { 368 | "version": "1.1.2", 369 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 370 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 371 | } 372 | } 373 | } 374 | -------------------------------------------------------------------------------- /08-Camera/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "1-getting-started", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.5", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", 10 | "integrity": "sha1-63d99gEXI6OxTopywIBcjoZ0a9I=", 11 | "requires": { 12 | "mime-types": "~2.1.18", 13 | "negotiator": "0.6.1" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | } 137 | }, 138 | "finalhandler": { 139 | "version": "1.1.1", 140 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 141 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 142 | "requires": { 143 | "debug": "2.6.9", 144 | "encodeurl": "~1.0.2", 145 | "escape-html": "~1.0.3", 146 | "on-finished": "~2.3.0", 147 | "parseurl": "~1.3.2", 148 | "statuses": "~1.4.0", 149 | "unpipe": "~1.0.0" 150 | } 151 | }, 152 | "forwarded": { 153 | "version": "0.1.2", 154 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 155 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 156 | }, 157 | "fresh": { 158 | "version": "0.5.2", 159 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 160 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 161 | }, 162 | "http-errors": { 163 | "version": "1.6.3", 164 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 165 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 166 | "requires": { 167 | "depd": "~1.1.2", 168 | "inherits": "2.0.3", 169 | "setprototypeof": "1.1.0", 170 | "statuses": ">= 1.4.0 < 2" 171 | } 172 | }, 173 | "iconv-lite": { 174 | "version": "0.4.19", 175 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 176 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 177 | }, 178 | "inherits": { 179 | "version": "2.0.3", 180 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 181 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 182 | }, 183 | "ipaddr.js": { 184 | "version": "1.6.0", 185 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz", 186 | "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs=" 187 | }, 188 | "media-typer": { 189 | "version": "0.3.0", 190 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 191 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 192 | }, 193 | "merge-descriptors": { 194 | "version": "1.0.1", 195 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 196 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 197 | }, 198 | "methods": { 199 | "version": "1.1.2", 200 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 201 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 202 | }, 203 | "mime": { 204 | "version": "1.4.1", 205 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 206 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 207 | }, 208 | "mime-db": { 209 | "version": "1.33.0", 210 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", 211 | "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==" 212 | }, 213 | "mime-types": { 214 | "version": "2.1.18", 215 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", 216 | "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", 217 | "requires": { 218 | "mime-db": "~1.33.0" 219 | } 220 | }, 221 | "ms": { 222 | "version": "2.0.0", 223 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 224 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 225 | }, 226 | "negotiator": { 227 | "version": "0.6.1", 228 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", 229 | "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" 230 | }, 231 | "on-finished": { 232 | "version": "2.3.0", 233 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 234 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 235 | "requires": { 236 | "ee-first": "1.1.1" 237 | } 238 | }, 239 | "parseurl": { 240 | "version": "1.3.2", 241 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.2.tgz", 242 | "integrity": "sha1-/CidTtiZMRlGDBViUyYs3I3mW/M=" 243 | }, 244 | "path-to-regexp": { 245 | "version": "0.1.7", 246 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 247 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 248 | }, 249 | "proxy-addr": { 250 | "version": "2.0.3", 251 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz", 252 | "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==", 253 | "requires": { 254 | "forwarded": "~0.1.2", 255 | "ipaddr.js": "1.6.0" 256 | } 257 | }, 258 | "qs": { 259 | "version": "6.5.1", 260 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 261 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 262 | }, 263 | "range-parser": { 264 | "version": "1.2.0", 265 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", 266 | "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=" 267 | }, 268 | "raw-body": { 269 | "version": "2.3.2", 270 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 271 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 272 | "requires": { 273 | "bytes": "3.0.0", 274 | "http-errors": "1.6.2", 275 | "iconv-lite": "0.4.19", 276 | "unpipe": "1.0.0" 277 | }, 278 | "dependencies": { 279 | "depd": { 280 | "version": "1.1.1", 281 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 282 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 283 | }, 284 | "http-errors": { 285 | "version": "1.6.2", 286 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 287 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 288 | "requires": { 289 | "depd": "1.1.1", 290 | "inherits": "2.0.3", 291 | "setprototypeof": "1.0.3", 292 | "statuses": ">= 1.3.1 < 2" 293 | } 294 | }, 295 | "setprototypeof": { 296 | "version": "1.0.3", 297 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 298 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 299 | } 300 | } 301 | }, 302 | "safe-buffer": { 303 | "version": "5.1.1", 304 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 305 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 306 | }, 307 | "send": { 308 | "version": "0.16.2", 309 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 310 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 311 | "requires": { 312 | "debug": "2.6.9", 313 | "depd": "~1.1.2", 314 | "destroy": "~1.0.4", 315 | "encodeurl": "~1.0.2", 316 | "escape-html": "~1.0.3", 317 | "etag": "~1.8.1", 318 | "fresh": "0.5.2", 319 | "http-errors": "~1.6.2", 320 | "mime": "1.4.1", 321 | "ms": "2.0.0", 322 | "on-finished": "~2.3.0", 323 | "range-parser": "~1.2.0", 324 | "statuses": "~1.4.0" 325 | } 326 | }, 327 | "serve-static": { 328 | "version": "1.13.2", 329 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 330 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 331 | "requires": { 332 | "encodeurl": "~1.0.2", 333 | "escape-html": "~1.0.3", 334 | "parseurl": "~1.3.2", 335 | "send": "0.16.2" 336 | } 337 | }, 338 | "setprototypeof": { 339 | "version": "1.1.0", 340 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 341 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 342 | }, 343 | "statuses": { 344 | "version": "1.4.0", 345 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 346 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 347 | }, 348 | "type-is": { 349 | "version": "1.6.16", 350 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz", 351 | "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==", 352 | "requires": { 353 | "media-typer": "0.3.0", 354 | "mime-types": "~2.1.18" 355 | } 356 | }, 357 | "unpipe": { 358 | "version": "1.0.0", 359 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 360 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 361 | }, 362 | "utils-merge": { 363 | "version": "1.0.1", 364 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 365 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 366 | }, 367 | "vary": { 368 | "version": "1.1.2", 369 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 370 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 371 | } 372 | } 373 | } 374 | --------------------------------------------------------------------------------