Mercurial > hg > websites > source2info / changeset
changeset
- Add Material Editor
Thu, 02 Jan 2020 03:02:34 -0700
- author
- Glitchvid <Glitchvid@glitchvid.com>
- date
- Thu, 02 Jan 2020 03:02:34 -0700
- changeset 1
- 0a8d8d1522b7
- parent 0
- c1d19a9b477c
- child 2
- 5322f0778cb1
- Add Material Editor
- Add Model Editor
- Add Particle Editor
- Add Film Maker
- Add VConsole 2
- Add preliminary unreleased tools section
--- a/site/features.html Wed Jan 01 21:21:10 2020 -0700 +++ b/site/features.html Thu Jan 02 03:02:34 2020 -0700 @@ -68,33 +68,148 @@ <br> The new primitive in S2 is the <i>Mesh</i>, a vertex-based system, allowing concave, and complex geometry to be authored by the level designer. </p> + <br> + <div class="mediaContainer"> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing"> + Mesh Editing (Video) + </video> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing"> + Convex Mesh Editing (Video) + </video> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing"> + Convex Mesh Editing (Video) + </video> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing"> + Convex Mesh Editing (Video) + </video> + </div> + <br> <p> + Meshes can be exported for further editing in 3D applications, and then re-imported as DMX, OBJ, or FBX. + <br> + Legacy Source VMFs can also be imported. + </p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionMaterialEditor"><h3 id="toolsSectionMaterialEditor">- Material Editor <img src="features/tools/met/met_sm.png"></h3></a> + <p> + No more fiddling with text-based VMT files, slow material reloads, and trial & error debugging. + <br> + S2 MET Supports realtime editing and previews, with in-editor texture importing. + <br> + </p> <br> <div class="mediaContainer"> - <video width="256" height="256" autoplay loop> - <source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing"> - Mesh Editing (Video) - </video> - <video width="256" height="256" autoplay loop> - <source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing"> - Convex Mesh Editing (Video) - </video> - <video width="256" height="256" autoplay loop> - <source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing"> - Convex Mesh Editing (Video) - </video> - <video width="256" height="256" autoplay loop> - <source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing"> + <img class="mediaImage" src="features/tools/met/properties.png" width="1024px"> + </div> + <br> + <p> + MET Also supports extensive dynamic functions, and the following image formats: PSD, TGA, TIF, PFM, MKS, PNG, JPG + </p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionModelEditor"><h3 id="toolsSectionModelEditor">- Model Editor <img src="features/tools/model_editor/model_editor_sm.png"></h3></a> + <p> + Model viewer, and editor. No more fiddling with QC files, this does it all. + <br> + Used to configure hitboxes, collision, poses, weights, LODs, animations, constraints, attachments, and anything involving models. + <br> + </p> + <br> + <div class="mediaContainer"> + <img class="mediaImage" src="features/tools/model_editor/editor.png" height="400px"> + <video height="400px" autoplay loop> + <source src="features/tools/model_editor/modelviewer.webm" type="video/webm" title="Model Viewer"> Convex Mesh Editing (Video) </video> </div> + <br> + <p> + Model Importing supports the following formats: DMX, SMD, FBX, OBJ </p> </div> - - <h1>H1</h1> - <h2>H2</h2> - <h3>H3</h3> - <h4>H4</h4> + + <div class="contentSection"> + <a href="#toolsSectionPET"><h3 id="toolsSectionPET">- Particle Editor <img src="features/tools/pet/pet_sm.png"></h3></a> + <p> + PET is for editing particles + <br> + ... + <br> + </p> + <br> + <div class="mediaContainer"> + </div> + <br> + </div> + + <div class="contentSection"> + <a href="#toolsSectionSFM"><h3 id="toolsSectionSFM">- Filmmaker <img src="features/tools/sfm/sfm_sm.png"></h3></a> + <p> + The Filmmaker is used for rendering high-quality cinematics from in-engine. + <br> + ... + <br> + </p> + <br> + <div class="mediaContainer"> + </div> + <br> + </div> + + <div class="contentSection"> + <a href="#toolsSectionVC2"><h3 id="toolsSectionVC2">- VConsole2 <img src="features/tools/vconsole2/vconsole2_sm.png"></h3></a> + <p> + Vastly improved over the simple in-engine console of yore. Using a networked API for engine communication it allows remote debugging. + <br> + VC2 also features multi-tabbed displays for multitasking, extensive filtering, and verbosity control. + <br> + </p> + <br> + <div class="mediaContainer"> + <img class="mediaImage" src="features/tools/vconsole2/main.png" > + </div> + <br> + </div> + + <h2>Unreleased</h2> + + <div class="contentSection"> + <a href="#toolsSectionFaceposer"><h3 id="toolsSectionFaceposer">- Faceposer <img src="features/tools/faceposer/faceposer_sm.png"></h3></a> + <p> + Used to make Choreo scenes. + </p> + <div class="mediaContainer"> + </div> + </div> + + <div class="contentSection"> + <a href="#toolsSectionModeldoc"><h3 id="toolsSectionModeldoc">- Modeldoc <img src="features/tools/model_doc/model_doc_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionSnooper"><h3 id="toolsSectionSnooper">- Snooper <img src="features/tools/snooper/snooper_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionVMix"><h3 id="toolsSectionVMix">- VMix <img src="features/tools/vmix/vmix_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionGrapheditor"><h3 id="toolsSectionGrapheditor">- Grapheditor <img src="features/tools/grapheditor/grapheditor_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + </div> <div class="footer">
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/site/features_tools.html Thu Jan 02 03:02:34 2020 -0700 @@ -0,0 +1,217 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width"> + <meta name="description" content="Source 2 Documentation"> + <link rel="stylesheet" href="style.css"> + <link rel="icon" type="image/png" href="/s2favicon.png"> +</head> + +<body> + +<div class="main" > + + <div id="header"> + <img class="headerlogo" src="source2_new.svg" title="Source 2"> + <nav> + <ul class="buttons"> + <a href="home.html"><li>Home</li></a> + <a href="features.html"><li class="active">Features</li></a> + <a href=""><li>Wiki</li></a> + <a href="about.html"><li>About</li></a> + </ul> + </nav> + </div> + + <div class="content"> + <h1>Source 2 Engine Features > Tools</h1> + <p> + Source 2 comes with an integrated development enviornment (IDE), consisting of: + <br> + <i>Asset Browser</i>, <i>Level Editor</i>, <i>Material Editor</i>, <i>Model Editor</i>, <i>Particle Editor</i>, and <i>Film Maker</i>. + <br> + </p> + <hr> + + <div class="contentSection"> + <a href="#toolsSectionAssetBrowser"><h3 id="toolsSectionAssetBrowser">- Asset Browser <img src="features/tools/asset_browser_sm.png"></h3></a> + <p> + The Asset Browser allows quick searching, previewing, grouping, and managing assets. + <br> + It also serves as the hub for development, launching the other tools either by their icon, or by double clicking an asset. + <br> + Assets inside the browser can also be dragged into other tools (such as Hammer). + <br> + <div class="mediaContainer"> + <video width="577" height="438" autoplay loop> + <source src="features/tools/asset_browser_demo.webm" type="video/webm"> + (Unspported video format?) + </video> + </div> + </p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionHammerEditor"><h3 id="toolsSectionHammerEditor">- Hammer Editor <img src="features/tools/hammer/hammer_sm.png"></h3></a> + <p> + The Source 2 Level Editor (Hammer) is a revolutionary leap above even contemporary level editors. + <br> + On top of the expected brush-based manipulation, you can edit individual faces, edges, and even verticies, making it a full model editor. + <br> + <br> + The new primitive in S2 is the <i>Mesh</i>, a vertex-based system, allowing concave, and complex geometry to be authored by the level designer. + </p> + <br> + <div class="mediaContainer"> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/editbasics.webm" type="video/webm" title="Mesh editing"> + Mesh Editing (Video) + </video> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/convexmesh.webm" type="video/webm" title="Convex mesh editing"> + Convex Mesh Editing (Video) + </video> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/faceremoval.webm" type="video/webm" title="Convex mesh editing"> + Convex Mesh Editing (Video) + </video> + <video width="256" height="256" autoplay loop> + <source src="features/tools/hammer/edittimelapse.webm" type="video/webm" title="Convex mesh editing"> + Convex Mesh Editing (Video) + </video> + </div> + <br> + <p> + Meshes can be exported for further editing in 3D applications, and then re-imported as DMX, OBJ, or FBX. + <br> + Legacy Source VMFs can also be imported. + </p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionMaterialEditor"><h3 id="toolsSectionMaterialEditor">- Material Editor <img src="features/tools/met/met_sm.png"></h3></a> + <p> + No more fiddling with text-based VMT files, slow material reloads, and trial & error debugging. + <br> + S2 MET Supports realtime editing and previews, with in-editor texture importing. + <br> + </p> + <br> + <div class="mediaContainer"> + <img class="mediaImage" src="features/tools/met/properties.png" width="1024px"> + </div> + <br> + <p> + MET Also supports extensive dynamic functions, and the following image formats: PSD, TGA, TIF, PFM, MKS, PNG, JPG + </p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionModelEditor"><h3 id="toolsSectionModelEditor">- Model Editor <img src="features/tools/model_editor/model_editor_sm.png"></h3></a> + <p> + Model viewer, and editor. No more fiddling with QC files, this does it all. + <br> + Used to configure hitboxes, collision, poses, weights, LODs, animations, constraints, attachments, and anything involving models. + <br> + </p> + <br> + <div class="mediaContainer"> + <img class="mediaImage" src="features/tools/model_editor/editor.png" height="400px"> + <video height="400px" autoplay loop> + <source src="features/tools/model_editor/modelviewer.webm" type="video/webm" title="Model Viewer"> + Convex Mesh Editing (Video) + </video> + </div> + <br> + <p> + Model Importing supports the following formats: DMX, SMD, FBX, OBJ + </p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionPET"><h3 id="toolsSectionPET">- Particle Editor <img src="features/tools/pet/pet_sm.png"></h3></a> + <p> + PET is for editing particles + <br> + ... + <br> + </p> + <br> + <div class="mediaContainer"> + </div> + <br> + </div> + + <div class="contentSection"> + <a href="#toolsSectionSFM"><h3 id="toolsSectionSFM">- Filmmaker <img src="features/tools/sfm/sfm_sm.png"></h3></a> + <p> + The Filmmaker is used for rendering high-quality cinematics from in-engine. + <br> + ... + <br> + </p> + <br> + <div class="mediaContainer"> + </div> + <br> + </div> + + <div class="contentSection"> + <a href="#toolsSectionVC2"><h3 id="toolsSectionVC2">- VConsole2 <img src="features/tools/vconsole2/vconsole2_sm.png"></h3></a> + <p> + Vastly improved over the simple in-engine console of yore. Using a networked API for engine communication it allows remote debugging. + <br> + VC2 also features multi-tabbed displays for multitasking, extensive filtering, and verbosity control. + <br> + </p> + <br> + <div class="mediaContainer"> + <img class="mediaImage" src="features/tools/vconsole2/main.png" > + </div> + <br> + </div> + + <h2>Unreleased</h2> + + <div class="contentSection"> + <a href="#toolsSectionFaceposer"><h3 id="toolsSectionFaceposer">- Faceposer <img src="features/tools/faceposer/faceposer_sm.png"></h3></a> + <p> + Used to make Choreo scenes. + </p> + <div class="mediaContainer"> + </div> + </div> + + <div class="contentSection"> + <a href="#toolsSectionModeldoc"><h3 id="toolsSectionModeldoc">- Modeldoc <img src="features/tools/model_doc/model_doc_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionSnooper"><h3 id="toolsSectionSnooper">- Snooper <img src="features/tools/snooper/snooper_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionVMix"><h3 id="toolsSectionVMix">- VMix <img src="features/tools/vmix/vmix_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + <div class="contentSection"> + <a href="#toolsSectionGrapheditor"><h3 id="toolsSectionGrapheditor">- Grapheditor <img src="features/tools/grapheditor/grapheditor_sm.png"></h3></a> + <p id="textNotice"><b>Notice: </b>Unknown.</p> + </div> + + + </div> + + <div class="footer"> + <p class="copyright">Source Creator Collective - 2020</p> + </div> + +</div> + +</body> + +</html>
--- a/site/home.html Wed Jan 01 21:21:10 2020 -0700 +++ b/site/home.html Thu Jan 02 03:02:34 2020 -0700 @@ -34,7 +34,7 @@ The S2DP was created in anticipation of the release of Half-Life: Alyx. Our purpose is to be a central location for Source 2 information. <br> As part of this, we'll be launching a Wiki, meant to be a cleaner and updated version of the old Valve Developer Wiki, without mixing Source and Source 2 information. <br> <br> - Currently only this home page exists, but eventually we'll have a MediaWiki, a Source 2 Features page, and ancilliary resources. + This website is currently in-dev, with the Features section being the focus of efforts. </p> <!-- <h3>- The Firefall (2019-12-31)</h3> <p>
--- a/site/style.css Wed Jan 01 21:21:10 2020 -0700 +++ b/site/style.css Thu Jan 02 03:02:34 2020 -0700 @@ -78,6 +78,19 @@ font-size: 0.875em; } +#textNotice { + width: max-content; + background-image: url("missing_5p.png"); + padding: 0.3em; + border-radius: 4px; + border-color: #f800f8d4; + border-style: dashed; + border-width: 1px; + margin-left: 2em; + margin-right: 2em; + padding-right: 10%; +} + /* Footer Styles */ div.footer { @@ -131,7 +144,10 @@ width: max-content; max-width: 100%; } -video { +div.mediaContainer video { + max-width: 100%; +} +img.mediaImage { max-width: 100%; }
