An OpenGL Sample as Firefox Plugin

• Download plugin DLL - 33.3 KB
• Download source - 2.7 KB

Introduction

This articles explains how OpenGL is rendered as a Firefox plugin. I don't know whether it's useful. I did it for fun!

Background

I was trying to render an X3D file with OpenGL as a Firefox plugin. I know there are many such X3D file viewers, but mine intends to handle the haptic field... well, this sample is just a by-product.

Tinkering with the Code

You will first need to download Gecko plugin API and Firefox source code. Download Gecko SDK and extract to \yourroot\gecko-sdk\.

Download Firefox source code from here, extract to \yourroot\mozilla.
Then we start from a basic plugin sample. Go to the folder: yourroot\mozilla\modules\plugin\tools\sdk\samples\basic\windows.

Here's a little trick, we need to run unix2dos on npbasic.dsp and npbasic.dsw under this folder. Then we open and cover the project by Visual C++ Express, we will be successful now. From project properties, change the Additional include directories to yourroot\gecko-sdk\include; yourroot\mozilla\modules\plugin\tools\sdk\samples\include. Try to build now, if successful, we continue...

Open plugin.cpp, then

#include "plugin.h"

add:

#include <gl/gl.h> 

Then, after the line:

static WNDPROC lpOldProc = NULL; 

add two functions EnableOpenGL and DisableOpenGL:

void EnableOpenGL(HWND hWnd, HDC * hDC, HGLRC * hRC); 
void DisableOpenGL(HWND hWnd, HDC hDC, HGLRC hRC);

Add EnableOpenGL and SetTimer as shown below:

NPBool nsPluginInstance::init(NPWindow* aWindow)
{
.................

    //we add EnableOpenGL and SetTimer
    EnableOpenGL( mhWnd, &hDC, &hRC );
        SetTimer(mhWnd, 0,  1,  (TIMERPROC) NULL); // no timer callback
............
}

Then, add DisableOpenGL as shown below:

void nsPluginInstance::shut() 
{
    // subclass it back 

    // We add DisableOpenGL

    DisableOpenGL( mhWnd, hDC, hRC );
.... } 

After that, in PluginWinProc, we need to handle WM_TIMER message like the following:

case WM_TIMER:
    theta += 1.0f;
    PostMessage( hWnd, WM_PAINT, NULL, NULL );
    break;    

At last we do OpenGL rendering in the case of WM_PAINT, remove the original code under this case, and replace it with our code as follows:

glClearColor( 0.0f, 0.0f, 0.0f, 0.0f ); 
glClear( GL_COLOR_BUFFER_BIT ); 
glPushMatrix(); 
glRotatef( theta, 0.0f, 0.0f, 1.0f );
glBegin( GL_TRIANGLES ); 
   glColor3f( 1.0f, 0.0f, 0.0f ); 
   glVertex2f( 0.0f, 1.0f );
   glColor3f( 0.0f, 1.0f, 0.0f ); 
   glVertex2f( 0.87f, -0.5f );
   glColor3f( 0.0f, 0.0f, 1.0f );
   glVertex2f( -0.87f, -0.5f ); 
glEnd(); 
glPopMatrix();
SwapBuffers( hDC );

It's almost done, but don't forget to define EnableOpenGL and DisableOpenGL:

void EnableOpenGL(HWND hWnd, HDC * hDC, HGLRC * hRC)
{
    PIXELFORMATDESCRIPTOR pfd;
    int format;
    // get the device context (DC)
    *hDC = GetDC( hWnd ); // set the pixel format for the DC
    ZeroMemory( &pfd, sizeof( pfd ) );
    pfd.nSize = sizeof( pfd );
    pfd.nVersion = 1; 
    pfd.dwFlags = PFD_DRAW_TO_WINDOW | PFD_SUPPORT_OPENGL | 
                           PFD_DOUBLEBUFFER;
    pfd.iPixelType = PFD_TYPE_RGBA;
    pfd.cColorBits = 24;
    pfd.cDepthBits = 16;
    pfd.iLayerType = PFD_MAIN_PLANE;
    format = ChoosePixelFormat( *hDC, &pfd );
    SetPixelFormat( *hDC, format, &pfd );
    // create and enable the render context (RC)
    *hRC = wglCreateContext( *hDC ); 
    wglMakeCurrent( *hDC, *hRC );
}

// Disable OpenGL
void DisableOpenGL(HWND hWnd, HDC hDC, HGLRC hRC)
{
    wglMakeCurrent( NULL, NULL );
    wglDeleteContext( hRC );
    ReleaseDC( hWnd, hDC );
}    

It's done!

Build the Project

Nothing to say, just

Test the plugin

Copy npbasic.dll to C:\Program Files\Mozilla Firefox\plugins\ or yourfolder\Mozilla Firefox\plugins\.
From the folder yourroot\mozilla\modules\plugin\tools\sdk\samples\basic\, you will find test.html, double click and you would see a rotating triangle, colorful...

Another way to test the plugin

If we open a file of the type that a plugin is registered, then the plugin will be triggered. Open basic.rc with a text editor, find the string "FileExtents" and change the value to whatever you want. I changed it to hx3d. Next, create an empty file with the extension .hx3d, I created testbasic.hx3d under my folder. In the Firefox URL box, type c:\r.wang\testbasic.hx3d, you would also see the plugin triangle.

Now... enjoy!

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here