WebGL - Modes of Drawing - Tutorialspoint

WebGL 2D/3D Programming and Graphics Rendering For The Web. 28 Lectures 4 hours ... To draw a series of unconnected line segments (individual lines). Home CodingGround Jobs Whiteboard Tools Business Teachwithus WebGLTutorial WebGL-Home WebGL-Introduction WebGL-Html5CanvasOverview WebGL-Basics WebGL-GraphicsPipeline WebGLApplication WebGL-SampleApplication WebGL-Context WebGL-Geometry WebGL-Shaders AssociatingAttributes&BufferObjects WebGL-DrawingaModel WebGLExamples WebGL-DrawingPoints WebGL-DrawingaTriangle WebGL-ModesofDrawing WebGL-DrawingaQuad WebGL-Colors WebGL-Translation WebGL-Scaling WebGL-Rotation WebGL-CubeRotation WebGL-InteractiveCube WebGLUsefulResources WebGL-QuickGuide WebGL-UsefulResources WebGL-Discussion SelectedReading UPSCIASExamsNotes Developer'sBestPractices QuestionsandAnswers EffectiveResumeWriting HRInterviewQuestions ComputerGlossary WhoisWho WebGL-ModesofDrawing Advertisements PreviousPage NextPage  Three.js&WebGL3DProgrammingCrashCourse(VR,OpenGL) 10Lectures 1hours FrahaanHussain MoreDetail WebGL2D/3DProgrammingandGraphicsRenderingForTheWeb 28Lectures 4hours FrahaanHussain MoreDetail Inthepreviouschapter(Chapter12),wediscussedhowtodrawatriangleusingWebGL.Inadditiontotriangles,WebGLsupportsvariousotherdrawingmodes.ThischapterexplainsthedrawingmodessupportedbyWebGL. ThemodeParameter Let’stakealookatthesyntaxofthemethods−drawElements()anddrawArrays(). voiddrawElements(enummode,longcount,enumtype,longoffset); voiddrawArrays(enummode,intfirst,longcount); Ifyouclearlyobserve,boththemethodsacceptaparametermode.Usingthisparameter,theprogrammerscanselectthedrawingmodeinWebGL. ThedrawingmodesprovidedbyWebGLarelistedinthefollowingtable. Sr.No. Mode&Description 1 gl.POINTS Todrawaseriesofpoints. 2 gl.LINES Todrawaseriesofunconnectedlinesegments(individuallines). 3 gl.LINE_STRIP Todrawaseriesofconnectedlinesegments. 4 gl.LINE_LOOP Todrawaseriesofconnectedlinesegments.Italsojoinsthefirstandlastverticestoformaloop. 5 gl.TRIANGLES Todrawaseriesofseparatetriangles. 6 gl.TRIANGLE_STRIP Todrawaseriesofconnectedtrianglesinstripfashion. 7 gl.TRIANGLE_FAN Todrawaseriesofconnectedtrianglessharingthefirstvertexinafan-likefashion. Example–DrawThreeParallelLines Thefollowingexampleshowshowtodrawthreeparallellinesusinggl.LINES. LiveDemo